← Back to catalog📄 Implementation guide
Motion / Interaction

Staggered Entrance Animation

Animates groups of elements one after another.

Organized, polished, premium

Professional
Casual
Exotic
Visual impact
Difficulty
Performance cost

Best use: Feature grids, lists, galleries

Live preview · index-staggered
◆ Cadence — Design System v3

Ship interfaces that arrive in rhythm.

A composable kit of tokens, components and motion curves — so every screen your team builds feels deliberate, ordered, and unmistakably yours.

01

Color Tokens

An 11-step ramp per hue, calibrated for light and dark in a single pass.

02

Type Scale

Fluid clamp() steps from caption to hero, every line locked to the grid.

03

Motion Curves

Six signature easings — staggered entrances ship as the default.

04

Spacing Grid

A strict 8-point rhythm that keeps every layout honest on any breakpoint.

05

Components

128 accessible primitives, re-themed from a single CSS variable.

06

Iconography

A 540-glyph set drawn on one consistent pixel grid, stroke-aligned.

v3.2 · 8-pt grid · WCAG AA · light + dark

Technique: per-item animation-delay: calc(var(--i) * 80ms) driving one shared keyframe — an index-based cascade replayed on load, on scroll-in, and on demand