--- title: "Motion & animation kit · Agent Fieldbook design reference" url: https://agentfieldbook.org/style/motion/ description: "Motion reference for Agent Fieldbook. Ten physical primitives, paper-lift, graphite-darken, filed-stamp, drawer-slide, marginalia-appear, each with a live demo, tuned so nothing glows, snaps or springs." section: "Design reference · Motion" source: Agent Fieldbook — generated from the published page --- # 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. ## One principle 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? ## Tokens · duration & easing ## 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. ## Twelve primitives · live ## 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. ## Chapter I · Anatomy ### 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. 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. Compass-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. ## Three flagship interactions ## 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. ## Rollout · what applies where ## Recipes, not a redesign One primitive at a time, one surface at a time. So we can compare. 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. ## Field notes 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. 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. - [Brandon Chaplin](https://www.linkedin.com/in/brandon-chaplin-digital-marketing-strategist) ## Common questions ### 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. ## Next in the learning path - [Home · specimen See the current motion baseline](https://agentfieldbook.org/) - [Catalogue The busiest hover surface on the site](https://agentfieldbook.org/catalog/all/) - [Provenance Where marginalia will land first](https://agentfieldbook.org/provenance/)