Description:
This code creates a beautiful animated wave effect on text using pure HTML, CSS, and JavaScript — no external libraries required. Each letter of the text oscillates vertically, forming a smooth, continuous wave motion that can be adjusted in real-time using on-screen controls.
Key highlights:
🎨 Customizable Animation: Change wave amplitude, speed, and letter delay spacing with range sliders.
💬 Live Text Update: Type new text directly to see the effect instantly update.
⚙️ CSS Variables & Keyframes: Uses --wave-amplitude, --duration, and --gap for fine control.
📱 Responsive Design: Scales beautifully across devices.
♿ Accessibility Ready: Detects “prefers-reduced-motion” for users who disable animations.
Perfect for landing pages, logos, hero text, or interactive showcases, this snippet demonstrates how a few lines of CSS and JavaScript can transform static typography into living motion.
Description:
This code creates a beautiful animated wave effect on text using pure HTML, CSS, and JavaScript — no external libraries required. Each letter of the text oscillates vertically, forming a smooth, continuous wave motion that can be adjusted in real-time using on-screen controls.
Key highlights:
🎨 Customizable Animation: Change wave amplitude, speed, and letter delay spacing with range sliders.
💬 Live Text Update: Type new text directly to see the effect instantly update.
⚙️ CSS Variables & Keyframes: Uses --wave-amplitude, --duration, and --gap for fine control.
📱 Responsive Design: Scales beautifully across devices.
♿ Accessibility Ready: Detects “prefers-reduced-motion” for users who disable animations.
Perfect for landing pages, logos, hero text, or interactive showcases, this snippet demonstrates how a few lines of CSS and JavaScript can transform static typography into living motion.
