Code Block Reveal

Create a code block that reveals itself line by line. A dark editor-style card: a header bar with three faded window dots and a status label, and a body with 5 lines of syntax-highlighted code (use 3-4 token colors on the dark background: warm orange for keywords, a lighter orange tint for function names and numbers, dimmed paper for punctuation, monospace font, line-height 1.9). Each line starts invisible, shifted 10px left and blurred 3px. Lines reveal in order, one every 0.7s: each animates to full opacity, x 0 and blur 0 over 320ms with easing cubic-bezier(0.22, 1, 0.36, 1). When the last line lands, a small "ready" badge with a check icon springs into the header (spring stiffness 400, damping 22). For a demo loop, hold briefly and restart; in production trigger the reveal when the block enters the viewport or as the AI streams the code. Accessibility: the code is real text (selectable and copyable), not an image. If prefers-reduced-motion is set, render all lines immediately with the badge visible. 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.