Kaki catalogue
Kaki / かき / a curated gallery by Shojum
Curations arrive as one long working sheet: a reason to look, a reconstruction to study, and an honest note about where the work came from.
Start at the top22 records / each one earns its place
featured study / fictional Kaki editorial
Kept for its calm handling of time, route, and state after dark.
case study / CatsJuice / @cats_juice
The peel is more than decoration: curl, stiffness, wind, light, shadow, and sound make a small creative tool feel physical without hiding its controls.
annotated study / X Money / X
The interaction is quiet but precise: the wordmark remains readable at rest, then a soft cursor-sized field turns passive linework into a moment of local depth and emphasis.
annotated study / xAI
Two restrained motions make dense infrastructure data easier to scan: figures roll only when they enter view, while one horizontal gesture reveals the chronology without expanding the page.
annotated study / xAI
The timeline compresses a long institutional history into one calm line: every dot remains lightweight, while the selected event receives enough room to become readable and linkable.
annotated study / Cursor / Anysphere
The mark rests after the label rather than in a column of its own, so unequal section names turn a vertical change of state into a diagonal move. It is the smallest gesture in the collection and the one that most clearly rewards being watched.
annotated study / Cursor / Anysphere
The chart earns its motion twice: breaking one stacked bar onto separate rows makes a lopsided split readable, and tying each bar's duration to its own length keeps a long bar from feeling slow while the number inside it stays honest to the width.
case study / Cursor / Anysphere
It reads as decoration and is engineered like a product: a fixed seed so the composition is authored rather than random, a walk that can only drift one row at a time so every trail looks like a route, and a loop that is not scheduled at all when nobody is looking at it.
annotated study / Cursor / Anysphere
Two decisions carry it. Reversing the value axis means the desirable corner is the upper right on every metric, so switching tabs never asks the reader to re-learn the chart; and moving every element on one shared curve makes the switch read as the same data seen differently rather than as a different chart.
case study / Cursor / Anysphere
The globe is the least interesting thing about the globe. What carries it is the escalation: the same card serves as a one-word tooltip while the pointer passes and as a focusable dialog once something is chosen, growing its second row rather than swapping for a different component.
annotated study / Cursor / Anysphere
The most polished motion on the page is the one piece that was not written as motion at all. Treating the animated mark as a media asset rather than a drawing buys a level of finish no CSS timeline would reach, at the cost of three codec containers and a static fallback that has to look finished on its own.
annotated study / Cursor / Anysphere
The whole record turns on one conditional: the panel animates shut when nothing changes, and is cut instantly when the selection does. Motion that knows when to get out of the way is rarer than motion that is well timed.
annotated study / Cursor / Anysphere
The ramp is the joke and the method at once: thirteen characters ordered from lightest to densest, with the company name sitting in the middle of the scale where the mid-tones fall. A brand appears only where the image is half lit — which is why the record quotes the ramp rather than paraphrasing it, since a substitute ramp cannot demonstrate the idea.
annotated study / Cursor / Anysphere
Both mechanisms here refuse the obvious shortcut. The slider keeps a real input and hides it rather than rebuilding one from pointer events, so the keyboard and assistive layers come free. The figure hands the arithmetic of its own motion to the style engine, so script only ever announces which numeral is current.
annotated study / Cursor / Anysphere
The flip is the one to take away. Two faces and a list of any length, reconciled by advancing every slot while transitions are switched off — the same freeze-and-reset move this collection has now found in four separate places on the same site, which is what a house style actually looks like.
annotated study / xAI
The page separates two different pricing questions without making them compete. The tabs answer “which context am I buying for?” with a short card set; the matrix below answers “what changes between every tier?” and keeps that full comparison stable no matter which audience was selected above.
annotated study / xAI
The stack turns a passive hero image into a small, legible toy without adding visible carousel furniture. Its best detail is the split between manual and automatic movement: a throw leaves sideways with the hand, while the timer removes the top card with a quieter fade so unsolicited motion does not impersonate a gesture.
annotated study / X Corp.
The strip compresses thirty readings into less space than a sparkline, then gives one slice just enough scale and annotation to become inspectable. Green, amber, and red carry actual thresholds; the motion does not merely decorate the table.
annotated study / X Corp.
The field sells velocity through accumulation rather than speed. Long loops keep each row calm; different durations prevent the three seams from announcing themselves together; reversing the middle row creates useful cross-current while the masked edges let the cards enter and leave softly.
annotated study / X Corp.
The border earns attention because almost everything else stays still. The old card establishes a low-contrast baseline; the new card adds only a faint surface lift and one traveling highlight. Motion therefore reads as editorial preference rather than ambient decoration.
annotated study / X Corp.
The glow is present before interaction, so the button does not need to jump, pulse, or scale to announce itself. Hover merely tightens the emphasis. That restraint is the useful detail: luminance establishes priority while geometry and text remain completely stable.
annotated study / xAI
The divider is unusually direct because it changes only visibility, not layout. The source and restyle keep the same frame, clock, and crop, so the visitor reads transformation rather than two unrelated examples. The treatment rail then changes the right-hand answer without disturbing the question on the left.
After the roll
The Playground is the blank corner of the working paper: a small client-side studio for trying shape, color, and rhythm.
Click the note to edit / local only
Start makingCard pinned. Drag inward from a visible edge, or use the arrow keys.
Tap to print a different Kaki badge.
Drag all three pieces onto the stack area.