K06 — MOTION & PHYSICS

Motion with mass.

Things move like they weigh something: mass, inertia, damping. Cinematic in storytelling, instant in utility. Native scroll only, transform and opacity only, and everything can be paused.

10⁰ — Tokens

Durations and easings

--dur-1 · 150ms

Hover, focus, toggles

--dur-2 · 250ms

Menus, tooltips, chips

--dur-3 · 400ms

Overlays, envelopes

--dur-4 · 700ms

Section reveals

--dur-5 · 1200ms

Count-ups, cinematic

Inertia--ease-inertia

cubic-bezier(.16,1,.3,1)

Heavy, long settle. Envelopes, magnetic return, reveals.

Field--ease-field

cubic-bezier(.65,0,.35,1)

Smooth in-out. Morphs, count-ups, line draws.

Spring · firmspring(1, 400, 38)

cubic-bezier(.34,1.3,.64,1)

Mass 1, stiffness 400, damping 38. Toggles, chips.

Utilityease-out 150

cubic-bezier(.2,0,0,1)

Forms, portal, product UI. Instant feel.

10¹ — Catalog

Scroll-trigger catalog, live

01 · Field-line morph

Torus → wafer → joint. Scroll-scrubbed in heroes; auto here. Stage: torus

10⁻¹ m — The wafer

02 · Powers-of-ten zoom

Force

03 · Variable-font width shift

Move the pointer across: wdth tracks proximity, 75–125.

ION TEMPERATURE · TARGET 2029 0 K

04 · Telemetry count-up

Once, 1200 ms, ease-field.

05 · Line-draw schematic

stroke-dashoffset, once on enter.

06 · Staggered reveal

60 ms stagger, max 6 items.

Mar 2026 · 20.1 T demonstrated

07 · Milestone timeline scrub

Book a pilot →

08 · Magnetic button

Attraction 0.22 × distance within 0.8 × size + 40 px; returns with inertia.

Also in the catalog, shown on demo pages: scroll-scrubbed exploded 3D view (D02, D04) · sticky split-screen storytelling (D09).

10² — Budget

Motion budget by intent

MARKETING Cinematic Field-line heroes, scroll morphs, count-ups, exploded views. up to 1200 ms · 1 canvas / page

UTILITY · FORMS, RESOURCES Calm Fades and envelope expansion only. No scroll effects. 150–400 ms

PRODUCT · PORTAL Strictly functional State changes only: loading, live updates, toasts. ≤ 250 ms · no decoration

Native scroll

No scroll-jacking. Scrub effects read scroll position; they never set it.

Transform + opacity

Nothing else animates. Width shifts use font-stretch on text only.

Reduced motion

prefers-reduced-motion → static posters, instant state changes, no count-ups.

Pause over 5 s

Anything running longer than 5 s has a visible pause control (WCAG 2.2.2).