Eight ways type can move, and one place it may not.

register rule 7 · transform only, no layout animation

The workhorse. A line sits inside a frame with overflow: hidden and rises into it from below. Nothing animates height or margin, so the paragraph beneath never shifts: the frame is already the finished size before the word arrives. This is the entrance every other specimen is built from.

the decision on this page · both are legal, one becomes the default

The same hero, two treatments, playing together so the difference is visible rather than described. A staggers word by word at 45ms; B moves each line as one object. A reads as assembly and draws more attention; B reads as arrival and gets out of the way faster. Stagger is capped either way: ten words at 45ms is 450ms of entrance, and past that a reader is waiting on the page.

register rule 1 · the ring sits beside the Code, never on the control

A Code arriving on a share panel. The characters settle rather than assemble: a 6% scale and a fade, 34ms apart, then a single ring answers next to the seal once the last character lands. The restraint is deliberate and it is a brand rule, not taste. The Code is the wrapper, not the gift, so its arrival is an acknowledgement and never a fanfare. Where sharing is the subject the seal carries the weight of a name that matters, which is what this is: no confetti, no spin, one ring.

register rule 6 · scroll-driven over time-driven where someone is reading

On a page someone is reading, motion answers to the reader instead of a timer: it advances when they advance and rests when they rest. Scroll inside the frame below and the lines key to your position, backwards as well as forwards. This runs on CSS scroll timelines with no script and no observer, and where the browser has no support the lines simply rest finished, which is the correct frame anyway.

One word changes while the sentence around it holds still. The alternates are stacked in a clipped frame and the stack translates by exactly one line height, so the frame never resizes and the words on either side never reflow. The four here are the product’s own loop steps, so the mechanism is carrying real copy rather than lorem. Step it manually: this is a callout moment, not a carousel, and it never runs on its own.

register rule 3 · reduced motion gets the finished frame, never a blank

The specimen that is not a motion. Switch the page into its reduced-motion state and every piece above lands where it would have finished: present, opaque, in place. This is the failure the rule exists to catch, because the natural way to write an entrance leaves the element at opacity: 0 when the animation never runs, and the visitor who asked for less motion gets an empty page instead. Toggle it and scroll back up: nothing disappears.

register rule 5 · kept live so the rule has a face

A page header assembling itself word by word. It is competent motion and it is banned here, which is the distinction worth keeping visible: brand heroes may move, and the line that tells a reader where they are may not. It was tried on the source estate and pulled the same day.

register rules 1 and 4 · one loud piece, and nothing loud on the control

The pieces working together as a real section would use them: mask rise on the head, the supporting line following at 260ms, and a call to action that does not move at all. This is the whole budget for a page. If a section like this is on the page, everything else stays at whisper tier or waits to be asked.