Experience Composition
Compose Pinky at page scale by assigning each region a job and one dominant interaction. A coherent page might use Liquid Navbar, Depth Hero, Expandable Bento, Cursor Preview Nav, Soft Mesh and Blur Route—each separated and restrained.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Experience Composition · hierarchy changes without losing order
Purpose
Compose Pinky at page scale by assigning each region a job and one dominant interaction. A coherent page might use Liquid Navbar, Depth Hero, Expandable Bento, Cursor Preview Nav, Soft Mesh and Blur Route—each separated and restrained.
Set an intensity budget before choosing components: one signature interaction above the fold, one ambient layer, and quiet supporting motion later. Reuse shared pointer, scroll and spring systems instead of mounting parallel frameworks.
Do not combine Liquid Navbar, Gooey Menu, Image Trail, Cursor Blob, Bubble Field, Parallax, Character Stagger and Liquid Wipe at maximum intensity. Mobile, keyboard and reduced-motion flows are first-class compositions, not degraded afterthoughts.
Source: packages/skills/patterns/experience-composition.md