Immersive web experiences

We build sites that move with story, render in real time, and still load fast.

Crispwave is a small remote-first studio designing WebGL landing pages, 3D product configurators, scroll-driven brand stories and motion-first interfaces. We treat the browser like a canvas — and the user's attention like a finite, expensive thing.

28+
Immersive sites shipped
4–14w
Typical sprint length
60fps
Mobile interaction target
2024
Founded by Nathan Pierce

The interactive surface we build on.

Five overlapping practices — every project we ship usually borrows from at least three of them. We do not chase trends; we keep deepening a small set of techniques until they feel inevitable.

01 / Capability

3D Product Configurators

Real-time 3D viewers where users rotate, customise, recolour and step inside the product. We build them for fragrance bottles, furniture, hardware and apparel. Every configurator ships with mobile-first geometry budgets, baked lighting, lazy-loaded variants and a graceful 2D fallback when GPU memory is tight.

◆ Three.js · React Three Fiber · Drei · Rapier
02 / Capability

Scroll-driven Storytelling

Long-form narrative pages where scroll is the timeline — copy, imagery and 3D scenes choreograph together as the user moves down the page. We design these like films: storyboard first, transitions earned, no scroll-jacking. Smooth scroll is opt-out and reduced-motion is respected end to end.

◆ GSAP ScrollTrigger · Lenis · Theatre.js
03 / Capability

WebGL Landing Pages

A single page that has to do the work of a campaign — a shader-backed hero, an interactive logo moment, a generative texture that ties the brand together. We build these in tight 4–6 week sprints with measurable performance budgets and a documented art-direction reference so the brand team can extend later.

◆ Three.js · GLSL Shaders · Tweakpane
04 / Capability

Motion-first UI

Interface motion systems: how navigation reveals, how cards stagger in, how state changes feel. The boring 95% of a site that has to feel as crafted as the hero. We document timing curves, build a motion token system, and pair the visual choices with measurable interaction latency budgets.

◆ Framer Motion · Lenis · CSS view transitions
05 / Capability

Interactive Brand Sites

End-to-end brand websites where interaction is the lead voice. CMS, content model, copy direction, motion system and shipping pipeline — all built together. These run 10–14 weeks and produce both a live site and a documented motion system the brand can extend internally without us in the room.

◆ R3F · GSAP · Sanity / Payload · Vercel

Recent things we shipped.

Four pieces from the last twelve months, each picked because it solved a different kind of problem. NDAs prevent some logos here — the work is real and references are available on a call.

Fashion · Direct-to-consumer
12-week sprint

A WebGL flagship for an emerging Tokyo-based fashion house

Their lookbook turned into a navigable garment hall — each piece a draped cloth simulation the user could orbit, with copy panels drifting in on scroll. We collapsed twelve pages of brand content into a single sustained scroll, lifting time-on-page from 38 seconds to four and a half minutes. The whole site weighs less than a single hi-res campaign image used to.

Three.js R3F Cloth shader GSAP Lenis
Fragrance · Heritage brand
8-week sprint

A real-time 3D fragrance configurator for a 90-year-old maison

Users compose a bottle — cap, glass tint, engraving, label — and watch the result rebuild in real time with refracted glass and accurate liquid. Built around a single 3.2MB GLB with material variants, instanced caps and a custom envelope shader for the perfume itself. Mobile holds 55fps on a 2021 iPhone with the bottle, the room and the reflections all active.

R3F Drei GLSL Rapier Tweakpane
Climate fund · Annual report
6-week sprint

A scroll-driven annual report for a climate impact fund

A 92-page PDF turned into a 14-minute scroll narrative — emissions graphs grow, satellite imagery dissolves, a globe rotates through the year as the user moves. We treated every section like a film beat: storyboarded in Figma, timed in Theatre.js, then re-cut after a live read-through with the fund's communications team. The report still pre-renders cleanly for press indexing and email previews.

GSAP Theatre.js Lenis Three.js Mapbox GL
Architect · Personal portfolio
5-week sprint

A generative-art portfolio for a Copenhagen-based architect

Each project page is generated from the building's own floor-plan — points, lines and shadows reshuffle into a unique abstract piece for every visitor. The architect wanted "a portfolio that designs itself" — we built a small generative system seeded by URL so every share link produces a different but reproducible composition. The whole site is 84KB of JavaScript and reads beautifully on a five-year-old Android.

Canvas 2D GLSL Framer Motion Sanity

How we actually work.

Four phases, deliberately small. We prefer one shared live prototype over fifteen Figma frames — most decisions are easier to make once you can scroll through the actual thing on your phone.

01

Spark

We start with a 90-minute call: brand, audience, the specific feeling you want the user to leave with. We map references, look at the existing site and pull out the one or two moments that have to land harder than the rest. By the end of the week you have a short written direction with three possible creative tracks and an honest read on what is actually buildable inside your timeline.

02

Storyboard

We translate the chosen direction into a scene-by-scene storyboard — Figma frames annotated with motion notes, scroll beats and interaction states. Copy goes in at this stage so we are choreographing real content, not Lorem Ipsum. You get a Loom walkthrough of the storyboard with our voice on it, so internal stakeholders can see the intent without needing us in the room.

03

Prototype

Within ten days you have a working URL — a real, scrollable, interactive prototype hosted in CodeSandbox or StackBlitz. It runs in your browser, on your phone, in front of your team. We iterate live on it, sometimes pairing on a call while we adjust easing curves and shader parameters together. This is where most of the surprises happen, and where we are happiest having them happen — early, in code, not on launch day.

04

Ship

We harden the prototype into a production build, wire it into your CMS, run it through real-user performance testing on mid-range devices, and document the motion system so your in-house team can extend it. Launch day is uneventful by design. We stay on for two weeks post-launch to tune anything that surfaces in real traffic.

Things we are poking at this quarter.

A small, public lab where we try ideas that may or may not turn into client work. Some of these end up shipping inside a project six months later. Some quietly die. Both are useful.

Realtime mesh deformation with WebGPU

A compute-shader experiment pushing 200k vertices through a noise field on a 2020 mid-range phone. Currently holding 90fps and looking for an excuse to ship.

Read more →

Variable-font scroll choreography

Driving variable font axes — weight, width, optical size — directly from scroll position to turn typography into the lead animated element of a page.

Read more →

Cursor-driven generative grids

A field of small canvas tiles that reorganise themselves around the cursor, producing a different composition every second. Lightweight, no WebGL, surprisingly hypnotic.

Read more →

Small, deliberate tool kit.

We use roughly the same dozen libraries across every project. Mastery beats novelty — when something here is genuinely beaten by a new tool, we will swap it. Until then we keep getting faster with these.

Three.js
React Three Fiber
Drei
Lenis
GSAP
Framer Motion
Rapier
Theatre.js
TresJS
Tweakpane
Cannon
GLSL shaders

Five things we keep coming back to.

Short, repeated out loud often enough that they show up in our pull requests. We will defend any of these on a call.

01
Animation must earn its frame — if it does not carry meaning, it does not ship.
02
Load times beat polygon counts. A scene the user never sees is not a scene.
03
Scroll is a story tool, not a scroll bar — design it like a timeline.
04
WebGL is not the answer to most websites. Use it where the metaphor demands it.
05
Accessibility under motion is non-negotiable — reduced-motion is a first-class state.

What partners say about us.

Three notes from creative directors and founders we have shipped with recently.

They did the rarest thing — pushed back on the brief, killed our 3D idea and proposed something simpler that ended up being the moment of the launch. We trust them with the next one without bidding it out.
Maren Velasco
Creative Director · independent fashion label
The configurator they built is the only piece of our website our retail team actually shows in store. Customers stand in front of it for ten minutes. That has never happened with a web page we have shipped before.
Antoine Lefèvre
Brand Founder · fragrance maison
Nathan and team treated our annual report like a piece of cinema — and somehow it still ranks for our weird industry terms in search. I genuinely did not know that combination was possible.
Priya Ramaswamy
Head of Communications · climate impact fund

Questions we get on most first calls.

If your question is not here, the short version is: yes, probably, and we will tell you honestly if not.

Does WebGL actually work on mobile?

Yes — when it is budgeted for mobile from day one. We treat mobile as the design baseline, not an afterthought: tight texture sizes, instanced geometry, suspended scenes off-screen, and conservative pixel ratios. If a scene cannot hit 45+ fps on a mid-range Android, we redesign it before we polish it.

What about SEO on JavaScript-heavy sites?

All of our shipped sites pre-render or server-render the actual content — copy, metadata, structured data — so search engines index real text, not a hydrated shell. WebGL stays decorative on top of crawlable HTML. We have shipped immersive sites that rank in the top three for their target terms.

Can you work with our existing brand designer?

Almost every project we run is shared with a brand designer or in-house creative team. We take the visual system you already have and translate it into motion, depth and interactivity — we are not a replacement for brand identity work, and we are happiest when the brand thinking is already sharp before we arrive.

How do we decide if 3D is actually right for this project?

We ask two questions on the first call: does the story benefit from a physical metaphor, and will the audience linger long enough to reward the load? If neither answer is yes, we recommend motion and shader work instead of full 3D. We have talked clients out of 3D more times than into it — that is part of what you are hiring us for.

What is your performance budget?

Default targets are sub-2.5s LCP on a throttled 4G connection, under 250KB of JavaScript before interaction, and 60fps interaction on a 2020 mid-range phone. We instrument every build with real-user metrics from day one and reject features that cannot fit the budget — including our own.

Do you do ongoing motion updates after launch?

Yes — most clients keep a small monthly retainer with us for seasonal motion refreshes, new scroll chapters, campaign micro-sites, and gentle re-tuning of the interaction system as the brand evolves. It is a quieter, calmer relationship than the build sprint, and usually the most productive part.

Tell us what you're imagining.

Even if it is just a Pinterest board, a rough launch date and a vague feeling — that is enough to start. We reply within one business day with an honest read on scope, fit and timing. Fixed price, no surprises — figured out on the intro call.