Case · Landing page

OKSO T1: 3D landing page

A landing page for a fictional air sensor (demo): the object is drawn by one fragment shader on plain WebGL2 with no libraries, four SDF shapes morph on scroll, with an SVG fallback, reduced-motion support and a pause when off screen.

HTML5
CSS3
Vanilla JS
WebGL2
GLSL ES 3.00
Raymarching/SDF
Scroll choreography
GitHub Actions

Code on request

01 · How it looks

Screenshots

Screenshot of the project "OKSO T1: 3D landing page" at 1280 pixels wide — Desktop, 1280 px

Screenshot of the project "OKSO T1: 3D landing page" on a phone screen, 390 pixels wide — Phone, 390 px

02 · About

What it is and why

A landing page for a fictional air sensor, OKSO T1. The product, company, clients and figures do not exist, and the page marks this as a demo.

The object is drawn by one fragment shader on plain WebGL2 with no libraries: about 250 lines of JavaScript and GLSL ES 3.00. Four SDF shapes morph into one another as you scroll.

Limitations

Performance on a real GPU was not measured: the scene was checked on a software renderer (SwiftShader).

The brand, copy and kits are made up; there are no real clients or testimonials. Fonts come from Google Fonts and fall back to system fonts when offline.

What is inside

Raymarching over signed distance fields (SDF): a sphere, a torus, a rounded box with a dimple and a wavy sphere; morphing by mixing the distances
Scroll choreography: a sticky section 420svh tall, with the value smoothed exponentially
Lighting in the shader: a normal from the SDF, ambient occlusion, a procedural studio environment, fresnel and a highlight
The device pixel ratio is capped, and when frames take longer than 26 ms the resolution drops automatically
Rendering runs only while the scene is on screen (IntersectionObserver) and the tab is visible
An SVG fallback without WebGL2 or after a lost context; prefers-reduced-motion support
The demo form is validated on the client and sends nothing; link checks run in GitHub Actions

03 · How to run

Run it locally

git clone <repository on request> landing-3d
cd landing-3d
python -m http.server 8094   # http://localhost:8094

04 · Code

The repository is private

The source lives in a private repository. I will grant access on request: write to me and I will send an invitation.

Request the code