Component / Layout

Staggered List

Insert, remove, and reorder keyed data while preserving semantic list markup, DOM identity, and keyboard focus. Long sequences stay bounded by a maximum stagger span.

4 itemsReduce motion

Delivery queue / keyed items

01Audit onboardingAccessibilityentering
02Tune list motionMotionentering
03Review release notesDocumentationentering
04Publish previewReleaseentering

Delivery contract

Install it

pnpm add easecraft@0.1.0

The component imports stable APIs from easecraft.

Files / 00

Dependencies / 03

easecraft: npm / 0.1.0
react: peer / >=18.2.0 <20.0.0
react-dom: peer / >=18.2.0 <20.0.0

Package usage

Use it

import { StaggeredList } from "easecraft";

<StaggeredList
  items={projects}
  getKey={(project) => project.id}
  preset="fade-rise"
>
  {(project) => <ProjectCard project={project} />}
</StaggeredList>

Typed contract

API

Prop	Type	Default	Purpose
items	readonly Item[]	required	Controlled list data
getKey	(item) => React.Key	required	Stable item identity
children	(item, state) => ReactNode	required	List-item content renderer
as	"ul" \| "ol"	"ul"	Semantic list host
preset	"fade" \| "rise" \| "fade-rise"	"fade-rise"	Entry and exit treatment
interval	stagger token \| number	"normal"	Delay between item starts
maxDelay	duration token \| number	"slow"	Maximum stagger span
duration	duration token \| number	"normal"	Entry and reorder duration
exitDuration	duration token \| number	"fast"	Removal duration
order	"forward" \| "reverse"	"forward"	Stagger origin
distance	distance token \| number	"medium"	Entry and exit travel
easing	easing token \| string	"enter"	Entry easing
exitEasing	easing token \| string	"exit"	Exit easing
reorderEasing	easing token \| string	"move"	FLIP reorder easing

Release requirement

Accessibility

List semantics: The host remains a real unordered or ordered list with one list item per key.
Focus stability: Removing a focused item moves focus to its nearest remaining neighbor.
Exit retention: Items remain visually present for exit motion but leave the accessibility tree.
Reduced motion: Data changes apply immediately without entry, exit, or reorder animation.