Motion that earns its place

Four kinds of motion

Almost every animation on a website belongs to one of four families, and naming the family is the fastest way to get a builder to do the right thing.

• Entrances bring content onto the page: a section fading up as you scroll to it, a headline revealing line by line.
• Feedback answers an action: a button pressing, a toggle sliding, a copied-state check.
• Loops create ambience: a gradient drifting, a status dot pulsing, a marquee of logos.
• Scroll-linked motion ties progress to the scrollbar: a pinned sequence, a progress line, parallax.

When you write a prompt, sort each animation into a family. Entrances and feedback are almost always welcome. Loops need a reason. Scroll-linked motion needs a very good reason and a fallback.

One curve, few durations

The single most effective instruction you can give is to constrain timing. Choose one easing curve for the whole site — we use cubic-bezier(0.22, 1, 0.36, 1), a fast-out, slow-in curve that feels physical without bouncing — and three durations:

• 150–250ms for feedback,
• 400–700ms for entrances,
• 8–30 seconds for ambient loops.

A page whose animations share one curve reads as designed. A page with five curves reads as assembled. Builders will happily use five unless told otherwise.

Entrances

The default entrance is opacity 0 → 1 with a 12–16px upward translate. It is boring, and that is the point: it directs attention without demanding it. Stagger siblings by 60–90ms so lists feel alive rather than mechanical, and only ever run an entrance once — content that re-animates every time you scroll past it is exhausting.

Reserve the expensive entrances for one moment per page. A clip-path line reveal on the hero headline, a chart that draws itself, a card that settles from a slight scale. If everything is special, nothing is.

Describe the trigger precisely. "When 40% of the section is visible" is something a builder can implement with an IntersectionObserver. "When the user gets to it" is not.

Feedback

Feedback motion is small, fast and honest. A button darkens on hover in 150ms and scales to 0.98 on press. A toggle's thumb slides with a light spring. A copy button swaps its icon for a check for 1.2 seconds and then swaps back.

Two rules keep feedback from going wrong. First, never delay the actual action to show the animation — the copy happens immediately; the check is decoration. Second, feedback must have a keyboard-visible equivalent. If hovering reveals an action, focusing must reveal it too.

Loops and ambience

Loops are where taste shows. A slow gradient drift behind a hero can make a page feel alive; the same drift behind body text makes it unreadable. The library's rule is that loops live in the background layer, run slowly (nothing under eight seconds), pause on hover when they contain content (marquees), and stop entirely under prefers-reduced-motion.

Animated backgrounds in this library are written as plain CSS — gradients and keyframes with no scripts — for a reason: they cost almost nothing and they degrade cleanly. When you reference one in a prompt, quote the CSS declaration list directly rather than describing it.

Writing it down

A motion section in a prompt should read like a spec, not a mood. Here is the pattern we use:

Motion should be felt, not noticed. One easing curve site-wide, cubic-bezier(0.22, 1, 0.36, 1); feedback 150–250ms, entrances 400–700ms. Specifically: hero headline lines wipe in with a clip-path inset, 700ms, staggered 120ms; feature charts draw with stroke-dashoffset when 40% visible; the status dot pulses on a two-second loop; nothing else loops. Under prefers-reduced-motion, entrances are instant and loops stop.

Notice the shape: a principle, the constraints, the specific list, the reduced-motion clause. Builders handle that shape extremely well. Vague enthusiasm ("smooth, delightful micro-interactions") they handle by adding a bouncing button to everything.

Next: scroll-driven sections, the one family that needs care.