Foundations

Motion

Motion explains where something came from, confirms a tap, or celebrates something rare. While a round is live, only feedback moves.

How it works

Motion in Outword has one job: make the game feel alive without slowing anyone down. Five principles guide it:

Purpose first. Every move answers one question: where did that come from, did that work, or is this worth celebrating? A move that answers none of them gets cut.
Size it to the moment. Things that happen often stay small and quick. Only things that happen once get a story.
The round is sacred. While a clock is running, only feedback moves: tile state and the word pill. No ambient motion and no celebration on the board.
Physical, not magic. Things arrive from somewhere and leave to somewhere. Nothing pops out of nothing, and nothing stretches.
Calm by default. Motion settles and stops. Attention is asked for once per visit, then the screen holds still.

The vocabulary

Seven moves, named in 3.21 and built from what shipped then. New motion uses one of these before it invents anything.

Move	Duration · curve	Used for
feedback	70–80ms	tile state, button press. Feels instant; it only confirms
pop	240–300ms · `cubic-bezier(.3,1.4,.5,1)`	something small landing: the key's dot, the crown, a badge. Starts at ×0.4–0.9, never from zero
enter / move	500–700ms · `cubic-bezier(.2,.8,.2,1)`	pieces travelling, toasts, rows, captions
rise	700–820ms · `cubic-bezier(.22,1,.36,1)`	podium columns sliding up from a baseline mask, never stretched
exit / fall	520ms · `cubic-bezier(.5,0,.75,0)`	things leaving, the crown dropping
attention	900ms × 2	a ring grows from a dot to ×2.6 and fades; once per visit, then still
text	460ms a word, 60ms apart, from a 4px blur	kinetic captions in the update reel; the sub line follows 300ms later

The size of the move follows the moment map:

Moment	How big	Example
Positive · common	small and quick	copy turns into a check; "Saved"
Positive · rare	celebrate	the podium and crown, the update reel, welcome back
Negative · common	plain and fast	a wrong code turns the slots `--danger`, with no shake
Negative · rare	empathy over decoration	a fresh phone asks "Played before?"

Dark

Light

Pop, then attention, once the key on Home when your code isn't saved: the dot pops at 300ms, the ring grows twice from 560ms, then everything rests. It plays once as this example loads, as it does once per visit in the game. Press the buttons for the 70ms press.

Timings in the code

What ships today, read from the CSS and, for the moments driven from script, from app.jsx:

Timing	What moves	Code
70ms `ease`	a button shrinks to ×0.98 and dims to 94% brightness when pressed	`.primary:active` and ten more
80ms	a tile's fill, edge and opacity change together	`.tile`
90ms	a standings card presses as one piece (×0.99)	`.standing`
120ms	the word pill's fill, edge and colour fade in; leaving is instant	`.word-pill`
150ms	a chevron turns	`.chev`
160ms	the scrim fades in	`.scrim`
220ms `cubic-bezier(.22,1,.36,1)`	a bottom sheet rises	`.modal`
220ms, 320ms	a toast and the welcome card slide down 8px and fade in	`.rc-toast`, `.welcome-card`
240ms, after 300ms	the key's dot pops from ×0.4	`.attn-anim .key-dot`
250ms	a countdown digit settles from ×1.35	`.count-num.pop`
500ms `ease`	the light and dark cross-fade	`body, .tile, .tile-face, .field, .primary, .secondary, .pill, .card, main, section`
600ms	Compete card covers fade in	`.cc-cover`
900ms × 2, after 560ms	the key's ring grows to ×2.6 and fades	`.attn-anim .key-ring`
190ms a letter	your name traces across the name board	`NameGrid`
5700ms a cycle	the brand mark draws, holds, retracts and pauses	`BrandMark`, see Brand mark
640ms at 380 / 820 / 1260ms	podium columns grow, 3rd, 2nd, 1st	`MonthPodium`
440ms at 1900ms	the crown drops onto the 1st column	`MonthPodium`
4–6s	confetti falls from rest and clears itself	`ConfettiBurst`

Two timings in a round are holds, not animations: a trivia solve shows the green pill for 650ms before the next question, and a wrong answer shows the rose pill for 900ms.

During a live round

What that means on the board:

Moves: the tiles light as you trace, the word pill fades in when a word lands and vanishes the instant it goes, the caption changes, and the timer pill turns rose in the last 10 seconds.
Holds still: the brand mark rests on its hook (it only animates on Home), tiles never dip when pressed, and there's no ambient motion.
Waits: the help sheet isn't offered during play, and confetti for the day's best trivia run fires on the summary, after the clock stops.

The mode cross-fade

Switching between light and dark is a quiet 0.5s cross-fade: background, text, edge and shadow colours ease together on tiles, letters, fields, primary and secondary buttons, pills and cards. It isn't a moment and isn't celebrated. Under reduced motion it's instant.

The rules

Only feedback moves during a live round.
Never scale from zero. Pops start at ×0.4–0.9. Things fade and grow in; they don't appear from a point.
Grow with a mask, never a stretch. Anything with text, a radius or a border slides out of a clipping mask (translateY(101%) to 0). scaleY is banned on those, because it squashes corners and type.
Enter slow, leave fast. Entries decelerate and exits accelerate. An exit is never longer than the entry it undoes.
One move per area at a time. Groups stagger 40–60ms apart so the eye can follow.
Ask for attention once per visit (sessionStorage), then hold still. Only the brand mark loops, and only on menus.
Confetti is earned and clears itself (4–6s) before any button needs a tap.
Errors don't shake. Use colour plus plain words.
In a story, hold 3s after each caption before the next beat. Reading time is part of the motion.
Animate transform and opacity only. No width, height, top or box-shadow, so motion stays smooth on older phones.
Reduced motion is a full design, not an off switch.

Reduced motion

The CSS has 13 prefers-reduced-motion: reduce blocks, and the moments driven from script (the podium, the update reel, the brand mark, the confetti bursts) check the same setting before they start. The help sheet and the name board don't yet; see Known issues.

Move	Under reduced motion	In the code
feedback	unchanged, because colour isn't motion	tiles and the word pill change state instantly, without the fade; a pressed button dims to 90% and doesn't shrink
pop · enter · rise	the final frame, or a fade of 150ms or less where feedback is needed	sheets and the scrim open without animating; Compete covers and countdown digits appear in place
exit	removed instantly
attention	the dot, no ring	the key's dot shows; neither it nor the ring animates
confetti	none; the podium opens built, crown on	the confetti layer is hidden; the podium skips its build; the trivia and longest-word bursts never fire
update reel	opens on the recap close	every reel animation is cut to 1ms
brand mark	static on its resting hook	the trace never starts

The test: turn reduced motion on and walk the flow. If anything only came across through movement (where something went, what's new), the still version has a bug.

Why it's built this way

Known issues and gaps

From the 3.23.6 audit, plus what turned up while writing this page:

No motion tokens. The vocabulary names seven moves, but every timing is a raw value: the audit counts 31 distinct timings in milliseconds, durations and delays together, 23 of them in CSS the app still renders. Planned fix: --dur-feedback, --dur-pop, --dur-enter and --dur-exit plus named easings, then map every rule to them. (The 3.23.6 audit reported 36, because it read a leading-dot value like .5s as 5s and counted 0.5s and 500ms separately. Found while writing this page; the audit now counts in milliseconds.)
Highlights fade too slowly. The cross-fade rule comes later in the CSS than the tile's own transition and replaces it, so on the game board a tile lights over 0.5s instead of 0.08s (measured in Chromium; see Tile). The fix is to scope the cross-fade; planned for 3.23.7. Read from the same cascade, not yet checked on a phone: the rule also replaces the press transition on .primary and .secondary, so those two ease into a press but snap back on release; and .app, which paints the ground on a phone, isn't in the cross-fade list, so the ground itself switches modes instantly while what sits on it fades.
The podium predates the rules. The monthly podium shipped in 3.20; the rules came in 3.21. Its columns grow by animating height from 0 over 640ms, and the 1st column dips to scaleY(.95) when the crown lands, against rules 3 and 10. The masked rise the vocabulary describes only exists in the retired 3.21 reel's CSS (.wn-colmask, now unused).
Shipping values sit outside the vocabulary. The one-page reference calls feedback linear; the CSS uses the default ease. The word pill's 120ms is outside feedback's 70–80ms. The sheet (220ms) and toasts (220ms, 320ms) enter faster than enter's 500–700ms. The countdown digit settles from ×1.35, a move the vocabulary doesn't name.
Rule 10's list is broken twice. The cross-fade and the tappable longest-word pill (.lw-pill.tappable, 150ms) both animate box-shadow.
Two things ignore reduced motion, and one of them loops. The help sheet's demo cards replay their traces while a card is open (CAT, CARE, RACE, CATS, 300ms a letter), and neither the demos nor the help sheet's own transitions (the card swipe, its pill, its tiles) check the setting. The name board on Home traces your name letter by letter at 190ms a step whatever the setting. Under rule 6, only the brand mark should loop.
Only the mark loops, but only on Home. Rule 6 says "on menus"; the mark animates on Home and rests everywhere else, including results and leaderboards.

Tile: the feedback move, and the 0.5s bug in detail
Brand mark: the one loop in the system
Celebration: the podium, the crown and confetti
Update reel: the one place motion tells a story
Accessibility: reduced motion alongside contrast and targets

#How it works

#The vocabulary

#Timings in the code

#During a live round

#The mode cross-fade

#The rules

#Reduced motion

#Why it's built this way

#Known issues and gaps

#Related