By Miguel Clavel, Senior Product Designer
A page can be completely correct and still feel flat. The gap between flat and expensive is usually a few small moments where the page notices you're there. Here are three from my site, live, each with the exact prompt so you can build your own.
Recipe 01
I wanted the first thing you touch on the page to feel alive, without turning my own name into a toy. So the rule was simple: react to the exact letter under your mouse, never the whole word. Eight animations, cycled so neighbours never share one.
The bit I had to fix by hand: they kept firing while the name was shrinking up into the header on scroll, which looked broken. One check stops a letter animating once the name starts moving.
The prompt
Split this heading into individual letters, each in its own element. Write eight short hover animations: a squash and stretch, a tip over that swings back, a drop and spring up, a 3D flip, a sideways slide, a shiver, a scale pop, and a hop. Cycle them across the letters so neighbours never match. Each runs between half a second and two seconds, and plays only when the mouse enters that one letter. Give each a sensible transform origin. Turn it all off for reduced motion.
Recipe 02
It's a grid, not a cursor. The page is split into 102 columns of small squares. Your pointer charges up whichever squares it passes near, and each one remembers the brightest it's ever been. That single rule is what makes the trail hold its shape instead of flickering out behind you.
What I got wrong twice: squares kept lighting up underneath my name. I blocked the charge where the text sits and they still lit up, because the radius reaches in from outside it. The fix was to stop drawing there at all, not to stop charging.
The prompt
Add a full width canvas behind my hero, split into a grid about 100 columns wide. As the pointer moves, raise an energy value on every cell within 60 pixels of it, and let each cell keep the highest energy it has reached rather than following the pointer back down. Fade energy slowly, twice as fast once the pointer has been still for half a second. Draw the highest energy cells as solid squares in the page text colour and lower ones in random accent colours, skipping the faintest. Never draw over the rectangle where my hero text sits.
Recipe 03
The line isn't really a line. It's a curve with a single control point, and that control point is your cursor. Move sideways and it slides with you. Move closer and the bend gets deeper. What makes it feel real is the letting go: it overshoots, comes back, overshoots less, and settles. Each bounce keeps 86 percent of the one before it, roughly what a real piece of string does.
No invisible box: it just listens to where your pointer is on the page. A box over the line would sit on top of the links next to it and eat the clicks.
The prompt
Draw a flat horizontal line as an SVG quadratic curve with one control point in the middle. Listen for mouse movement on the whole page, with no overlay element over the line. When the pointer comes within about 100 pixels vertically and inside the line's width, move the control point to the pointer's horizontal position and push it toward the pointer vertically. When the pointer leaves, spring the line back with a decaying oscillation, keeping about 86 percent of the amplitude each bounce, until it settles flat.
Seven more