Combo Meter

Build a combo meter: a multiplier that climbs with chained hits and collapses when the fuel bar empties. Structure: a small card with a header row (a bolt icon and the label "combo" on one side, the multiplier on the other), a thin fuel bar below it, and a caption underneath. The mechanic, and it must be real: - A setInterval every 90ms reduces fuel by a couple of percent. This runs regardless of interaction - a bar that only moves when tapped is a progress indicator, not a threat. - Each hit sets fuel back to 100 and increments the combo. - When fuel reaches zero, the combo resets to 0 and the caption reads "chain broke". Build the failure; a meter that only goes up never teaches the mechanic. The multiplier is the animation, not the bar. Derive it from the combo (e.g. floor(combo / 2) + 1) and render it inside an AnimatePresence with mode="popLayout", keyed on the value: the new number springs in from scale 0.5 and y 6 (stiffness ~540, damping ~18) while the old one scales up to 1.5 and fades. Grow the font size with the value so the number gets physically louder as the chain grows. popLayout matters here - without it the exiting number holds its space and shoves the row sideways. Heat is a threshold, not a ramp: above five hits, the icon, the number and the bar fill all switch to the accent color at once. The bar's width animates linearly over 0.09s so it tracks the interval instead of easing behind it. Accessibility: the multiplier is aria-live="polite"; the icon and bar are aria-hidden. Under prefers-reduced-motion, render a settled mid-combo state with no interval and no springs. Colors as tokens: paper card, ink text, one accent for the heated state. 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.