Foundation / Orchestration

Timeline

Compose named Anime.js steps inside one React-owned scope, then control playback without leaking the underlying timeline instance.

Sequence / PlayingReduce motion

Named sequence / 03 checkpoints

Release orchestration

Build motion as a sequence, not a pile of effects.

Labels keep intent readable while scoped cleanup keeps React in control.

signal: 0 ms
message: 180 ms
evidence: 440 ms

Package usage

Use it

import { Timeline, type TimelineSetup } from "easecraft";

const setup: TimelineSetup = ({ timeline, tokens }) => {
  timeline
    .label("intro", 0)
    .add("[data-step='title']", {
      duration: tokens.duration.normal,
      ease: tokens.easing.enter,
      opacity: [0, 1],
      y: [tokens.distance.medium, 0],
    }, "intro")
    .add("[data-step='summary']", {
      duration: tokens.duration.fast,
      opacity: [0, 1],
    }, "intro+=120");
};

<Timeline setup={setup}>
  {({ restart }) => (
    <>
      <h2 data-step="title">Motion with order.</h2>
      <p data-step="summary">Named positions keep transitions intentional.</p>
      <button onClick={restart}>Replay</button>
    </>
  )}
</Timeline>

Typed contract

API

Prop	Type	Default	Purpose
setup	TimelineSetup	required	Build scoped labels and animation steps
children	ReactNode \| (controls) => ReactNode	none	Static or controlled content
as	intrinsic HTML or SVG tag	"div"	Semantic host element
autoplay	boolean	true	Start after setup completes
onComplete	() => void	none	Sequence completion notification

Control	Behavior
play	Continue or start playback
pause	Pause at the current time
restart	Return to the beginning and play
reverse	Toggle direction and play
seek(time)	Render a finite, non-negative millisecond position

Lifecycle contract

Accessibility

Semantic content: The selected host and all children render normally before enhancement.
Reduced motion: Autoplay and playback controls complete synchronously at their endpoint.
Server rendering: No timeline or animation scope is created until the host mounts on the client.
Cleanup: Unmount and configuration changes revert scoped instances and inline styles.