Selling 3D with a page that stutters

A 3D scene that reacts to scroll, and the email kept before checkout.

A run through the landing page, demo data: the whole page scrolled top to bottom, the 3D scene reacting to scroll, the light panel covering it, the email typed in the offer card, the checkout page that keeps it, and back to the top.
Landing page hero, demo data: the Three.js scene behind the title, the community offer and its email field.
The page scrolled, demo data: the scene has turned and the camera orbited, and the light panel rises over it.
Offer card, demo data: the email typed in the sign-up field before anything is paid.
Checkout page, demo data: the email kept from the previous step, the Stripe payment button never clicked.
Second funnel, demo data: the done-for-you 3D site page, same scene, its own offer and button.

The problem

A 3D-website service has to prove itself on its own landing page, without a heavy video that slows everything down.

What I built

A hand-written Three.js scene with a custom shader, 320 particles and a camera driven by scroll speed, plus two funnels ($9 community, $800 service) that save the email before redirecting to Stripe.

Technical details

CSP, HSTS and Permissions-Policy versioned as infrastructure as code
Duplicate sign-up handled as an idempotent success
Pixel ratio capped at 2, canvas sized by ResizeObserver

Stack

Three.js
GLSL
GSAP + Lenis
Supabase
Stripe
Render

The result

The scene pauses when the tab is hidden or the hero is off screen, and leads are protected by row-level security, a honeypot and rate limiting.

A similar project in mind?

Tell me about your business and when you need it. You get a proposal by email.

I want this system

More projects

Automation & data · Product search serverThe customer describes the product in their own wordsView the project