Brand systems
Identity, type and motion rules that survive real products.
01 · InkScroll ↓
Every layer moves.
Three words, three speeds (×0.10 · ×0.30 · ×0.55). The outlined numeral behind them drifts the other way (×−0.35). Each chapter holds its colour and flips at the seam; text is always ink or paper, never grey.
Scroll
02 · GreyDepth stack
Five blocks,
five depths.
Same row, different speeds. Watch them separate as you scroll — the labels say how fast each one travels.
×−0.30A
×−0.10B
×0.10C
×0.30D
×0.50E
03 · InkHorizontal parallax
Interactive spaces
Installations where the body is the interface.
Tools
Small internal tools on the same tokens.
04 · PaperUI on any ground
Solid, readable
UI everywhere.
Panels invert against the ground and their text is always the opposite ink — at least 11:1 on every ground.
Buttons
Input
Toggle
Stat
128
projects shipped
06 · GreyWeight in motion
Outfit 100
Outfit 400
Outfit 800
Hierarchy comes from size and weight, never from a third colour.
Pro · PaperGSAP · pin + scrub
Hold the frame,
scrub the scene.
Opt-in GSAP ScrollTrigger via scroll-pro.js. The stage below pins for one and a half screens while its lines scrub in; then the page turns sideways. Without GSAP, or with reduced motion, everything simply sits still.
Pin.
Scrub.
Release.