3D Scroll Scanner Experience
What it does
A full-page scroll experience where a Three.js GLTF model floats and rotates as you scroll, its X-rotation mapped to scroll progress via a Lenis-fed render loop. In a pinned scanner section, a ScrollTrigger onEnter handler plays a scan sound, spins the model a full turn with GSAP, then shrinks it and the scan frame to zero; scrolling back reverses the reveal.
How it's built
| Category | 3d-webgl |
|---|---|
| Tech | three, gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | heavy |
| Mobile-safe | desktop-first |
| Scroll | hijacks scrolling |
How it works
A product story told as a checkout scan. A drink can floats in the middle of an off-white stage, bobbing gently and turning slowly, while the copy scrolls over it. The further you scroll, the further the can tumbles forward. Then you reach the scanner: the section pins, an empty rounded frame waits in the centre with a product number, a barcode and a red "verified" pill around it, and the moment you arrive the can stops floating, a scanner beep plays, the can spins a full turn, shrinks to nothing, and the frame collapses after it. Scroll back to the top and everything comes back.
It is built with Three.js for the model, GSAP with ScrollTrigger for the scan and Lenis for smooth scrolling.
Two kinds of motion that hand over
What makes this component interesting is that it mixes continuous, scroll-mapped motion with a one-off event, and they have to pass control between them cleanly.
The continuous part lives in the render loop. Every frame it moves the can on a slow sine wave so it hovers, adds a tiny idle spin, and reads the smooth-scroll position to set the can's forward tilt, from upright at the top of the page to one full tumble at the point where the scanner begins. Because that tilt is computed from where the scanner sits on the page, the can completes its turn exactly as it reaches the frame.
The event part belongs to ScrollTrigger. When the scanner section pins, a callback switches the hover off and centres the can, then plays a short sequence of GSAP tweens chained one after another: the spin, then the shrink of the can, then the collapse of the frame. The loop stops writing the tilt once the scanner is reached, so the two systems never fight over the same property. A small trigger at the very top of the page restores the can and the frame and turns the hover back on when you scroll all the way back, which keeps the story repeatable.
The scene
The can is loaded from a glTF file, its materials are given a light semi-metallic finish, and it is centred and framed from its own bounding box, so any similar product model fits. The canvas is fixed behind the sections, so the frame drawn in HTML appears to hold the 3D object.
Where it gets hard, and mobile
Sound on the web is gated: browsers may block the beep until the visitor has clicked or tapped somewhere, so the scan must work silently too. The sequence is event-driven rather than scrubbed, which makes it feel like a moment instead of a slider, but it also means it plays at its own pace however fast you scroll. The scene renders continuously at full device resolution with shadows, so for phones cap the pixel ratio, pause rendering when the stage is off screen and scale the viewport-based type for small screens.
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 3D Scroll Scanner Experience
## Goal
Build a full-page, five-viewport-tall scroll story whose star is a **single stylized 3D product model (a beverage-can hero prop)** rendered in Three.js against a clean off-white stage. On load the model **scales up from nothing and floats** (a gentle sine bob) while slowly self-rotating. As you scroll, its **X-rotation is driven by scroll progress** through a Lenis-fed render loop, so it tumbles forward as the page advances. When you reach a **pinned "scanner" section** — an empty rounded rectangle frame with product-ID chip, barcode, and a red "verified" pill — a GSAP `ScrollTrigger.onEnter` handler **plays a scanner-beep sound, spins the model a full 360°, then shrinks the model and the scanner frame to zero** (the product is "scanned away"). Scrolling back up re-grows the frame and restores the model. The whole thing runs on a continuous `requestAnimationFrame` render loop plus two ScrollTriggers.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`three` (npm)**, **`gsap` (npm)** with the **`ScrollTrigger`** plugin, and **`lenis`** for smooth scroll. Import exactly:
```js
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger);
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.