Skip to content
Site volume
Colourway

3D kit

Build on scroll

An arrangement that assembles block by block as its section scrolls into view.

  • Beta
  • Expressive layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-three/css3d
On this page

A section's art slot whose blocks build as the section scrolls in: each block comes from 2.5 units above its seat, turned 20 degrees, and lands in seat order. Scroll back and it takes itself apart. It only ever moves inside its own slot.

Example#

Look of this example
Live render of examples/build-on-scroll/basic.tsx

Usage#

Use build on scroll for an arrangement that assembles block by block as its section scrolls into view: a process section, a "how we build" moment. It is driven by the scroll position, never by a scroll handler, and never moves reading text.

  • View timelines run it where the browser has them; elsewhere the reveal runtime plays the same build once over 900 ms.
  • In an art slot that clips its blocks; never behind words.

Layer and volume#

Art in a section's art slot. The same build at Studio, Press and Rave; at Quiet it is simply built.

Anatomy#

The parts of examples/build-on-scroll/basic.tsx, numbered:
  1. SlotThe art slot the build fills..mk-build
  2. BlockEach lands in turn..mk-block-front

Volume#

  • Quiet

    Simply built.

  • Studio

    Builds as it scrolls in.

  • Press

    The same.

  • Rave

    The same.

Content#

  • The build is art; the section's text says what it shows.

Do and don't#

Do

Builds beside the reading.

Don't

A section that pins the page and makes visitors scroll through the build before they can read on.

Scroll-jacking.

The build follows the scroll; it never captures it. Readers keep control of the page.

Fidelities#

CSS 3D on the slot's view timeline (animation-timeline: view()). Where view timelines are missing (Firefox), the reveal runtime plays the same build once, over 900 ms, when the slot comes into view.

Performance#

Zero JavaScript of its own; transform-only motion driven by the scroll position, never by a scroll handler.

Gating#

Reduced motion, Quiet and a page without the motion runtime show the built arrangement at once. Never put it behind words: the slot clips its blocks, but the slot itself is art.

Accessibility#

  • aria-hidden art; describe the arrangement in the section's text if it matters.
  • No scroll-jacking: reading text never moves with the scroll.

Props#

PropTypeDefaultDescription
arrangementArrangementNamelogoDefault `logo`.
sizestring | number48Block size (`--mk-s`, default 48).
classNamestringnone

Generated from BuildOnScrollProps in packages/overprint-three/src/css3d/build-on-scroll.tsx.

Tokens#

System tokens (15)

Its own properties (2)

  • --mk-3d-print
  • --mk-s

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorgenerators, threeThree: the alphabet twins at every fidelity (model, SVG, CSS 3D, GL geometry, physics shapes; Rave's MORE BLOCKS rains them), the row, topple, twins, stack-1/2/3, line-k/r/a/m and wood arrangements with their text alternatives, the page objects Crate, PlanPlate, Slot, SampleCase and Baseplate, BlockLoader, Topple404, BuildOnScroll, the house camera and an id-colour parity mode in poster frames, the wood grain in GL, specks and Shake, the phone's tap-to-play light rung with "Done", and InkFieldMaterial (the field backdrop in the stage's own canvas). Read the whole entry