Animations that survive a real build
Style guides tell you what a page should look like. They rarely tell you what it should do. Each entry below pairs a live demo with a prompt precise enough that a model produces the effect on the first attempt — including the details that get dropped, like descender clipping or how far a magnetic button is allowed to travel.
Scroll Reveal
Elements fade in and rise as they enter the viewport, driven by CSS alone — no scroll listener, no library.
02Magnetic Button
A button that leans toward the cursor as it approaches, then springs back when you leave. Under 20 lines of JavaScript.
03Text Mask Reveal
An oversized headline slides up from behind a hard edge, line by line, with a staggered delay.
04Sticky Scroll Story
A panel stays pinned while the copy advances beside it — the standard structure for brand storytelling.
05Aurora Background
Soft blurred colour fields drift behind the content, slow enough to read as atmosphere rather than motion.
06Card Spotlight
A soft highlight tracks the pointer across a card surface, revealing a border glow at the same position.
Nothing in this category yet.
Why prompts, not snippets
A copied CSS snippet solves today's problem and nothing else — it does not survive a redesign, a different framework, or a model that decides to rewrite your markup. A prompt that states the mechanism, the constraints and the failure mode transfers. That is why every entry here leads with the prompt and treats the code as evidence that it works.
The four things every prompt on this page specifies, and which most prompts leave out:
- The trigger — load, scroll position, pointer position, or a state change. Ambiguity here is why an AI gives you a hover effect when you wanted a scroll one.
- The property budget — transform and opacity only. The moment a model animates
toporheight, the effect drops off the compositor and stutters. - The fallback — what happens in a browser or a preference setting that cannot run it.
- The ceiling — a number. Strength, duration, displacement. Without one, models overshoot, because "noticeable" is not a measurement.