Streak Flame

Create a streak flame counter. A flame icon (filled, accent color) sitting on a soft radial glow, next to a big bold day count with a small "day streak" caption. Idle, the flame flickers subtly and endlessly: scale 1 → 1.06 → 0.98 → 1.04 → 1 with a tiny skewX wobble (±2deg), 1.6s ease-in-out loop, transform-origin at the flame's base (50% 80%) so it dances from the bottom like real fire. Logging a day: the flame flares (scale 1 → 1.35 → 1 with a rotate wobble, 500ms, springy ease), three small ember dots rise from the flame (up ~38px, spreading left/center/right, shrinking and fading over 600ms with a 0.05s stagger), and the day number rolls up slot-machine style (old digit up and out, new one springs in from below, stiffness 480, damping 28) inside an overflow-hidden slot. Accessibility: the counter uses aria-live="polite" with an aria-label like "7 day streak". If prefers-reduced-motion is set, show a static flame and update the number instantly. 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.