OKTO® Studio — An Awwwards-Level

OKTO® Studio — An Awwwards-Level Agency Site, Rebuilt From Scratch

One-line description

A dark, cinematic studio website where every scroll does something: a pinned 3D scene, a live WebGL backdrop, text that reveals word by word, and no stock imagery.

Project description

I wanted to answer one question: what does it take to rebuild an Awwwards Site of the Day without a site builder?

I took NIKI Studio's award-winning site as my benchmark. I took apart its structure, type scale and motion beat by beat, then rebuilt the whole experience in hand-written code for a fictional studio, OKTO.

The rule: match the feel, own everything else. New brand, new copy, and no borrowed images. Every visual on the page is generated in code.

What's inside → A 0–100 loader with a spinning 3D cube, followed by a staggered drop-in of the header → A WebGL backdrop of light raking across a rock ridge, with live film grain. It stays fixed while the next section slides over it like a curtain → A team marquee that speeds up as you scroll faster → Copy that lights up word by word as you read → A pinned 3D box whose lid lifts off as the work section rises through it → Collectible figure cards that fan out from a stack into a staircase → A pixel-brick mosaic footer with oversized type that tilts into place → Live studio clock, scrambling microcopy, custom cursor, slide-in menu

Under the hood Plain HTML, CSS and JavaScript, with no framework and no build step. GSAP and ScrollTrigger drive the choreography, Lenis handles smooth scrolling, and a custom GLSL shader draws the hero. Every illustration is SVG or Canvas. The site is fully responsive from 390px up, respects reduced-motion settings, and shows a pre-rendered image in browsers without WebGL. It's deployed on Vercel.

The process Before writing any code I wrote a full spec: measured spacing, the type scale, colour tokens, easing and spring values taken from the live site, and an acceptance checklist. Then I built against it and checked every section frame by frame against the reference, on desktop and mobile. I'd run a client build with the same spec-first discipline.

Why this matters for you If your brand deserves more than a template — a launch site, a portfolio, a product page people actually remember — this is the level of craft I bring. Let's talk about yours.

🔗 Live: https://octo-studios.vercel.app