Page load and app entry
The mark’s three bars draw in over an off-white and ink split, hold, then the frame wipes away. 1.5s.
Motion
Durations
--duration-instant120msPress, colour, focus, menu exit--duration-fast160msHover borders, chevrons, toggles, tooltips, link nudge--duration-base240msMenus, popovers, toasts, status lines--duration-slow360msRefresh frame out--duration-slower420msBlock shapes, demo cards, stepper track--duration-dialog140msDialogs, alert dialogs, sheets, drawers and menus in--duration-dialog-exit80msDialogs, alert dialogs, sheets, drawers and menus out--duration-hold1100msRefresh frame holds before clearing--duration-stagger45msBetween blocks, list items, status lines--duration-rest300msHover rest before a tooltip shows--duration-reduced140msOpacity-only feedback when reduced motion is requestedCurves
--ease-standardcubic-bezier(0.2, 0.7, 0.2, 1)Things arriving: surfaces, sheets, lifts--ease-exitcubic-bezier(0.4, 0, 1, 1)Things leaving--ease-movecubic-bezier(0.45, 0, 0.55, 1)The mark and loops--ease-step-snapsteps(2, end)Rotations, binary flips, tooltips--ease-step-8bitsteps(6, end)Blocks, sprites, wipes, status lines--ease-step-wipesteps(4, end)Menus, popovers and toasts opening from their edgeRecipes
| Element | Enter | Exit |
|---|---|---|
| Hover fill | Cells fill in random order over about 140ms, content colour flips at 70ms | Reverse |
| Shard fill | Uneven blocks, packed like the glitch, land on 6 stepped frames of --duration-stagger; the ink flips once most have landed, when the host asks for it (Card's hover, the Trusted by cells) | Reverse |
| Toast hover | Lift 2px, deeper shadow, --duration-fast --ease-standard | Reverse |
| Footer link | Block dot scales in (--ease-step-snap), label shifts 14px (--duration-fast) | Reverse |
| Menu, popover, hover card | Wipe from the anchor edge plus 4px, --duration-dialog --ease-step-wipe | Fade, --duration-dialog-exit steps(2) |
| Tooltip | After --duration-rest, --duration-fast --ease-step-snap | Same, no delay |
| Chat toast | Wipe up, --duration-base --ease-step-wipe; stack 12px and 6% per card | Breaks into blocks, 7 steps of --duration-stagger |
| Sheet, drawer, mobile menu | Slide from the edge, --duration-dialog --ease-step-8bit | --duration-dialog-exit |
| Dialog, alert dialog | Step up 8px, --duration-dialog --ease-step-8bit | --duration-dialog-exit |
| Status line | Wipe left to right, --duration-base --ease-step-8bit, lines spaced by the script | None |
| Demo card | Wipe down after 2 × --duration-slower, then --duration-slower --ease-step-8bit; stays once shown | None |
| Composition blocks | Each shape --duration-slower --ease-step-8bit, --duration-stagger between | None |
| Refresh frame | Bars --duration-slower, staggered; hold --duration-hold | Wipe out --duration-slow --ease-step-8bit |
| Mark | Listening 2.8s and Talking 1.1s snap between held positions (steps); Thinking 2.2s steps(7) | Loops |
Reduced motion: every enter shows its final state at once, loops stop, and demos render their last frame.
Loops
| Loop | Cycle | Frames |
|---|---|---|
| Mark: Listening | 2.4s | steps(4), rows offset by 110ms |
| Mark: Talking | 1.2s | steps(3), rows offset by 70ms |
| Mark: Thinking | 2.2s | steps(7), rows offset by 80ms |
| Spinner and orbit loaders | 0.96s | 8 cells lit in turn |
| Status dot: answering | 1.2s | hard blink |
| Text caret | 1s | hard blink |
| Animated icons (send, verify, seal) | 1.2 to 1.8s | hard frames |
| Product and step timers | 6 to 8s per row | linear fill, pauses out of view |
| Live payments ticker | 7.2s | steps(24) |
The identity’s own renders of the mark’s states, its loop and the lockup are on Brand motion.
Moments
Hover and press
Cells fill the whole element over about 140ms; content colour flips at 70ms. Reverses on leave.
Compositions on scroll
Blocks appear in random order when the composition enters the viewport. Once.
Loading
Orbit
Inline and in buttons.
Scatter
Sections and panels. Blocks fill at random, then clear.
Assemble
Media, video, builder stories.
Mark: Thinking
AI work only.
Stepped progress
Determinate: uploads, setup.
Marching blocks
Indeterminate, top of a panel.
Block skeleton
Content placeholders.
Summarizing
Block cursor
Streaming text.