Builds By Luke
All work

Interactive Film · WebGL · 2026 · Flagship

The Long Way Home

A goodbye told as a journey through deep space.

View live site Jump to preview
Role
Concept & Narrative, Creative Development, WebGL / GLSL Shaders, Motion Design
Stack
three.js, GLSL, GSAP, ScrollTrigger, Lenis
Year
2026
Discipline
Interactive Film · WebGL
  • One continuous camera journey across six emotional "movements," driven entirely by scroll progress
  • A domain-warped fbm nebula, three parallax starfields with velocity-reactive warp streaks, and flyby planets — all custom GLSL
  • A single warm light that is the porch light in the opening and the last star in the finale, carried by an UnrealBloom pass
  • Performance-tiered shaders, a real reduced-motion cut, and a custom-cursor "hold still" reward at the end

Live preview · the real, built site

Embedded and fully interactive. Resize it with the device controls, or open it in its own tab.

thelongwayhome.site
Preview width
Open
Live, interactive preview of The Long Way Home. Use the controls to change the preview width, or open the site in a new tab.

Most “cinematic” websites borrow the language of film without its discipline. The Long Way Home is the opposite: a piece that earns the word by treating the scrollbar as a timeline and the viewer’s patience as a material.

It is an interactive film in six movements — a goodbye told as a journey out past the planets, into the nebula, and back to a single light. You don’t click anything. You simply keep scrolling, and a single camera carries you the whole way.

The idea

The brief I set myself was small and unreasonable: make someone feel something using only a black page, a few lines of type, and light. No video, no stock imagery, no copy that explains itself. Every frame is generated in real time on the GPU, so the whole experience ships as three files and a couple of CDN libraries.

Notice how long the nothing lasts. This is the part the films cut.

The emptiness between the planets isn’t a loading gap — it’s the point. One movement is deliberately over-tall so the silence has somewhere to live.

How it’s built

A single normalised scroll value drives everything, so the camera, the shaders and the typography stay in perfect lockstep:

  • The sky is a domain-warped fractal-noise nebula painted across an inverted sphere that follows the camera, flowing forward as you travel so it reads as motion through cloud, not a wall.
  • The stars are three parallax layers of GPU points. On a fast flick of the wheel, a velocity uniform stretches each sprite into a warp streak.
  • The light is one billboarded glow. It is the porch light you leave in the first beat and — the exact same hue — the last star you leave in the finale, lifted by a bloom pass.
  • Lenis smooths the scroll, GSAP ScrollTrigger measures the beats, and split-text headlines rise out of their own masks as each movement arrives.

Built to be kind

Spectacle is worthless if it strands people. A capability check picks a performance tier — octave counts, particle budgets and post-processing scale to the device — and a genuine prefers-reduced-motion path replaces the whole timeline with a calm, readable cut. If WebGL is missing, a pure-CSS nebula takes its place. Nothing ever traps you behind a loader.

This is the flagship of the studio: the clearest statement of what I mean by websites that move like films.