Bar Chart Stagger

Bars that spring up one after another, the peak in accent

visits / day

Create a bar chart whose bars stagger in. 6 vertical bars (rounded 5px tops) grow from height 0 to their value with a spring (stiffness 300, damping 26), one after another with a 0.09s stagger, starting 0.15s after the chart appears. The peak bar uses the accent color; the others use the ink color at 82% opacity. Labels under the bars fade in slightly behind their bar (0.09s stagger, starting at 0.3s), with the peak's label in the accent color. Add a small monospace metric title above. Because the bars are flex children growing to a percentage height, animate the height property (not transform scale) so the rounded tops stay crisp; keep the chart under ~10 bars so layout animation stays cheap. Accessibility: give the chart container role="img" with a descriptive aria-label (e.g. "Bar chart of visits per day, Thursday is the peak"), and hide the decorative labels row with aria-hidden. If prefers-reduced-motion is set, render all bars at full height immediately. Trigger the stagger when the chart scrolls into view. 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.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data