Feature Card Icon Morph

Build a feature card where the icon is the protagonist. Structure: a paper card with an icon chip (rounded square), a bold title, and one line of muted text. Resting: the chip holds the feature's "off" icon (e.g. zap-off) in the accent color on a 10% accent background. The body text hints ("Hover to wake the feature up"). Hover - the morph moment: - the chip floods to full accent (background 0.3s) while doing a shake-and-grow: rotate keyframes [0, -12, 6, 0] with scale to 1.18, 0.5s, decisive ease - the icon swaps to its "on" version (zap, filled white) through a turnstile: outgoing icon shrinks and rotates -70deg out, incoming springs in from +70deg (stiffness ~520, damping ~24) - the title flips to accent, the card border warms to 45% accent, the card lifts 3px, and the body text swaps to the active line ("Powered up. Push and it's live.") Everything reverses on leave. Pick icon pairs that tell a before/after story: zap-off/zap, bell-off/bell, eye-off/eye, lock/unlock. Accessibility: icons are decorative (the title and text carry meaning); text swaps should be readable, not flickery. Under prefers-reduced-motion swap colors and icon instantly. Colors as tokens: paper, ink, muted, one accent. 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.