Error Boundary Fallback
A friendly crash card: wobbling plug, mono error code, retry that spins
Something came unplugged
error 500 · our side, not yours
Create an error boundary fallback card. A centered card shown when a component crashes: an unplugged-cable icon in a soft accent-tinted circle, a human headline ("Something came unplugged"), a monospace detail line ("error 500 · our side, not yours"), and a "Try again" button. Motion: the icon wobbles periodically (rotate 0 → -10 → 8 → -6 → 0 over 800ms, repeating with a 2s pause) so the card feels alive but not alarming. Clicking retry spins the button's refresh icon (360deg per 0.8s, linear) with the label switching to "Retrying…"; on success the icon circle crossfades to a green check (icons swap with a spring, tint transitions 300ms) and the headline updates. On failure, return to the error state. Wire it to a real error boundary: the retry re-mounts the failed subtree; log the error to your reporting tool. Accessibility: the card uses role="alert"; the headline is aria-live="polite" for state changes. If prefers-reduced-motion is set, no wobble or spin, instant state swaps. 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.