back to labs
labs experiment parallax + scrollytelling 2026

reading the rainforest.

What if a learner didn't click through a lesson, but fell through it?

Three layers of rainforest, canopy to floor, stacked into one continuous scroll. You start in the bright crown and sink to the dark floor. The whole scene runs on a single input: how far down the page you are. Scroll it below, or open it full screen.

the experiment

descend by scroll.

The actual piece, running live. Scroll inside the frame to fall from the canopy to the forest floor, or open it full screen for the whole descent.

reading the rainforest · the full descent open full screen ↗

scroll inside the frame to descend

the question

what if you fell through a lesson?

So much digital learning treats scroll as a way to get from one box to the next. But scroll is motion, and motion carries feeling. This started as a question: what if your position on the page was the whole experience, not just the way you advanced through it?

scroll is motion. motion carries feeling. this is me poking at what that means for how people move through, and remember, an experience.

how it works

one number runs the whole scene.

No timeline. No play button. A scroll listener turns your position on the page into a single number, and that number becomes the clock for the entire scene.

01

one input

How far you have scrolled becomes one value. Every leaf, animal, and layer reads from it. That is the entire engine.

02

depth by speed

Each cutout shifts by that value times its own depth. Far layers barely move, near ones rush past. The difference is what your eye reads as depth.

03

the curtain lifts

Reach the bottom of a layer and its banner lifts away like a curtain. The next layer is already waiting underneath.

04

plain web

Built from HTML, CSS, and a little JavaScript. No video, no game engine, no framework. Just parallax and scroll, doing math every frame.

the full descent

canopy to floor.

Three layers in one scroll, seen at a glance. The live frame shows one window at a time. These are the whole fall, laid flat: the layers on the left, and the complete scroll with the field notes between them on the right. Every leaf and animal is custom art, made for this piece. Nothing stock.

The three scene layers: the bright canopy, the shadowed understory, and the dark forest floor.
the three layers
The complete scroll, including the field-journal species notes that sit between each layer.
the full scroll
why i keep coming back to it

motion is a learning tool.

I keep returning to this because most learning design wastes scroll. It moves you between boxes. But the way something moves is part of what you take away from it. If descending through a rainforest feels different from clicking next, that difference is a design lever. This is me testing what it could do for how people move through, and remember, an experience. Still an experiment.

html css javascript parallax scroll-driven claude code
see it run

take the descent.

Scroll it in place above, or open it full screen and fall from the canopy to the forest floor.

open full screen