Skip to content
Pinky UI

motion

Stagger Reveal

A parent-driven sequence for child content.

  • motion

Live preview

One considered step
Then a second
Then the whole shape

Quick usage

usage
import { StaggerReveal } from "@pinky-ui/effects";

<StaggerReveal />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

StaggerReveal sequences the entrance of sibling content without requiring manual delay props. It works for a small card row, feature list or navigation group with an obvious reading order.

Use 3–8 children and a stagger around 40–90ms. Do not stagger a long list, every element on a page, or items whose order changes rapidly; the delay becomes friction. Preserve semantic children inside the generated wrappers.

The shared in-view observer triggers the group, and reduced motion shows every child immediately. Never make a child’s meaning depend on waiting for its turn; content and keyboard access must exist before or without motion.

Open this skill on its own page