Dithered Waves

Built using fractal Brownian motion (FBM), it renders smooth, looping wave animations that feel both organic and digital — perfect for hero sections, landing pages, or tech-themed visuals.

Each render feels alive, with optional mouse-driven distortions and pixelated textures that evoke classic display art — modernized for today’s web.

What Makes It Stand Out

• Real-time WebGL wave animation using FBM noise generation

• Authentic retro dithering effect

• Adjustable pixel size for a true low-res or subtle pixel look

• Interactive hover effects that distort wave motion

• Optional organic distortion layers for more fluid movement

• Random wave generation for unique visuals each load

• Performance optimized — includes viewport-based pausing and static rendering

• Perfect for backgrounds, hero sections, or digital art aesthetics

Customisations

Wave Properties:

• Wave Speed – Adjust animation pace

• Wave Direction – Control direction

• Frequency – Define wave density

• Amplitude – Set wave intensity

• Wave Color – Choose your color tone

• Randomize Waves – Generate new patterns each load

Visual Style:

• Colors – Set palette depth

• Pixel Size – Control pixelation scale

Interaction:

• Disable Animation – Freeze for static backgrounds

• Mouse Interaction – Enable or disable wave hover distortion

• Mouse Radius – Set hover area size

Distortion Effects:

• Enable Distortion – Add organic, fluid motion

• Distortion Amount – Define distortion intensity

• Distortion Speed – Adjust distortion animation speed

Usage in Framer

1. Copy and paste the component and resize it to your desired area.

2. Customize its appearance as per your requirement using the properties provided in the property control panel.

3. Done! It is that simple. No coding required.

Note

After pasting the component on the canvas, the component will work perfectly on playing, but it may appear heavily pixelated when sitting idle on the canvas. To fix this, just restart your project.