Reactive particle constellation
A field of points drifts on its own, drawing faint lines to its nearest neighbors, then scatters from the cursor like a soft force field.
A fixed pool of points redraws on the CPU every frame; it pauses off-screen and in background tabs to save battery.
When I'd ship this: a hero, not a whole site.
Magnetic tilt cards
Each card tracks the cursor and tilts toward it in 3D, with a light sheen following along — a small detail that makes an interface feel physical.
Scope
Clear brief, fixed price.Build
Real progress, with check-ins.Handover
Docs, access, your team can run it.When I'd ship this: product cards, if the rest of the page stays still.
Kinetic type & text-scramble
Headlines resolve into focus word-by-word as they scroll into view, and any word can be marked to decode itself — scrambling through random characters before settling.
Scroll this back into view to trigger it again, or click the amber word.
When I'd ship this: one headline, not body copy.
Ambient flow field
Thousands of tiny strands follow an invisible noise field, leaving soft trailing streaks behind them — generative art where no two frames are ever alike.
Each strand follows an invisible noise field and fades via a low-alpha overlay instead of clearing the canvas — that's what creates the trails.
When I'd ship this: a splash or a 404, never a contact form.
Glass panel with live specular light
A frosted panel over a soft color wash, with a highlight that follows your cursor like light catching real glass.
Human-reviewed
AI drafts and speeds up the work — I still review, test, and take responsibility for every line before it ships, same as on any client project.
When I'd ship this: a quote or a price, not a long paragraph.
The one a workshop would actually use
A button that leans gently toward your cursor as it gets close — enough physicality to feel alive, cheap enough to ship on a real site.
This is the 10% version. The other seven techniques on this page are the 100%.
Composing two techniques
The 3D pointer-tracking from the cards above, the specular sheen from the glass panel below — same cursor, two effects at once.
Tilt + glass, together
Move your cursor — the card tilts in 3D and its glass face catches the light, both from one pointer.When I'd ship this: rarely — one strong effect usually reads better than two stacked.
Lab note
That hero canvas doesn't clip to its rounded corners on its own — WebGL canvases are GPU-composited, and some browsers ignore a border-radius set directly on them. The fix was boring: wrap it in a plain div with overflow:hidden and clip that instead.
Want something like this in your own project?
I can adapt any of these — or build something new — for a real product.
Get in touch