Desert Data Labs Desert Data Labs Desert Data Labs
  • Work
  • Services
  • Process
  • About
  • Start a Project

04 · Create an experience · Scroll-film

A desert Saturday, told one mile at a time.

Old Pueblo is a cinematic, scroll-controlled flight from first light in the saguaros through monsoon weather and Kitt Peak darkness, ending under the lights at Arizona Stadium.

Take the journey View the code
4 Narrative chapters
52 seconds Master film timeline
1,571 Rendered WebP frames

The problem

A place is more than a sequence of pretty images.

A desert drive can pass through radically different moods in a single day. A conventional gallery would show the scenes but lose the transition—the feeling of moving from quiet first light toward a shared destination.

The experience needed to make travel itself the navigation while leaving enough space for each stop to say something meaningful.

Sonoran Desert landscape at the start of the Old Pueblo journey
The journey begins at first light on the bajada.

The solution

Let distance control the film.

Scrolling maps directly onto a 52.367-second master timeline. Four narrative chapters—desert, monsoon, Kitt Peak, and stadium—use weighted scroll bands so the pace can change without breaking the continuity of the road.

A visible Fly control can play the route automatically. Wheel, touch, or keyboard input returns control to the visitor. Chapter copy and progress markers orient the journey without turning it into a menu.

Monsoon weather over the Sonoran Desert in the Old Pueblo journey
The same road carries a completely different afternoon sky.

Defensible proof

The experience is the case study.

The full project is publicly deployed. Its four stops, film scrub, Fly control, progress rail, and responsive presentation can be tested directly rather than represented by a static mockup.

Desert chapter from Old Pueblo
First light · The Bajada
Kitt Peak night-sky chapter from Old Pueblo
Night · Kitt Peak
Arizona Stadium chapter from Old Pueblo
Kickoff · Arizona Stadium
Technical details

The primary renderer progressively fetches 1,571 WebP frames and decodes a window around the current frame to keep the canvas responsive. Browsers without createImageBitmap fall back to scrubbing a single master MP4.

The scroll geometry is piecewise rather than uniform: every segment has its own weight and maps to a bounded section of film time. A reduced-motion media query removes the automatic Fly control.

Have a story that should feel lived, not listed?

Build the interaction around the idea.

Microsites, launches, portfolios, and data stories can use motion without losing the message or the next step.

Start a project Related service Back to selected work

© 2026 Desert Data Labs LLC · Tucson, Arizona

Pricing · Data Security · Field Notes

GitHub · LinkedIn · Email