Website animation effects, with the prompt for each

A website animation effect is a named motion with four numbers behind it: how far something travels, how long it takes, the curve it follows and the delay between siblings. Twelve effects cover most of what people mean by an animated website, from letters that shred and climb back to a character whose eyes follow your cursor, and each one below comes with those values and the line a prompt needs to build it.

They are grouped into text, entrance, pointer and ambient effects, and each names its trigger. Scroll-driven effects have their own gallery in scroll animation website examples, and depth effects have the parallax examples. The method of four numbers and one curve per page is in the motion design guide; this page is the catalog of effects that method produces.

The examples come from designs in the Thanor library. Each prompt line below was written for this page as an illustration, short enough to paste into a larger prompt; the full design prompts are much longer and cover the palette, the type and every section as well.

The curves behind every effect#

Six curves and one step function do almost all of the work in the effects below. Pick the entrance curve once per page and reuse it, because a page with one curve reads as designed and a page with five reads as assembled.

The trigger is the other half. A load effect runs once when the page is ready, and ready should mean the fonts and the hero images have arrived, which is the subject of the loading animation guide. An entry effect runs once when an element enters the viewport. A pointer effect follows the cursor and needs a touch fallback. A clock effect loops, and needs a pause control and a still state.

Text animation effects#

1. A masked line reveal#

Each line of a headline sits in a box with overflow: clip and rises from translateY(105%) to 0 over 680ms on the quint out curve, 80ms apart. The extra 5% keeps descenders hidden before the move, a detail the animated website guide explains. It is the safest text effect there is, because nothing changes layout.

Headline: each line masked with overflow: clip, rising from
translateY(105%) to 0 over 680ms on cubic-bezier(0.22, 1, 0.36, 1),
80ms between lines, once, after the display face has loaded.

2. Letters that shred and climb back#

Brisk draws each letter of its giant wordmark seven times: once whole, and six times as horizontal bands cut by clip-path: inset(). The word appears whole and holds for 250ms. Then each band slides up out of its letter, translateY(-100%) over 620ms on the shred curve, with band delays of 0.13, 0.05, 0.19, 0.09, 0.23 and 0.15s plus 50ms per letter, so the word breaks unevenly from left to right. The letters then climb back from 110% below their boxes over 950ms on expo out, 65ms apart. The heading's aria-label is what a screen reader hears, once.

Wordmark entrance: each letter as six clip-path bands that slide up
out of it (620ms, cubic-bezier(0.55, 0, 0.35, 1), uneven band delays,
+50ms per letter), then the letter climbs back from 110% below
(950ms, cubic-bezier(0.16, 1, 0.3, 1), 65ms apart). aria-label on the
heading, pieces aria-hidden.

3. Letters that evaporate on scroll#

In Lacca, the two-line hero title leaves during the last fifth of a pinned scroll. Each letter is its own inline-block span and takes 40% of the exit, starting 0.046 of the exit after the one before, on a cubic ease-in (t³). As it goes it fades to zero, rises 0.28em and blurs to 0.125em. Scroll back and every letter re-forms in reverse, because the exit is a function of scroll position and has no clock of its own.

4. A blinking terminal caret#

Rookery ends its mascot's speech bubble with an ink block 0.55em wide and 1.05em tall that blinks with animation: blink 1.06s steps(1) infinite and @keyframes blink { 50% { opacity: 0 } }. That is 530ms on and 530ms off, a hard switch with no fade, which is what makes it read as a cursor rather than a pulse.

For per-letter work in a real project, GSAP's SplitText does the splitting. Its 3.13 rewrite added autoSplit, which re-splits when the fonts finish loading or the container width changes, and an aria: "auto" default that labels the parent and hides the pieces from screen readers (GSAP docs). Like the rest of GSAP, it is free.

Entrance effects#

5. A blur rise#

Tapioca brings in its hero once on load: the tag, three headline lines and the body with its button rise from 34px out of an 8px blur over 1000ms on expo out, at 0, 120, 200, 280 and 420ms. The picture blooms from a scale of 1.07 and zero opacity over 1800ms. The blur is what separates this from the stock fade-up: the copy comes into focus as it arrives.

Hero entrance, once: tag, headline lines and body rise 34px out of an
8px blur over 1000ms on cubic-bezier(0.16, 1, 0.3, 1), at 0, 120, 200,
280 and 420ms. The image blooms from scale 1.07 and opacity 0 over
1800ms. Nothing else on the page has an entrance.

6. An image that unclips#

A photograph waits clipped by 12% at the top and scaled to 1.08, then, when 30% of it is in view, unclips over 1200ms and settles to scale 1 over 1600ms, both on expo out. The two durations differ on purpose: the crop finishes first and the scale keeps settling, so the image seems to land rather than stop. These are the values on the workshop photographs in Ardente, with the code in the scroll examples.

7. An overshoot pop#

Brisk's four stickers bounce on over 660ms on cubic-bezier(0.3, 0.7, 0.4, 1), keyframed from scale 0.55 at their entry angle to 1.14 at 45%, already at their resting angle, then 0.97 at 72% and 1 at rest, fading in over the first 45%. They land at 330, 400, 600 and 730ms. An overshoot works once per page, on the most playful element; on a second element it starts to read as a theme.

Pointer effects#

8. The cursor picks the frame#

Vesperion holds a film of a small diver-suited creature paused, and your cursor decides which frame shows. The film is 5 seconds at 12 frames a second, every frame a keyframe, and each frame records the eyes at a different angle. On each pointer move the page takes the angle from the eyes to the cursor with atan2, ignores moves within 8px of the eyes where the angle is unstable, picks the nearest frame by circular distance and seeks to it, only when the gap exceeds 1/48s and no seek is in flight. At 700px and below the film simply loops.

9. A character that chases a target#

Pounce turns your cursor into a red laser dot, and a ginger kitten follows it with her whole head. Her head goes once round a 6-second loop at 60 degrees a second, so every angle is a moment of the film. The dot's direction picks a moment, and the film is scrubbed toward it the shorter way round with a critically damped follow: a 130ms time constant, capped at 276 degrees a second. One seek runs at a time, and only while the stage is in view. Judgy uses a simpler version, a head-turn film scrubbed by an eased angle of plus or minus 70 degrees across the window.

10. Pointer drift and tilt#

Tapioca's hero picture eases toward the side opposite the pointer, up to 9px across and 5px down, closing 1 - e^(-5·dt) of the gap each frame, about 8% at 60 frames a second. Until a mouse moves, and always on touch screens, it sways on two slow sines instead. Grumps turns its hero toy up to 3 degrees and 2 degrees toward the pointer in a 1400px perspective while the side figures drift the other way.

Ambient loops#

11. A marquee with no visible join#

The track holds identical copies of the phrase, ending with its separator and a trailing space, and moves from translateX(0) to translateX(-50%) on a linear curve forever. Onward runs four copies over 18s, and its prompt explains the number: faster and the words become unreadable, slower and the band stops reading as motion. Kairosveld runs two copies over 28s. Brisk's ticker moves exactly one cell every 10000ms, so the return to the start is invisible at any width. Any curve other than linear shows the join, as a stop and restart the eye finds at once.

12. A video loop in front of the type#

Kairosveld's portrait is a VP9 WebM with a real alpha channel: an 11-second loop of a woman turning her head, built as a palindrome with eased turnarounds so neither end jumps. The page only plays it, with her standing in front of her own headline, while the type behind her counter-drifts on a 19-second cycle. For loops that sit behind a hero instead, the animated backgrounds page has looping clips whose URL you can paste into Claude, Cursor, Lovable or Bolt, and the animated backgrounds guide covers keeping them light.

Every loop that starts by itself, lasts more than five seconds and sits beside other content needs a way to pause it under WCAG 2.2.2, a Level A criterion. Brisk ships one round button labeled "Pause the motion", and Tapioca one for its turning cup.

How to ask for an effect in a prompt#

An effect described by its name alone ("a smooth text reveal", "a cool hover") comes back as whatever the model has seen most often. Described by its numbers, it comes back as the effect. Each request needs six things.

1. The trigger: load, entry at a stated threshold, pointer, clock or scroll.
2. The four numbers: distance, duration in ms, the curve as a cubic-bezier() value, and the stagger.
3. What waits for what: the entrance starts when the display face and the hero image have decoded, with a cap such as 1200ms.
4. The refusals: what on the page does not move, written as a line of its own. A hotel brief keeps the rate figure still beyond a short cross fade.
5. The fallbacks: a sway on a clock for pointer effects on touch screens, and a pause control for loops.
6. The still state: under prefers-reduced-motion: reduce, every element in its final place and every loop stopped on a chosen frame.

Motion: one entrance curve, cubic-bezier(0.16, 1, 0.3, 1). Headline
lines rise 34px out of an 8px blur over 1000ms, 80ms apart, once the
display face has loaded (cap 1200ms). The hero image drifts away from
the pointer, at most 9px by 5px, closing 8% of the gap per frame; on
touch it sways on two sines. The marquee: two copies, translateX(0 to
-50%) over 28s, linear, with a pause button. Body copy, nav and footer
never move. Reduced motion: final states, marquee stopped.

Effects that make a page look generated#

• Everything fades up. Every section rising 20px at the framework's stock 150ms is the default, applied by nobody, and it is a large part of why AI websites look the same.
• Several entrance curves. One curve per page, plus at most one overshoot.
• Hover-only content. Put hover effects behind @media (hover: hover) and give touch screens the resting state at full contrast.
• Letters read one by one. A split heading without an aria-label on the parent and aria-hidden on the pieces is spelled out letter by letter by some screen readers.
• Splitting before the fonts load. Lines split against a fallback face break in the wrong places when the real face arrives. Split on document.fonts.ready, or use autoSplit.
• Loops running off screen. Tapioca's turning cup gets its video source only when it comes within 40% of a screen of the window and pauses whenever it leaves that range. Do the same with an IntersectionObserver.
• Jitter near the target. Pointer effects need a dead zone; Vesperion ignores moves within 8px of the eyes.

Start with one complete effect#

Twelve effects on one page is a demonstration; one or two, done completely, is a design. Choose the effect that belongs to the product (a cursor-driven character for a brand with a mascot, a shredding wordmark for a bold consumer launch, a blur rise for almost anything) and hold the rest of the page still. More interactive ideas, from dragging to turning objects, are collected in the interactive website examples, and the rest of the cluster is on the inspiration hub.

Open Vesperion and copy its prompt; it is free with an account. It is one effect specified to the last guard: the frame table, the dead zone, the seek rules, the mobile loop and the reduced motion frame, with the hosted film and matte the page uses. Paste it into Claude or Cursor and compare what comes back with what "make the eyes follow the cursor" produces. The paid designs, Brisk, Pounce and Tapioca among them, are on the pricing page, and the rest is in the library.