Chart Bars Grow
Bars rise out of the baseline in reading order, with the axis landing first so there is something to measure against.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Chart Bars Grow
*
* Bars rise out of the baseline in reading order as the series lands.
* The stagger is the point: it walks the eye left to right through theAbout this pattern
How a chart should arrive. The gridlines and baseline fade in a beat ahead of the data, then each column grows from zero to its value about sixty milliseconds after the one to its left, walking the eye through the series instead of dropping a finished plot on the page. Two decisions carry the quality here. The bars are sized rather than scaled, because a scaled bar squashes its own corner radius and lands its top edge off the pixel grid. And every spring is over-damped: a column that overshoots its value draws a number the data does not contain, which is a reporting error rather than a flourish.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Volume columns resolve out of the baseline once the period's figures are in.
Related patterns
- Dashboard Tiles CascadeMetric tiles resolve corner to corner in a diagonal wave instead of arriving as one slab.
- Headline Word RiseEach word travels up out of the clip of its own line, so the headline reads as typeset rather than assembled from pieces.
- Cache Hit InstantCached content gets no entrance at all; only the values that actually changed animate.