Bento Grid Reveal
A bento grid that assembles itself tile by tile
Create a bento grid with an assembly entrance. Layout: a CSS grid of feature tiles in the bento style: 4 columns, one hero tile spanning 2x2, the rest 1x1 (one can span 2x1 for variety). Consistent 8-16px gap, border-radius 10-16px per tile, one tile in the brand's dark ink color as an anchor, the others on the card background with a hairline border. Entrance: when the grid first enters the viewport, tiles animate in one after another: from opacity 0, scale 0.92 and translateY(10px) to their final state, 300ms each with cubic-bezier(0.22, 1, 0.36, 1), staggered 80ms apart in reading order. Hover: a tile lifts 3px over 150ms ease-out. Run the entrance once, animate transform and opacity only, and if prefers-reduced-motion is enabled show the grid fully assembled with no animation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.