Every site re-invented its reveals, and none of them matched.
The studio ships several sites a year. Each one wrote its own entrance, counter, hover and page transition, with its own numbers, and the result was five motion dialects that all felt slightly off next to each other.
The fix is one motion system, published as a registry any site installs with one command. The brand comes from the site's own CSS variables; the registry never knows the brand.
Installed into this page, from the registry.
What is running beside this text is not a recording. Each primitive was installed into this site from the registry's own JSON, the same files any site gets from `npx shadcn add`, and it runs here with the real runtime. Switch the brand and watch nothing break: the system only ever reads the host's variables.
Seven primitives and five effects. Reveal, stagger and text reveal are entrances; counter, magnetic and presence respond to you; parallax is scroll-linked and capped. The effects are the ambient layer a brand may or may not allow, which is why they are a separate shelf.
One file holds every number.
- Durations
- 100 · 150 · 200 · 300 · 500 · 800 ms
- Easings
- standard · enter · exit · emphasized
- Spring
- press: 500 / 30, small elements only
- Travel
- 8 · 16 · 24 px, 24 is the ceiling
- Stagger
- 40 · 60 ms
- Verify
- fails on any time literal outside tokens
Six durations, four easings, one spring, three travel distances, two stagger gaps. They live in a single tokens file, mirrored in CSS, and the registry's verify step fails on a time literal anywhere else. A value not in the table is a stop-and-ask, not an addition.
Every primitive moves transform and opacity only, ships a server-rendered resting pose, and falls back to a crossfade when the OS asks for less motion. This site runs a CSS port of the same tokens; the lab above loads the real runtime, and only here.
Twenty items on the shelf. Sites installing, not copying.
- Registry
- 20 items at /r/*.json
- Primitives
- 7
- Effects
- 6 · 2 on the GPU
- Sections
- 4
- Ships
- 77 since Sep 14
Seven primitives, six effects including two GPU shaders, four sections. Each is a registry item with its own URL, so a site adds one line and gets the file, the dependency and the tokens. Results Roofing migrates first; every later upgrade on this board applies the same toolkit.
Ship count below is live.
One library.
Two motion libraries in one site is how motion gets slow. The portfolio you are reading dropped its runtime entirely and kept the tokens in CSS; the one page that needs the runtime loads it alone. That split, system in one place and numbers in one file, is the whole lesson.
- Registry route per primitive
- Hero recipe settles under 1.2s
- Migrate results-roofing-www first
The question · The hero recipe: nav, eyebrow, headline, body, media, each on a sequence token.