Building the Scrollytelling Engine

Why scrollytelling?

The Nash-Tek home page is not a traditional landing page. It is a cinematic stage — a single pinned viewport where content phases in and out as the user scrolls. This pattern, sometimes called "scrollytelling," lets us tell a story with the pacing of a film while preserving the simplicity of a static document.

The StageShell architecture

Everything sits inside StageShell, a full-viewport container that is the only scroll surface on the page. Window scroll listeners are banned — all progress is derived from a single scroll offset normalized to [0, 1].

Each "beat" on the timeline gets a start and end range. When the scroll progress falls within a beat's range, that beat is active and its content fades in. When progress leaves the range, the content fades out.

Beat ranges and the timeline

The timeline is defined as a typed array of beat descriptors:

• intro — the opening lockup
• toc — mission briefing / table of contents
• collage — layered parallax scene
• portal — the black hole transition
• sidekick — the "Sidekick" reveal
• apps through support — content chapter beats

Each beat has an enter, active, and exit window. Overlaps between adjacent beats create cross-dissolve transitions.

Cinematics and envelopes

The envelope() utility maps a progress value to an opacity/transform curve. It takes a beat range, an easing preset, and returns a 0-1 value that drives CSS opacity and transform. This keeps all motion math in one place and makes it trivial to re-time the entire page by adjusting the beat map.

Performance constraints

All animations use transform and opacity only — no layout-triggering properties. The result is consistently smooth 60fps scrolling, even on mid-range hardware.

The scrollytelling engine was first introduced in S04 and has been refined through every slice since.