Masonry Reveal

Create a masonry grid with a staggered reveal. A multi-column masonry layout (columns of items with varying heights, like Pinterest) whose tiles assemble one after another when the grid enters the viewport. Layout: for a fixed design use flex columns (3-4 column divs, items distributed between them); for dynamic content use CSS columns or a masonry library. Consistent 8-16px gaps, rounded corners per tile. Reveal: when the grid first enters the viewport (IntersectionObserver, once), each tile animates from opacity 0, translateY(16px), scale(0.95) to full over 320ms with cubic-bezier(0.22, 1, 0.36, 1), staggered ~90ms apart in visual order (left-to-right, top-to-bottom, not column-by-column, which looks broken). Cap the stagger at the first ~12 tiles; anything below the fold can appear with its own scroll-reveal as the user reaches it. Animate transform and opacity only, so the layout never reflows during the reveal. Under prefers-reduced-motion, show the grid fully assembled. 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.