Zera Studio

WebGL / Studio / 2026

A studio marketing site that uses WebGL and scroll choreography to tell a brand story.

Lumen Atlas project preview
Project framePrototype

Lumen Atlas pairs custom Three.js shaders with GSAP scroll choreography and Lenis smooth scrolling to create a studio site that feels more like an experience than a brochure.

Enter Project ->

Design process

11 hours

Brand Physics

Define how the studio story should move, where WebGL should carry meaning, and where copy needs to stay direct.

Narrative Motion MapShader Role DefinitionBrand Proof Points

39 hours

Scroll Choreography

Connect Lenis, GSAP, shaders, and content sections into a page that feels immersive without losing orientation.

Scroll Scene TimingGLSL Surface PassSection Anchor Logic

54 hours

Immersion Polish

Tighten interaction pacing, responsive states, and performance so the studio concept proves craft through the site itself.

Responsive Shader StatesFrame PacingInteraction QA

Initial concepts

Early UI Concepts and Visual Explorations.

Lumen Atlas initial concept 1
Lumen Atlas initial concept 2
Lumen Atlas initial concept 3
Lumen Atlas initial concept 4
Lumen Atlas initial concept 5
Lumen Atlas initial concept 6
Lumen Atlas initial concept 7
Lumen Atlas initial concept 8
Lumen Atlas initial concept 9
Lumen Atlas initial concept 10
Lumen Atlas initial concept 11
Lumen Atlas initial concept 12
Lumen Atlas initial concept 1
Lumen Atlas initial concept 2
Lumen Atlas initial concept 3
Lumen Atlas initial concept 4
Lumen Atlas initial concept 5
Lumen Atlas initial concept 6
Lumen Atlas initial concept 7
Lumen Atlas initial concept 8
Lumen Atlas initial concept 9
Lumen Atlas initial concept 10
Lumen Atlas initial concept 11
Lumen Atlas initial concept 12
Lumen Atlas initial concept 1
Lumen Atlas initial concept 2
Lumen Atlas initial concept 3
Lumen Atlas initial concept 4
Lumen Atlas initial concept 5
Lumen Atlas initial concept 6
Lumen Atlas initial concept 7
Lumen Atlas initial concept 8
Lumen Atlas initial concept 9
Lumen Atlas initial concept 10
Lumen Atlas initial concept 11
Lumen Atlas initial concept 12
Lumen Atlas initial concept 1
Lumen Atlas initial concept 2
Lumen Atlas initial concept 3
Lumen Atlas initial concept 4
Lumen Atlas initial concept 5
Lumen Atlas initial concept 6
Lumen Atlas initial concept 7
Lumen Atlas initial concept 8
Lumen Atlas initial concept 9
Lumen Atlas initial concept 10
Lumen Atlas initial concept 11
Lumen Atlas initial concept 12
Lumen Atlas initial concept 1
Lumen Atlas initial concept 2
Lumen Atlas initial concept 3
Lumen Atlas initial concept 4
Lumen Atlas initial concept 5
Lumen Atlas initial concept 6
Lumen Atlas initial concept 7
Lumen Atlas initial concept 8
Lumen Atlas initial concept 9
Lumen Atlas initial concept 10
Lumen Atlas initial concept 11
Lumen Atlas initial concept 12
Lumen Atlas initial concept 1
Lumen Atlas initial concept 2
Lumen Atlas initial concept 3
Lumen Atlas initial concept 4
Lumen Atlas initial concept 5
Lumen Atlas initial concept 6
Lumen Atlas initial concept 7
Lumen Atlas initial concept 8
Lumen Atlas initial concept 9
Lumen Atlas initial concept 10
Lumen Atlas initial concept 11
Lumen Atlas initial concept 12
Lumen Atlas initial concept 12
Lumen Atlas initial concept 11
Lumen Atlas initial concept 10
Lumen Atlas initial concept 9
Lumen Atlas initial concept 8
Lumen Atlas initial concept 7
Lumen Atlas initial concept 6
Lumen Atlas initial concept 5
Lumen Atlas initial concept 4
Lumen Atlas initial concept 3
Lumen Atlas initial concept 2
Lumen Atlas initial concept 1
Lumen Atlas initial concept 12
Lumen Atlas initial concept 11
Lumen Atlas initial concept 10
Lumen Atlas initial concept 9
Lumen Atlas initial concept 8
Lumen Atlas initial concept 7
Lumen Atlas initial concept 6
Lumen Atlas initial concept 5
Lumen Atlas initial concept 4
Lumen Atlas initial concept 3
Lumen Atlas initial concept 2
Lumen Atlas initial concept 1
Lumen Atlas initial concept 12
Lumen Atlas initial concept 11
Lumen Atlas initial concept 10
Lumen Atlas initial concept 9
Lumen Atlas initial concept 8
Lumen Atlas initial concept 7
Lumen Atlas initial concept 6
Lumen Atlas initial concept 5
Lumen Atlas initial concept 4
Lumen Atlas initial concept 3
Lumen Atlas initial concept 2
Lumen Atlas initial concept 1
Lumen Atlas initial concept 12
Lumen Atlas initial concept 11
Lumen Atlas initial concept 10
Lumen Atlas initial concept 9
Lumen Atlas initial concept 8
Lumen Atlas initial concept 7
Lumen Atlas initial concept 6
Lumen Atlas initial concept 5
Lumen Atlas initial concept 4
Lumen Atlas initial concept 3
Lumen Atlas initial concept 2
Lumen Atlas initial concept 1
Lumen Atlas initial concept 12
Lumen Atlas initial concept 11
Lumen Atlas initial concept 10
Lumen Atlas initial concept 9
Lumen Atlas initial concept 8
Lumen Atlas initial concept 7
Lumen Atlas initial concept 6
Lumen Atlas initial concept 5
Lumen Atlas initial concept 4
Lumen Atlas initial concept 3
Lumen Atlas initial concept 2
Lumen Atlas initial concept 1
Lumen Atlas initial concept 12
Lumen Atlas initial concept 11
Lumen Atlas initial concept 10
Lumen Atlas initial concept 9
Lumen Atlas initial concept 8
Lumen Atlas initial concept 7
Lumen Atlas initial concept 6
Lumen Atlas initial concept 5
Lumen Atlas initial concept 4
Lumen Atlas initial concept 3
Lumen Atlas initial concept 2
Lumen Atlas initial concept 1

Challenge / response / impact

Studio sites often default to grids and case study lists. This concept needed to prove craft through the experience itself, not just through the work displayed.

Response

We treated the entire page as a shader canvas, weaving Three.js visuals into the scroll journey so the brand story unfolds spatially rather than through static sections.

Impact

The finished concept positions the studio as a builder of immersive digital surfaces, with the site itself serving as the strongest proof point.

Lumen Atlas initial concept layout
Full frameInitial concept layout

Mobile responsive

Mobile frames keep the same tone, hierarchy, and conversion cues while tightening the page for swipe-first browsing.

Enter Project ->
Lumen Atlas mobile concept 1
Lumen Atlas mobile concept 2
Lumen Atlas mobile concept 3
Lumen Atlas mobile concept 4
Lumen Atlas mobile concept 5
Lumen Atlas mobile concept 6
Lumen Atlas mobile concept 7
Lumen Atlas mobile concept 8

01 / 08

Zera Portfolio project preview