Scroll-driven · WebGL · Zero dependencies
Built to be scrolled, not skimmed.
IMMERSA turns a vertical scroll into a directed experience — pinned scenes, horizontal rails and a GPU-rendered field that answers to every gesture.
01 — The idea
Most sites hand you a wall of content and hope you scroll. This one treats the scrollbar as a timeline — every gesture advances a scene you were meant to see in order.
Fifteen scroll behaviours ship in the box: a 3D walkthrough, pinned sequences, horizontal rails, stacking cards, parallax depth, velocity-reactive marquees and progressive text reveals — all driven by one shared animation loop.
Read the approach →03 — What is inside
Fifteen behaviours, one loop.
Everything shares a single requestAnimationFrame and a single measurement pass. That is why the page still holds 60fps with every effect on screen.
01
Smooth scroll that does not break the browser
Drives the native scroll position instead of transforming a wrapper, so the real scrollbar, find-in-page, anchor links and position: sticky all keep working. Steps aside entirely on touch.
Native scrollbarKeyboard aware
02
A scene engine with a familiar syntax
Write data-start="top bottom" on any element and get a clean 0→1 progress value in CSS. No JavaScript required from you, no layout reads inside the frame loop.
DeclarativeZero reflow
03
GPU artwork with two fallbacks
A domain-warped noise field on WebGL, a Canvas 2D constellation when WebGL is unavailable, and a static gradient when motion is not welcome. Context loss recovers instead of going black.
WebGLGraceful degrade
04
Accessible by construction
Split text keeps a readable aria-label. The drawer traps focus. Reduced motion collapses every effect to its final state. Turn JavaScript off completely and the page still reads as plain HTML.
WCAG-mindedNo-JS safe
0fps
Median frame rate
0
Runtime dependencies
0
CSS + JS, gzipped
0
Scroll behaviours
04 — Depth
Layers that move at their own speed.
“We shipped in four days. The scroll work that normally eats a sprint was already done, and it survived our accessibility audit without a single change.”
Aria Solberg
Design Director, Northwind
A
Five pages, ready to ship
Home, work index, case study, studio and contact — each one wired to the same system, not a one-off demo.
B
Re-skin in one file
Two custom properties change the entire palette. Type scale, spacing and motion curves all resolve from tokens.css.
05 — Questions
Before you buy.
No. It is plain HTML, CSS and JavaScript. Unzip it, open index.html, edit it. There is no npm install, no bundler and no framework — it also runs straight from the file:// protocol.
Ready when you are
Make them scroll.
Five pages, fourteen scroll behaviours, and documentation that assumes you would rather ship than read.