How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Sampling: the logo image is drawn at 90% of a 1100px square. Every pixel with any opacity becomes one dot, in that pixel's colour, placed at the centre of the screen (one dot per device pixel).
- Dots: round 3.5px points with soft edges, drawn in a single WebGL call over a flat background.
- Force: while the pointer has moved in the last 300 frames, every dot within 3000px feels a push away from the cursor (strength 0.003). The push gets weaker as a dot is already displaced. - Velocity keeps 82% each frame, and a 2.5% pull brings each dot back to its home. - Dots can stray at most 100px. Beyond that they are eased back and slowed.
- Rest: 300 frames after the last pointer move the physics pauses, and the dots have settled home by then.
- Layout (demo): the canvas fills the hero behind the text. A 37px statement sits 25% down the screen in the right third, mono labels sit bottom-left and bottom-right, and a small pill link sits in the corner.
- Under 1000px: the canvas is skipped (as in the original) and the hero shows its plain background with the text.
- Fallbacks: no WebGL or reduced motion: the logo shows as a static image.