Animations · 6, growing
Motion recipes you can paste.
Each entry has a live demo with a replay button — see it run before you decide to lift it. CSS keyframes, Framer Motion, GSAP, Motion One, raw SVG. Add yours via a PR.
animation · pointer · hover
Magnetic hover
Listen for pointermove on the element. Compute the cursor's offset from the element centre and apply it as a transform — scaled down (e.g. 0.3) so the element follows but doesn't track 1:1. On pointerleave, transition back to zero. The factor (we use 0.35) is the whole game: 0.1 feels lifeless, 0.6 feels gimmicky. 0.35 reads as tactile.An element that pulls toward the cursor when nearby, snaps back when it leaves.
udaysinhanimation · svg · drawing
Plotter draw-on
Set each path's stroke-dasharray to its own length, then animate stroke-dashoffset from that length down to zero — the path appears to be drawn by a physical pen. Critically, time each path proportional to its length so short marks plot fast and long perimeters plot slow. That's what makes it read as a plotter, not a transition.SVG paths drawing themselves in, one stroke at a time, timed by length.
udaysinhanimation · e-paper · stepped
E-paper refresh flash
Real e-paper devices invert their entire frame when turning a page — it's how the controller resets pixel state. Reproducing that flash with a stepped opacity animation on a black overlay turns any page transition into something that feels like e-ink, not like the Web. Use sparingly and only on navigation; constant flashing reads as a glitch, not a medium.A 320ms full-screen invert that reads as a Kindle redrawing the page.
udaysinhanimation · pointer · gradient
Spotlight glow
Same primitive as the hero grid: track pointer position into CSS custom properties (`--mx`, `--my`), use a radial-gradient referencing those props inside the element. The element brightens where the cursor is. Use on dark cards, hero CTAs, or anywhere you want a single warm focal point that follows the user's eye.A soft radial glow that tracks the cursor across an element.
udaysinhanimation · terminal · css
Stepped blink caret
Default CSS transitions ease — that reads as Web, not as terminal. Force the keyframe through steps(2) and the caret snaps cleanly between visible and hidden at 1 Hz. Tiny detail, completely changes what kind of screen the page seems to be on.A terminal cursor that snaps on and off instead of fading.
udaysinhanimation · css · text
Text shimmer
A gradient bound to the text via `background-clip: text` and animated by translating its position. Looks like light catching a polished surface as you tilt it. Cheap (one element, one keyframe), reads as premium. Use for hero headlines or any moment of brand luxury — and not for body copy.A specular highlight sweeping diagonally across a line of text.
udaysinh