Case Study, Interactive Exhibition
AERO
A century of Lockheed aviation told as one continuous scroll: five chapters and sixteen dated milestones that open into field notes and the sources behind them.
React Framer Motion WebGL2 SVG Design & Build
Project Overview
AERO is an independent educational exhibition I designed and built to tell the story of Lockheed aviation as a single scrolling record, from the Loughead brothers’ first seaplanes over San Francisco Bay in 1912 to the F-35 Lightning II. It is not affiliated with Lockheed Martin.
The goal was a history you read rather than skim. Each of the five eras opens as a chapter introduced by its defining aircraft, then gives way to a dated timeline where every milestone expands into a field note and links to the historical reference behind it.
Implementation
Chapters Drawn in Line
The record is organised into five era chapters. Origins, Wartime, Cold War, Stealth and Modern each open with the aircraft that defined the era, from the Vega to the F-35. The drawings are simplified top-view linework in SVG, redrawn against credited reference views such as NACA’s 1927 circular on the Vega, so each planform keeps its proportions without pretending to be an engineering drawing.
Scroll position drives the whole experience: the active chapter, the progress rail and the ocean beneath the text. Rather than doing that work on every scroll event, updates are batched into a single animation frame, and the chapter logic itself is a small pure function with its own tests:
// The active chapter is the last one whose top edge has crossed the threshold line.
export function pickActiveChapter(chapters, threshold) {
return chapters.filter(chapter => chapter.top <= threshold).at(-1) || chapters[0]
}
// One update per animation frame, however fast scroll events arrive
const schedule = () => { if (frame === undefined) frame = requestAnimationFrame(update) }
window.addEventListener('scroll', schedule, { passive: true }) 
Interaction & Rendering
Field Notes Over a Living Ocean
Each milestone is a card that opens into a field note: the detail behind the headline, with a link to its historical reference. A sources drawer gathers every reference in one place, and a HUD panel tracks reading progress and holds the display settings. Those include the visual theme, ambient motion, a companion aircraft that follows the pointer and settles while you read, and an optional precision cursor.
Beneath the text, the ocean is a WebGL2 fragment shader rather than a video. It draws with a single triangle that covers the viewport, shifts its currents with each era and responds to the pointer. Smooth scrolling pauses while the HUD or the sources are open, and for readers who prefer reduced motion the ocean never starts at all.
// One triangle covers the whole viewport: no vertex buffers at all
const vec2 POSITIONS[3] = vec2[](
vec2(-1.0, -1.0),
vec2(3.0, -1.0),
vec2(-1.0, 3.0)
);
void main() {
vec2 position = POSITIONS[gl_VertexID];
vUv = position * 0.5 + 0.5;
gl_Position = vec4(position, 0.0, 1.0);
} Results
AERO shipped as a finished, publicly deployed exhibition rather than a prototype. Every push runs linting, unit tests and a production build before the site is uploaded to threeohfivestudios.com/aero, and the full record stays readable with motion switched off, whether through the system setting or the site’s own toggle.
See It Live
Experience the Full Site
Scroll the full record, open the field notes and follow each era from the Vega to the F-35.