◈ component · scroll-scene
Scroll Scene
A controlled SVG composition in three gestures. Supply scroll progress or a playhead; the scene follows the reader's pace and becomes a complete still under reduced motion.
The Scroll Score.
A composition in three gestures.
Give the eye somewhere to arrive, then give it time to stay.
The arch.
A silhouette gives attention a subject. A broad gesture is read before a fine detail.
The measure.
A line makes the proportion visible. The second entrance adds an explanation.
The ground.
A base gives the image a place to rest. A quiet ending lets the reader catch up.
Copies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
The reader sets the pace.
Pass state and a progress value from 0 to 100. Feed it from a range, a native scroll container, or your own progress observer. Set still to show the complete composition. Reduced-motion preferences are respected automatically.
import { ScrollScene } from "@/components/ScrollScene";
import { SCROLL_SCORE_DEFAULT, scorePose } from "@/lib/render/scrollScore";
<ScrollScene state={SCROLL_SCORE_DEFAULT} progress={42} />
// For custom content: scorePose(state, progress) returns
// x, y, rotation and completion for each of three layers.
// scrollScoreHtml(state, dark) exports the working example.Scroll measurement belongs to the consuming page. This scene owns no scroll listeners or animation loop. Artwork inherits your CSS colour and heading tokens, with built-in fallbacks. The exported HTML uses a self-contained light or dark palette and updates only on scroll or resize.
Source
components/ScrollScene.tsxlib/render/scrollScore.ts
Registry item: /r/scroll-scene.json