Skip to main content

UI element

The scroll scene shell

A sticky scene scrubbed by scroll, with the static fallback built in.

By
Caleb and Ryan, the founders
Updated
August 28, 2026
Version
1.0, in the library
  • Claude Code
  • Cursor

The shell every opening scene on this site runs on: a tall track, a sticky stage under your header, a progress value from 0 to 1 as the visitor scrolls, and the part most demos skip: the server, reduced motion and phones all get the resolved picture, never a frozen half-frame. A React component and the hook under it, with a worked example scene and the notes on what went wrong the first three times.

Built, documented, running.

Part of the working library we deploy from on every engagement.

Bring this into a project

Runs on

  • Claude Code
  • Cursor

2 requirements and 3 install steps, below.

  • Complete and documented: the same files we run ourselves.
  • Deployed and tuned to your stack as part of an engagement.

The file

Draft excerpt
// The one sticky-scrub shell. Scroll is the clock: a sticky stage// inside a tall track, progress 0..1 from the track's travel. The// static presentation (server, reduced motion, phones) is the resolved// scene, never a frozen mid-scrub.export function ScrubScene({ id, track, children }: Props) {  const { ref, progress } = useScrollProgress<HTMLElement>();  const [isStatic, setIsStatic] = useState(true);  useEffect(() => { /* matchMedia: width and reduced motion */ }, []);  if (isStatic) return <section id={id} data-scene-static="true">{children(1, true)}</section>;  return (    <section id={id} ref={ref} className={`relative ${track}`} data-scene-progress={progress.toFixed(2)}>      <div className="sticky top-0 flex h-screen flex-col justify-center">{children(progress, false)}</div>    </section>  );}

What is inside

6 items. Includes deployment guide, video guide.

  • ScrubScene.tsxThe shell: track, sticky stage, header clearance, the static swap.
  • useScrollProgress.tsThe hook: one rAF loop, progress from the track's travel, cleaned up on unmount.
  • useAnchors.tsMeasures real DOM elements so an SVG connector lands on them at any width.
  • ExampleScene.tsxA worked scene: four items lighting in order, then a card assembling.
  • GUIDE.mdThe three mistakes: measuring the wrong tree, dash draws with non-scaling strokes, the header gap.
  • walkthrough.mp4Twelve minutes, building the example from the shell.

Who it is for

  • You want a scroll-driven explainer on a page and every tutorial you found breaks on a phone.
  • You are a developer who would rather read one working file than a motion library's documentation.
  • You want your product page to open the way the pages on this site do.

Requirements

  • React 18 or later
  • A page with a fixed or sticky header (the shell clears it)

Install

  1. 01

    Copy the three source files into your components folder.

  2. 02

    Wrap your scene in ScrubScene and read progress from its render prop.

    import { ScrubScene } from "./ScrubScene";
  3. 03

    Render the resolved picture when isStatic is true. Test on a phone first.

Where this sits

  1. This system

    The scroll scene shell

    In the library, running.

  2. Pairs with

    The install call

    If the shell is in and the scene is not coming together, an hour with the person who built it.

  3. In your stack

    Deployed on an engagement

    The audit finds which system earns its place first; we install and tune it around how you work.

Questions

Does it use a motion library?
No. One requestAnimationFrame loop and CSS. This site runs no motion library either.
Will it work in Next.js?
Yes; it is written for it. It works in any React app with a client boundary.
What about Vue or plain HTML?
The hook's logic is twenty lines and the guide explains it; porting is an hour. The React files are what ships.
What is the next step up?
A scene of your own, designed and built for your product: the Design page.

Changelog

  1. August 28, 2026In the library. Version 1.0 runs in our own operation.

Related

  1. Featured

    Skill

    Code review skill with a pattern database

    A review pass that knows your framework's failure patterns before it reads your diff

    Works with Claude Code, Cursor.

    Built and running

  2. UI element

    The mega menu

    A mega menu that opens on hover with intent and behaves on a keyboard

    Works with Claude Code, Cursor.

    Built and running

  3. Skill

    Code review checklist pack

    Reviews that check what your team actually gets burned by

    Works with Claude Code, Cursor.

    Built and running