Welcome Hero

Create a personalized welcome hero. A dark panel greeting the user by name ("Good to see you, Anna"), with the name in the accent color. The headline assembles word by word: each word rises 16px, fades in and sharpens from a 4px blur, 450ms with easing cubic-bezier(0.22, 1, 0.36, 1) and a 0.11s stagger. A status line ("3 drafts are waiting for you", small monospace) follows at 0.85s, and a CTA pill pops in at 1.1s with a spring (stiffness 420, damping 22), scaling 105% on hover and 94% on press. Behind everything, a soft accent glow orb (a blurred radial gradient) drifts slowly and endlessly (x/y/scale on a ~9s ease-in-out loop) in one corner, giving the panel a living background without stealing attention. Personalize the greeting by time of day (Good morning / afternoon / evening) and the user's first name. Accessibility: put the full greeting in an aria-label on the headline container so screen readers read one sentence, with the animated words aria-hidden. If prefers-reduced-motion is set, render everything in place with a static glow. 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.