Dot Grid Pointer Field
A DPR-aware canvas grid of hairline dots that the pointer pushes outward and lights up within a soft radius; each dot springs back with a damped overshoot while a slow idle wave keeps the field breathing, and the loop pauses off-screen.
- Backgrounds
- canvas2d
- gsap
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1392 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Starfield Depth Parallax
Three canvas layers of stars at different depths drift slowly across a sticky sky, slide under the pointer with depth-weighted parallax, rise as you scroll, and every few seconds a shooting star streaks through the near layer.
- canvas2d
- gsap
light Mesh Lines Background
The classic constellation: a canvas of slowly wandering points that draw a line to every neighbour within reach, fading with distance and tinted by the accent, with the pointer acting as an extra node; reduced motion gets one static frame.
- canvas2d
Featured medium Aurora Shader Background
A full-screen fragment shader folds three ribbons of aurora colour through layered fbm noise above a dark horizon, lets the pointer bend the curtains with a lagged lens, adds grain and a vignette; a CSS gradient stands in without WebGL or with reduced motion.
- threejs
- glsl
medium Incense Ribbon
One incense stick in a glazed bowl of ash on ivory paper. A thin smoke ribbon rises straight from the ember, curls into turbulence and fades; move the pointer near it and your breath bends it. Six blends.
- threejs
- glsl