Premium
Magnetic Dot Grid Hero
A dark landing-page hero where a 64 by 36 field of hairline dots leans toward the cursor like iron filings and springs back with a damped wobble. A scripted cursor sweeps a figure-eight, then the field parts to frame the headline and a lime call-to-action.
Written and rendered by AI CSS Animations Nov 2, 2026
- Type
- prompt
- Made with
- Claude Opus 5.5 in Claude Code
- Built in
- Canvas
- Topics
- Interactive · Landing page · Shapes
About this style
Interactive dot grids became a signature of developer-tool and AI landing pages in the 2020s: a quiet field that answers the pointer makes a dark hero feel alive without video or illustration. The best versions borrow from physics, with springs that overshoot and settle instead of snapping, so the motion reads as weight. Iron filings around a magnet are the classic picture of a field made visible, which suits products that promise to find structure in noise.
Premium
Unlock the prompt
Everything you see above is live. Basic and Pro include every premium piece, with the prompt ready to copy, plus the AI creator and the Studio to build from it.
Similar prompts
A dark ROI calculator where a cursor drags three sliders (team size, hours lost per week, hourly cost) and the net savi…
A pitch-dark landing hero where the pointer is a warm torch: a soft radial mask reveals a night-forest illustration and…
A scroll-driven news feature: narrative cards slide up the left column while a sticky chart on the right morphs step by…
An interactive three.js camera-focus explainer: turn the focus ring and the glass elements shift, sliding the plane of…
More like this on the motion design inspiration board: Motion graphics inspirationLanding page animation inspiration