← Design foundations The animation kitchen sink
Make the idea move. Sometimes an arrow does more than another paragraph. A collection of small visual stories
for the things we teach: how objects connect, where values go, and what changes next.
18 working studies 12–20 second loops One idea at a time
Information flow / Competing timelines
The last response can be wrong. Type rea, then react. Unconditional writes. Input: empty. Results: waiting. Visible results Waiting for a response… 01 / WRITE EVERY RESPONSE #1 rea #2 react request lifetime → Search input: … 01/ 06 Send Type rea, then react. The earlier request takes longer to finish.
Reduced motion: choose a scene to see its completed state.
Read this scene The earlier request takes longer to finish.
Unconditional writes. Input: empty. Results: waiting.
Track which request belongs to the current input. Finishing last does not make a response current. What the motion makes clear Track which request belongs to the current input. Finishing last does not make a response current.
Gallery study Choose a visual language
Different ideas need different motion. 18
studies across four areas
A cart notifying its subscribed views Only the badge gets 2. Cart quantity: 2. Badge: 2. Panel: closed; last seen 1. Active subscriptions: 1. SUBJECT · OWNS THE VALUE OBSERVERS · OWN THEIR VIEWS callback(quantity) unsubscribed cart.ts STATE quantity 2 SUBSCRIBER LIST ● 01 · Header badge Panel removed Header badge Your cart 2 ● Listening Cart panel Panel closed Last seen: 1 item No active subscription Patterns 20s
One change. Many listeners. Follow registration, notification, and the connection that ends when a view closes.
Use the behavior. Email branch selected. Instance created. send() called. Caller channel: email createNotifier() Email branch EmailNotifier send() called ✓ REQUEST CONSTRUCTION SHARED CONTRACT The caller uses send(); the construction branch stays in the factory. Patterns 12s
A request becomes an object. Keep a construction decision in one place, then return something the caller can use.
An editor with a Past stack and a Future stack Undo is available. Redo is empty.
Undo returns to v2. The old v3 branch is gone. Current heading: Hello, new world.. Every card shows a complete saved text
version. Past Undo takes the top Future Redo takes the top Nothing to redo v3 was cleared by the edit heading.txt v4 YOUR HEADING Hello, new world. Saved version · v4 Undo Redo Commit a new edit v1 Hello. v2 TOP · NEXT OUT Hello, world. Data structures 20s
Undo has a memory. Save the version you leave, restore an earlier one, and clear a branch after a new edit.
The chain is A → B → C. A.next = B; B.next = C; C.next = null. B.next A.next A next → B C next → null B next → C HEAD A → B → C Data structures 14s
Insert without losing the rest. Add B between A and C by changing two links in an order you can follow.
Visit D, E, then F. Visited: A, B, C, D, E, F. Queue front to back: empty. A 1 B 2 C 3 D 4 E 5 F 6 Empty QUEUE · FRONT → BACK Data structures 16s
Visit the nearest layer first. Watch the frontier queue explain why breadth-first search visits level by level.
Only the copy turns plum. original and alias point to object #1, theme green. copy points to object #2, theme plum. original reference → #1 alias reference → #1 Object #1 theme: green copy reference → #2 Object #2 theme: plum NAMES OBJECT IDENTITIES Memory 16s
Two names. One object. See the difference between another reference and a new, independent flat object.
Now append E. Original buffer: A B C D. New buffer: allocated. Copied: 4. E appended. A B C D A B C D E · · · OLD BUFFER · RETIRED NEW BUFFER · CAPACITY 8 Copied 4 / 4 · then wrote E Memory 16s
One append. A bigger move. Fill four slots, allocate eight, copy the old values, then append E.
A finishes; B starts. Worker: B. Waiting: C, D. E: rejected. Completed: A. Producer — Worker B · D C BACK FRONT 2 / 3 waiting E → try again later Completed: A Information flow 16s
When work arrives too quickly. A burst fills a bounded queue. The next arrival needs an explicit answer.
Same tool, another job. Focus: BFS. Connections describe uses, not prerequisites. supports can use waits in powers Stack Recent history Undo Restore a state Command Represent work Queue Wait in order BFS Visit in layers Uses and relationships, not a list of prerequisites. Information flow 15s
Follow an idea into another. Explore the connections from a stack to Undo, commands, queues, and graph search.
Ignore the stale response. Latest-request guard. Input: react. Results: react. Old response ignored. Visible results Matches for “react” 02 / ACCEPT ONLY THE LATEST #1 rea ignored #2 react accepted request lifetime → Search input: react #1 ≠ latest #2 · leave UI alone Information flow 18s
The last response can be wrong. Two searches finish out of order. Replay the same race with a latest-request check.
The server accepts the file. Upload state: Success. Attempt 2. Progress 100 percent. start failed accepted retry Idle ○ inactive Uploading ○ inactive Error ○ inactive Success ● current state ATTEMPT 2 / upload avatar.png Information flow 16s
An upload has allowed moves. Follow a failed upload through an explicit retry and a successful second attempt.
No root reaches the panel now. Panel closed. Subscription removed. Panel data unreachable, eligible for collection. captures Store listener registry Mounted view reference gone Listener captures panel Panel data no root path ROOTS · long-lived application removed Eligible for GC · collection time unknown Memory 16s
Closed does not mean unreachable. A subscription keeps a closed panel alive. Follow the root path before and after cleanup.
The total becomes $55. Price $25; quantity 2; subtotal $50; fixed fee $5; total $55; theme blue, unchanged. Updated: price, subtotal, total. Unit price $25 Quantity 2 Subtotal $50 Fixed fee $5 Total $55 Theme blue CHANGE ONE INPUT · follow its dependents No dependency path Information flow 16s
Update only what depends on it. Change a cart price, recompute its totals, and leave an unrelated theme alone.
A waiting click can finally run. Main thread phase: input. DOM label: Saved. Painted label: Saved. DOM label Saved Painted label Saved ONE MAIN THREAD · schematic time → JavaScript task Promise callback Rendering chance Waiting click Information flow 16s
A changed DOM still waits to paint. Separate running JavaScript, queued callbacks, and a browser rendering opportunity.
The heap rule holds again. Heap array: 1, 8, 3, 14, 10, 9, 5. No swap in progress. MIN-HEAP · one array, two views 0 i=0 1 i=1 2 i=2 3 i=3 4 i=4 5 i=5 6 i=6 1 1 8 8 3 3 14 14 10 10 9 9 5 5 Data structures 18s
One heap. Two ways to see it. Insert 1 and watch the same swaps happen in the tree and its array representation.
Four reads. One transfer versus four. 4 values read. Packed layout: 1 cache-line transfers. Scattered layout: 4 transfers. Modeled counts, not timings. A B C D LOGICAL READ ORDER Packed Scattered A · · · B · · · C · · · D · · · A B C D one cache line 1 line transfer 4 line transfers Memory 16s
Read a value. Bring its neighbors. Zoom from four logical values into packed and scattered cache-line layouts.
Restore 1 and explain the failure. Rejected scenario. UI quantity 1; server quantity 1. Rolled back with an error. Your cart 1 Server cart 1 Could not update. Try again. 02 / SERVER REJECTS quantity quantity Restore confirmed value Information flow 18s
The UI can act before the answer. Try the same optimistic cart increment with an accepted response and a rejected one.
Two attempts need not mean two orders. 2 attempts. Without deduplication: 2 orders (41, 42). With key K7: 1 orders (41). Reply received. POST /orders Order #41 Order #42 Order #41 ONE PURCHASE · 2 request attempts No deduplication Same key: K7 K7 → #41 2 orders created 1 order created Patterns 20s
A retry should not buy it twice. Send the same order twice after a lost reply. Compare two server policies.
A shared visual vocabulary Same blue family. Same quiet frame. Different ways to make the important change visible.
These studies are a starting point for lesson animations; the story should decide which one
fits.
Explore the diagram & chart foundations ↗