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.
- Backgrounds
- canvas2d
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1287 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.
medium Fractal Topography Contours
A full-bleed topographic map drawn in one fragment shader: a slowly drifting fractal terrain traced as pixel-perfect contour lines with thicker index contours, an optional elevation tint, and a soft hill that rises under the pointer in the accent colour.
- threejs
- glsl
light 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.
- canvas2d
- gsap
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
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