MOTION / Scroll position · requestAnimationFrame · CSS transforms

Scroll Narrative Studio

Read a three-part visual story whose composition is derived directly from scroll progress.

LIVE SURFACE / 01

Scroll inside the frame. Follow the composition.

STUDIO / SCROLL-NARRATIVE

The canvas is ready
when you are.

Nothing runs in the background. Open the preview to start the experiment.

CONTROL SURFACE / 07

Parameters

Scroll inside the preview frame. Pause freezes the scene and readouts, while frame scrolling remains available; resume catches up to the current position. Restart returns the frame to the first chapter.

Scene length

How much iframe scroll distance carries the story, in viewport heights.

Layer depth

Maximum separation between foreground and distant forms.

Chapter transition span

Share of the scroll range used to enter and leave the middle chapter.

Progress curve

Maps normalized scroll progress into the layer response.

Pin the sceneKeep the artwork in view while its scroll track advances.

Show progress readoutDisplay the live normalized progress and chapter in the preview.

Reduce motionKeeps the narrative readable while removing layer travel and rotation.

One preview frame at a time · no camera, microphone, storage, or external demo URLs.

FIELD NOTES / SCROLL SYSTEMS

Let position carry the story.

Normalize the scroll range

Progress is the iframe document’s scrollTop divided by scrollHeight minus its viewport height, clamped from 0 to 1. Chapter boundaries split that stable range; the readout is measured from the actual frame scroll position.

Sticky needs a containing block

The scene pins to the top of its scrollport only while its story-track parent continues. Changing scene length changes the available pin distance. The iframe owns this scrollport, so the catalog page does not become a nested scroll target.

Direct transforms, either direction

Every update derives opacity and transforms from the current normalized value. There is no accumulated delta: jumping, reversing direction, or resizing produces the same state at the same position. Scroll and resize events share one requestAnimationFrame callback.

Viewport and motion choices

The art uses the iframe’s small viewport height (svh) and fluid type; resizing changes the available scroll range before the next scheduled sample. Reduced motion keeps the chapter and progress readouts but removes layer travel and rotation.

Pause and resume

Pause freezes the composition and its readouts at the sampled progress, but native scrolling remains available to keyboard, wheel, and touch input. Resume samples the frame’s current scroll position and catches up immediately; Restart scrolls the frame back to zero.

Browser support

CSS ScrollTimeline and ViewTimeline are not required. Native scroll events and requestAnimationFrame provide a deterministic fallback across evergreen browsers, while sticky positioning is progressively optional. This runtime was exercised in Chromium; Firefox and WebKit remain unverified here.

When scroll motion hurts

Do not tie essential content or controls to a long scroll distance. Avoid scroll effects that obscure reading, trap input, fight browser navigation, or make progress hard to reverse. This preview keeps wheel, keyboard, and touch scrolling native inside its frame.

SOURCE / LICENSE

Original implementation · MIT · no external assets

View source