Composition / Content

Scroll-driven Article Timeline

Reveal a long-form article once while its timeline tracks the most visible section.

Section 1 of 4: Brief

January 2026

Write the motion brief

Frame animation as behavior before choosing an effect.

Principle 01Meaning before movement.

Motion begins as a product decision: what changed, why it matters, and where attention should move next.

That brief becomes the constraint every primitive and component must preserve.

March 2026

Build one execution layer

Centralize lifecycle, timing, and accessibility decisions.

Tokens
04
Foundations
05

Scoped Anime.js lifecycles, semantic motion tokens, and reduced-motion resolution form the shared execution layer.

Every higher-level interaction inherits cleanup and fallback behavior from this layer.

May 2026

Prove the component system

Turn the foundation into useful, testable interface behavior.

09Accessible components

Nine production-ready components prove text, feedback, layout, overlay, and viewport motion through stable public APIs.

Each component ships with focused behavior and integration coverage.

July 2026

Complete the composition registry

Deliver realistic patterns through package and copy-source paths.

Milestone 08The composition catalog is complete.

Eight copyable compositions now connect metadata, dependency graphs, package exports, source delivery, tests, and live documentation.

The registry is ready for copy actions and interactive playground work.

Delivery contract

Install it

pnpm add easecraft@0.1.0

The composition imports stable APIs from easecraft.

Files / 02

  1. utilitycomponents/easecraft/compositions/scroll-driven-article-timeline-core.tsx
  2. compositioncomponents/easecraft/compositions/scroll-driven-article-timeline.tsx

Dependencies / 03

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

Component graph

Foundations

Interaction contract

Keyboard

Tab / Shift+Tab
Moves through article timeline navigation links.
Enter
Moves to the selected article section.

Release requirement

Accessibility

Pattern
article-timeline
Focus management
Required
Reduced motion
Immediate semantic fallback
Note
Uses one labelled article with linked section regions and an ordered navigation landmark.
Note
Announces meaningful active-section changes once while revealed content remains available after leaving the viewport.