Error 500 Server

Build a 500 server error screen that is actually useful. Structure: a centred card with an icon badge, a heading, an explanation, and a copyable trace id. The trace id IS the component. Print it in a mono font inside a dashed, full-width button that copies it on click. Without it a support ticket says "the site broke"; with it an engineer goes straight to the log line. Make it the primary action, not a footnote. The copy: swap the icon between a copy glyph and a green check inside an AnimatePresence with mode="wait" (about 0.14s), and switch the label to "trace id copied" for ~1.6s. Put aria-live="polite" on the label so the copy is confirmed without needing a toast. The copy text has three jobs: 1. Take the blame explicitly ("That one is on us"). A 500 is by definition the server's fault, and vague wording makes the user hunt for what they did wrong. 2. Say nothing was lost. That answers the question the user actually has - never "what is a 500". 3. Do NOT write "please try again later". It asks the user to do the waiting and gives them nothing to do now. The icon badge drops in with a tilt on a low-damping spring (stiffness ~260, damping ~12) and then stops. A permanently shaking icon says the page is still failing, which is a different and worse message. Under prefers-reduced-motion, render the icon in place; copying still works. Colors as tokens: paper card, a reserved status red for the icon badge, semantic green for the copied check. 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.