Motion & animation kit
The authoritative reference for how motion behaves on Agent Fieldbook. Every primitive named for the physical behaviour it mimics; every demo live so you can feel it before it lands on the site.
Nothing should feel digitally generated. Everything should feel physically documented.
Every primitive answers the question: if this website existed as a real object in Leonardo da Vinci's workshop or the Royal Society archives, what would it look and feel like?
Named for the physical behaviour, not the speed
A duration called fast is a decision waiting to happen. --m-drawer: 640ms is the memory of pulling out a wooden drawer.
All primitives collapse to instant end-states under prefers-reduced-motion: reduce. Try it in your OS settings, every demo below still works, just without the motion.
Hover, click, focus, feel each one
Every animation on the site pulls from one of these eleven. Naming is the contract.
Hover on cards. 2px translate + shadow deepen. Never glow.
Hover on any text-first link. Ink alpha .55 → 1.0. No colour shift.
Hover on inline links. Underline draws in from the left, sepia stroke.
Hover on nav rows. A hand-drawn tick appears at the right.
Precedes a section unmount. Slight overshoot, ink-red, rotates -8°.
The menu. Unfolds from the left edge with paper inertia, not slides in.
Section transitions. Outgoing drifts left + blurs; incoming fades in from the right 40ms later.
The reasoning core is the forced-tool-use brain that plans, classifies and dispatches.
A handwritten note settles beside the content: opacity + blur → sharp.
Every ~4s in demo (40s on the real site). A construction line, compass tick or smudge appears.
The parchment is being drawn ON, not moving. Discoverable, not distracting.
What an agent is made of
Every production agent resolves to the same body plan, a reasoning core, memory, transports, effectors, and a governance perimeter.
The chapter-to-chapter set-piece. A diagonal graphite eraser sweeps across; a faint sepia smudge trails the edge; the next chapter fades in mid-erase so the two overlap. 720ms, deliberate, ceremonial. Not for every click.
Focus the input. The insertion caret is a pencil tip, not a bar.
The parchment responds.
Move across this space. The pen tip follows your hand; a graphite trail settles behind and fades.
Pass over an interactive element, the tip tilts a touch and the ink deepens. Same graphite-darken primitive from row 02, applied to the cursor itself.
A link, for hoverCompass-marker pointer + calligraphic graphite trail + ink drops that soak into the parchment. Drops are spot-shaped (not perfect circles), spawn at uneven intervals along the trail, and fully flush after ~1.4s of no activity. Auto-disables on touch; under prefers-reduced-motion the marker stays but trail + drops are off.
The set-pieces
Where multiple primitives compose into a moment.
Compose of drawer-slide + staggered paper-lift per sheet. 640ms drawer + 80ms cascade per sheet. Deliberate, archival.
The active-section navigation. Book · Chapter · Entry, atlas hierarchy, not a highlight bar.
Results are index cards, sepia edge, mono ID, book/chapter locator. Not rounded pills.
Recipes, not a redesign
One primitive at a time, one surface at a time. So we can compare.
paper-lift on hover. No border-radius bump, no glow.underline-draw. Colour shift dropped in favour of the stroke.pencil-tick + graphite-darken. Selected state = graphite highlight, not dark rounded rect.drawer-slide. Left edge stays anchored.page-turn. Softer, faster, for changes within the current chapter.filed-stamp on outgoing, then page-erase. The set-piece, used sparingly on the big moves.marginalia-appear for the observer notes ("OBS · 2026, first deployment").caret-pencil. Results as index cards.ambient-mark. Every 40s. Nothing constant.Nothing in the list above ships until you pick the first surface. Recommended order: 1 cards (fastest visible win) → 2 sidebar drawer + pencil-tick (biggest personality change) → 3 section transitions → 4 ambient marks → 5 full specimen cabinet.
Ten physical primitives, three flagship interactions, one principle
This is the motion reference for Agent Fieldbook. Every animation on the site draws from the primitives below, each named for the physical behaviour it mimics, paper settling, graphite darkening, a filing drawer opening, and tuned so nothing glows, snaps or springs the way default web UI does.
Show more
The kit is authoritative. When a primitive is applied to a real surface (a card hover, a section transition, a search caret), the CSS is pulled from here so the whole site moves as one physical object rather than a collection of independently-tweened components. Reduced-motion respectors are baked into every primitive, the kit itself demonstrates what the site looks like with motion disabled.
Why physical metaphors rather than "fast / slow"?
A duration named `fast` is a decision waiting to happen; a duration named `--m-drawer: 640ms` is the memory of pulling out a wooden drawer. The token itself carries the design principle. Anyone opening a component and reaching for `--m-drawer` immediately knows the surface should feel like a drawer, not a modal.
Why never glow?
Glow is a display metaphor. Ink, graphite and paper do not glow, they get darker where you pressed the pencil harder, or a shadow deepens beneath a lifted sheet. Every hover state on the site should read as an increase in graphite density or a paper-lift shadow, never as emitted light.
What about accessibility?
Every primitive is wrapped in `@media (prefers-reduced-motion: reduce)` and collapses to a static, instantly-applied end state. The Filed stamp still appears (as static ink); the drawer opens (as an instant reveal); the marginalia appears (without the blur-to-sharp settle). The information is preserved; only the motion is removed.
Why 40 seconds between ambient marks?
Motion in the background must be discoverable, not distracting. At 40s the user has moved on to reading; a tiny construction line appearing at low opacity registers peripherally, as if the paper is being drawn ON rather than moving. Anything more frequent competes with the content.
When does a primitive get promoted to the live site?
When a specific surface is redesigned to use it. The kit stays authoritative; a rollout pulls one primitive at a time, in the redesign of one surface at a time, so we can compare the physical feel of the changed surface against the unchanged rest of the site before continuing.