The Showcase · live module lab

Sites that feel alive.

That’s Chappie — a real 3D model rendered live in your browser, textures and all. He idles right here; hit a button to send him sprinting across the frame or break into a dance. Everything below is real running code.

live idle · run · Thriller — all real-time

See the modules

WebGL✦WebGPU✦GLSL Shaders✦React Three Fiber✦GSAP ScrollTrigger✦Scroll Timeline✦Rive✦View Transitions✦Aurora UI✦Magnetic UI✦

MODULE LIBRARY

Six techniques, each pulled from this year’s award-winning web.

WebGL · GLSL

Shader fields

Domain-warped fbm flow written as a raw fragment shader. Pointer-reactive, 60fps, no three.js. The same pipeline scales up to WebGPU + R3F scenes.

Pointer physics

Fluid cursor

A lerped light that follows with weight — the signature feel of an Awwwards build, done with one rAF loop and a blend mode.

CSS Scroll Timeline

Scroll-driven motion

Reveals, parallax and a progress rail driven by animation-timeline — no IntersectionObserver, no scroll listener, no jank.

3D transforms

Tilt + magnetic

Cards that pitch toward the pointer with a live sheen; buttons that pull into your cursor. JS writes CSS vars, the GPU does the rest.

View Transitions

Cinematic routing

Page-to-page morphs from the native View Transitions API — Apple-product-page storytelling without a heavy router.

Aurora UI

Living surfaces

Drifting gradient fields, conic spin-borders, film grain and shimmer type — the Stripe / Linear / Vercel surface language.

Aurora surfaces.

The drifting gradient language behind Stripe, Linear and Vercel — built from layered CSS gradients under a blur, plus a film-grain overlay rendered from SVG noise. No images, no canvas, fully responsive.

Scroll storytelling

01Each block rises, sharpens and settles as it enters the viewport.

02Driven purely by the scroll position — no JavaScript observers.

03It honors prefers-reduced-motion and degrades to plain, visible text.

04The same timeline can pin, parallax and cross-fade full scenes.

What powers the next tier

This page runs dependency-free on purpose. When a build calls for full 3D characters, physics or designer-authored animation, the studio reaches for these — and that’s where commissioned 3D models, Rive files and SVG art come in.

Render: Raw WebGL2 / WebGPU · three.js · React Three Fiber · OGL
Motion: GSAP + ScrollTrigger · Motion (Framer) · CSS Scroll Timeline
Authoring: Rive state machines · Lottie · Spline · Unicorn Studio
Surface: Aurora gradients · @property anim · View Transitions · grain

Build my site →Hire the studio for something bigger