Empty State Illustration

Create an animated empty state. Centered layout: an SVG line illustration (e.g. an open isometric box), a bold "Nothing here yet" heading, one muted explainer line, and a primary CTA. Choreography: the box outline draws itself first (animate pathLength 0 to 1 over 1s with easing cubic-bezier(0.22, 1, 0.36, 1); inner fold lines follow at 0.4s). The whole illustration then floats gently forever (y: 0 → -6 → 0 over 3.2s, ease-in-out, infinite). Tiny accent dots rise from the box mouth on a loop (scale and fade in, drift up 12px, fade out; staggered 0.35s apart with a pause between waves). The heading, explainer and CTA cascade in at 0.7s / 0.85s / 1.05s, the button with a small spring pop; the button scales 104% on hover, 95% on press. Accessibility: the SVG gets role="img" with a description; heading and explainer are real text. If prefers-reduced-motion is set, show the finished illustration statically with no float or sparks. 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.