Quick Action Grid

A 2x2 launcher whose tiles pop in and wiggle their icons on hover

Create a quick action grid. A 2x2 grid of action tiles. Each tile: an icon in a small rounded square with an accent-tinted background (accent color at 10% opacity, icon in full accent), and a bold label below, on a surface card with a 1.5px hairline border and 12px radius. On mount, tiles pop in one by one: from 12px lower at 90% scale and 0 opacity, with a spring (stiffness 400, damping 26) and a 0.08s stagger. On hover, the tile lifts 3px and its border turns the accent color, while the icon wiggles (rotate 0 → -10 → 8 → 0 over 400ms). On press, the tile scales to 94%. Accessibility: tiles are real buttons with visible labels, so no extra aria is needed; keep focus outlines visible for keyboard users. If prefers-reduced-motion is set, render the grid immediately and swap hover motion for the border color change only. 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