Kyoto Lisbon Oslo Taipei Porto Kobe
Polaroid Wall
collectionsPhotos pinned to a wall, straightening as you focus them.
6–24 photos. Past that the scatter stops reading as deliberate.
Layout library
Ways to arrange many things, where the arrangement is the interaction. Every demo below is live — drag the stack, focus a photo, unpack the pile.
28 layouts
Photos pinned to a wall, straightening as you focus them.
6–24 photos. Past that the scatter stops reading as deliberate.
Motion
Surfaces
Light
Depth
Layout
Controls
One collection in two arrangements — a pile that unpacks into a grid.
3–12. A stack of more than a dozen cannot show what it contains.
Responsive columns for content of mixed heights, stable from first paint.
12–200+. The one layout here built for volume.
A gallery whose arrangement is a function of scroll — grid, ring and fanned deck, one continuous interpolation.
4–9 items. The ring and fan positions are legible in that range; more items crowd the deck.
Drag me sideways
Or use the buttons — they do the same thing.
Spring back
A hesitant drag returns the card to the deck.
Looping
Dismissed cards go to the back by default.
Sample deck
A stack whose top card can be thrown away — or advanced with a button.
3–20. Long decks need a list, not a stack.
A bento grid whose tiles expand in place, reflowing their neighbours.
4–9 tiles. A bento with twenty tiles is just a grid.
Curated studio deck: 1 of 4 selected
A compressed collection that separates into an inspectable layered deck with selection and residual-stack reflow.
3–7 cards. A fan of twelve is a mess in any hand.
A deterministic composition grid for mixed media, text blocks and deliberate whitespace.
4–14 items; use explicit spans to author the rhythm.
The room as instrument
Material / rhythm
Two coordinated media planes that change together with a cinematic but controlled handoff.
2–8 paired items.
1 / 4
A large media rail for project browsing with variable widths, snapping and optional scroll mapping.
3–18 items; keep each card legible.
4 items · gallery
01 / 04
02 / 04
03 / 04
04 / 04
One keyed collection visibly transforms between a media gallery and a practical list.
3–24 items.
A deliberately offset editorial grid with authored whitespace and predictable placement.
4–16 items.
A layered editorial composition keeps the headline readable while the image, annotation and quiet background occupy their own planes.
Typography, media and caption planes overlap with shallow depth while reading in a sensible order.
One composition per section.
Surface
Gathering
Trace
Multiple media columns drift at different scroll rates while remaining a normal collection on touch.
2–4 columns with 3–10 items each.
An authored editorial rhythm where featured work earns space and supporting pieces keep the composition breathing.
4–16 items; reserve featured treatment for one or two pieces.
Primary surface
01 / threshold
A continuous secondary rail that promotes one collection item into a readable primary surface.
3–8 items; a continuous rail should stay scannable.
Chapter one
The primary plane leads, then makes space for a quiet companion surface.
Two coordinated story planes redistribute their proportions as the active chapter changes.
2–7 chapters; each chapter needs a clear relationship between its two planes.
A multi-surface collection with exposed edges and a readable front plane, not a compressed card deck.
3–7 surfaces; the exposed edges should still identify every item.
Select a column to change the composition
Columns reallocate real grid width around the selected content while their neighbours remain present.
3–5 columns; more columns make the width change hard to read.
A stable collection composition that gives the focused tile more room and reorganises its neighbours without becoming an expansion panel.
4–14 tiles; keep the collection curated enough for neighbours to matter.
One shallow perspective plane gives a bento composition depth without independently tilting every cell.
4–12 cells.
Open plan
A conventional content grid mapped onto a shallow curved plane with restrained local depth.
4–20 items.
Open plan
A finite media sequence arranged along a shallow helix, never requiring users to navigate a 3D scene.
3–9 items.
Open plan
A finite ring of media that rotates by drag, wheel or controls and settles on a clear active item.
3–10 items.
1 / 4
Native scrolling moves through a stack of depth planes without trapping the page or hijacking the wheel.
3–12 items.
Open plan
A finite Z-axis collection that advances by explicit controls rather than an uncontrolled camera ride.
3–10 cards.
A familiar stack distributes into authored X/Y/Z planes while preserving each item identity.
3–12 items.
Drag or use the arrow keys to browse the spatial field. Focus an item to inspect it. Home or 0 recenters the field.
Zoom 100% · 4 items
No spatial item selected
A bounded spatial browsing field for curated projects, notes or media with authored depth planes, clusters and orientation cues—not a whiteboard application.
6–30 curated items; use a dedicated data product for more.