Feature Grid Stagger

A feature grid whose tiles surface one after another, each icon waking up on hover.

Build a feature grid section: 4 tiles in a 2x2 grid (or 4 across on wide screens). Each tile: a small rounded icon chip (accent icon on a 10% accent background), a short bold title, and one line of muted text. Paper background, hairline border, 12px radius. Entrance: when the section scrolls into view, tiles rise into place one after another - opacity 0 to 1 and y from 18px to 0, 0.45s each with a decisive ease like cubic-bezier(.22,1,.36,1), staggered 120ms apart in reading order. Run it once, not on every scroll pass. Hover: the whole tile lifts 3px, and the icon chip does a little wake-up - rotates about -8deg while scaling to 1.12 on a spring (stiffness ~420, damping ~18). The icon is the personality of each tile; make sure it moves, not just the box. Accessibility: purely decorative motion - under prefers-reduced-motion tiles appear in place with no stagger and icons hold still. Icons get aria-hidden; the text carries the meaning. Colors as tokens: paper, ink, muted, one accent. Four features max - this section is a rhythm, not a spec sheet. 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.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data