[14]

VELAIR

2026

Client

VELAIR

Year

2026

Scope

3D web experience, scroll animation, WebGL

Role

Design / Development

Live Site

Visit site ↗

§ Case Study

VELAIR — Scroll-driven cinematic 3D private-jet experience — cloud transition, opening cabin and fly-by.

VELAIR is a concept that turns the private-jet experience into a cinematic, scroll-driven 3D story. A top-down jet view, a shader-based cloud transition, an opening cabin and a side fly-by behind a panel all unfold in one natural scroll flow; the aircraft is an original parametric model generated in code.

Built with Next.js, React Three Fiber, Drei and GSAP ScrollTrigger, a single progress value drives the camera, the jet and the clouds, with no continuous rendering while idle. A reduced-motion option, static images rendered from the same model when WebGL is unavailable, and mobile-specific framing keep performance and accessibility in balance.

Three.jsReact Three FiberGSAPNext.js

Challenge

VELAIR is a concept Piton launched on its own initiative — there is no real client or aircraft manufacturer behind it. The goal was to build a private-jet-themed portfolio piece on original geometry generated in the browser, rather than purchased 3D models or video footage; to blend a top-down view, a cloud transition, a cabin reveal and a horizontal flight into one seamless, natural scroll flow; and to keep the experience readable on devices without WebGL support, under a reduced-motion preference, and on narrow mobile screens — all while holding performance steady with a single canvas and a single playhead.

Solution

In the Next.js App Router, content stays a server component while the Three.js scene lazy-loads only on the client. The aircraft is a parametric geometry built and assembled piece by piece in the browser — there is no downloaded 3D model file. A single GSAP ScrollTrigger produces one 0–1 progress value, which a pure function converts into camera, jet and cloud pose, while a separate helper adjusts zoom and mobile framing to viewport height. The scene renders on demand: frames are drawn only when the user scrolls, with no per-frame React state or DOM measurement. When WebGL2 isn't supported, on context loss, or under a reduced-motion preference, the experience falls back to static posters rendered from the same model; cabin-selection buttons are accessible to screen readers. Section boundaries, pose sampling and mobile framing are covered by automated tests run with the Node test runner.

Key technical decisions

The aircraft isn't an imported GLB — it's an original geometry built and assembled parametrically in the browser.
A single GSAP ScrollTrigger progress value drives the camera, the jet and the cloud shader together; no per-frame React state is used.
On-demand rendering: the scene redraws only on scroll, so no GPU work is spent while idle, with device pixel ratio capped to a 1–1.5 range.
A seamless fallback to static posters rendered from the same model when WebGL2 is unsupported, on context loss, or under a reduced-motion preference.
Automated tests for section boundaries, pose sampling and mobile framing run with the Node test runner.

Tech stack

Next.jsReactTypeScriptThree.jsReact Three FiberDreiGSAPVercel

Outcome

The result is a live concept demo that carries visitors through six sections in one uninterrupted scroll flow. Staying readable without WebGL, under reduced motion, and on mobile, it stands as a reference showcasing our 3D storytelling and motion-design capability. As we note in our own documentation, a licensed artist model and device-level performance benchmarking are subjects for the next production round.