Pixel Ripple

Pixel Ripple Effect (DOM vs Canvas)

How the Ripple Effect Works

Distance-Based Animation

Like ripples in a pond, pixels spread outward from the mouse entry point:

     Mouse enters here
            ↓
         [ • ]      ← Center (Band 0)
       [     ]      ← Band 1
     [       ]      ← Band 2
   [         ]      ← Band 3
 [           ]      ← Band 4
[             ]     ← Band 5 (Edge)

The Wave Motion

A moving wave travels from center to edges, showing only 2 bands at a time:

Time →  0%        25%       50%       75%       100%

        ██                                        Band 0-1
                  ██                              Band 2-3
                            ██                    Band 4-5
                                      ██          Band 6-7
                                                ██ Edge

Adding Randomness

To avoid obvious circular bands, added randomness:

Perfect Circle:          With Randomness:
   ●●●●●●●                  ●  ●●●
  ●●●●●●●●●                ●●  ● ●●●
 ●●●●●●●●●●●              ● ●●●   ●●●
●●●●●●●●●●●●●            ●● ● ●●● ● ●
 ●●●●●●●●●●●              ●●  ●● ●●●
  ●●●●●●●●●                 ● ●●● ●
   ●●●●●●●                   ●● ●●

Key Parameters

Grid Size:Pixel count across
Wave Width:2 bands visible
Duration:Animation speed
Density:Coverage percentage

Animation Timeline

1. Calculate distances
2. Group into 8 bands
3. Wave starts at center
4. Moves through bands
5. Pixels fade in/out
6. Reaches edge & vanishes

Each pixel has random timing offset and 60% appearance chance, creating an organic digital dissolution effect.