Chapter 08 / Scroll storytelling

Let the scroll tell the story.

A product that turns as you scroll, a gallery that moves sideways, layered depth and a pinned narrative. The scroll position is the timeline.

Demos

Video scrubbed by scroll

A Higgsfield turntable video, cut into frames and drawn to a canvas from the scroll position, the way product pages do it. Captions fade in at their own points on the timeline.

  • Video
  • Sticky + canvas
  • Image sequence

Bolt.
Designer vinyl.

Hand finished,
all the way round.

Your scroll wheel
is the turntable.

Loading frames

Horizontal scroll section

The section pins in place and turns vertical scrolling into sideways travel. The height is calculated from the track, so it works at any screen width.

  • position: sticky
  • Scroll mapping
Generated with Higgsfield

Scroll down, move sideways.

Sunlit living room
InteriorSketch, then render
Seared scallops on a plate
KitchenOverhead food photo
Model in a rust coat on concrete stairs
EditorialMedium format look
Swiss style poster
PosterType set by the model
Pip the fox
CharacterClay render
Iridescent chrome sculpture
AbstractHero image

Layered parallax

A generated valley, two layers of mist, the headline and Pip cut out of a generated photo with Higgsfield's background remover. Each layer moves at its own depth, so the title sits inside the scene.

  • Image
  • Background removal
  • Depth layers

Into the
valley.

Pip the fox looking out over the valley Scroll and move your cursor

Pinned storytelling

The illustration stays pinned while the chapters scroll past, and each step adds a layer to it. An IntersectionObserver decides which step is active.

  • Sticky
  • IntersectionObserver
01 / 04
01 / Brief

Start with words.

Every page starts as a few sentences about who it is for and what it should make them feel. Claude turns that into structure.

02 / Layout

Give it a grid.

Hierarchy, rhythm and space come next. Boxes before pixels, so the content decides the layout.

03 / Motion

Add meaning in motion.

Animation that explains: what moved, where it went, what you can touch. Never motion for its own sake.

04 / Ship

Test it and ship it.

Check it on a phone, with a keyboard, with motion turned off and from a file on disk. Then publish.