Dashboard Tiles Cascade
Metric tiles resolve corner to corner in a diagonal wave instead of arriving as one slab.
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, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Dashboard Tiles Cascade
*
* Six metric tiles resolve corner to corner instead of all at once. The
* delay is the diagonal band a tile sits in — row + column — so the gridAbout this pattern
The load state for an analytics grid, where six panels finish at once and the screen changes all at the same instant. Each tile's delay is the diagonal band it sits in — row plus column — so the grid fills the way the eye already reads it, top-left first, and the far corner is barely a third of a second behind. Waiting block and finished tile share a single grid cell, so the panel is the right size from the first frame and nothing shifts as the data lands. The tiles lift a few pixels on a spring that settles once; the numbers inside hold one size the whole way, because a value that scales is a value you have to re-read.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Overview tiles resolve in quick succession rather than switching over together.
Related patterns
- Chart Bars GrowBars rise out of the baseline in reading order, with the axis landing first so there is something to measure against.
- 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.
- Map Tiles LoadTiles fade in out of order over the placeholder grid, the way a real map delivers them.