Animated Wave is a customizable motion component for Framer that transforms a stack of horizontal bars into a fluid, continuously moving wave.

Choose from six carefully tuned presets or switch to Custom mode to control the wave physics, shape, speed, amplitude, frequency, direction, phase, spacing, colors, and interaction.

Designed to be lightweight, responsive, and easy to customize directly from Framer's property panel.

Features

🎛 Preset System

• Classic

• Soft

• Energetic

• Deep

• Minimal

• Pulse

• Custom

〰 Custom Wave Motion

• Bar Count

• Amplitude

• Frequency

• Speed

• Wave Shape

• Forward / Reverse direction

• Phase offset

〰 Multiple Wave Shapes

• Sine

• Soft

• Triangle

• Square

🎨 Flexible Styling

• Solid color mode

• Two-color gradient mode

• Custom background color

• Wave width

• Bar spacing

• Corner radius

• Edge fading

🖱 Interactive Motion Enable hover interaction to dynamically boost the wave's amplitude and create a more responsive feel.

⚡ Performance Optimized

• RequestAnimationFrame animation

• Viewport-aware animation

• Static-renderer support

• Automatic animation cleanup

• GPU-friendly transforms

• No external dependencies

♿ Accessibility Add an optional ARIA label when the wave communicates meaningful information, or leave it empty when the animation is purely decorative.

Support

Need help customizing Animated Wave or using it in your Framer project?

I'm happy to help with setup, customization, or troubleshooting.

X: @karimsaif0

Email: karimsaif010@gmail.com