Clearcoat
A race red car, detailed by your scroll: snow foam, correction, ceramic, rain.
The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.
A race red coupe sits on a black mirror floor under a honeycomb of LED tubes, and the scroll runs the detail: road film, a blanket of pink snow foam, a top-down rinse, a two-step correction where a scan line wipes the swirls off the door, an oil-slick ceramic flash, and a water test where rain beads and rolls off. The tubes switch between white and red at every step and the type switches with them, while a gloss meter climbs from 38 to 94 GU. The yellow running lights snake on as the page opens. Below the film sit six services as rows that preselect the booking form, a four-step process, a before and after slider rendered from the live scene, a booking form with a live estimate, an FAQ and the studio's details. Everything is drawn live with three.js, with no video. For detailers, ceramic coating and PPF installers, and car care brands.
How it's made
One number runs the detail
The scroll position becomes one progress value, and a single pure function turns it into the camera, the lighting mood, the foam, the polish and the rain. Scroll back up and the car un-washes.
A car built in code
The coupe is our own design, written as numbers: one smooth body lofted from profiles and cut into panels with real shut lines, then lamps, wheels, brakes and a cabin made from outlines, sweeps and turned profiles. It ships as a 0.7 MB model file of about 71,000 triangles, with no maker's badge or lettering anywhere on it.
A garage made of light
The ceiling is one instanced honeycomb of LED tubes, drawn a second time into a live reflection map so the paint and the glass carry it. The floor is a mirror with its own blur and fade, and four lighting moods switch with a short strobe, like a bank of tubes.
Paint as a shader
A physical base coat and clear coat, with the detailing layered on in world space: road film that comes off at the rinse line, buffer swirls that only show where the tubes reflect, rivulets, an oil-slick ceramic band and hemispherical water beads with a glint each.
Foam that never cracks
Every exterior panel gets a twin pushed out along a smooth ellipsoid around the body, so the pink blanket never splits at the model's hard edges. It sweeps on front to back, sags as it dwells and rinses off roof to sills, with a cannon stream that runs backwards when you scroll back.
Running lights from the car's own lamps
Each front lamp has two rows of LED dashes, mapped into two rectangles of one small texture. Those glow yellow up to a fill line, so the upper row snakes on from the grille outward and the lower row runs back towards the grille, with soft glow points standing in for bloom.
Before and after from the same scene
Once the page loads, the same door panel is rendered twice, swirled and then corrected, in one task the visitor never sees, and handed to the comparison slider.
A frame on a budget
The main pass draws about 99,000 triangles, and 220,000 at the height of the foam. The canvas renders only when the scroll moves and sleeps once the film is off screen, and phones get a smaller reflection map, a lighter mirror and fewer particles.
Ready to be someone's shop
Packages, prices, copy, moods and camera paths live in one config file. As shipped, the booking form opens a prefilled email to the studio; set one endpoint and it posts each request as JSON to your form service or API instead. A prep script swaps in your own car.
In this kit
src/
Full source. The complete site as its own project, ready to run.
public/
Media and assets. The images, clips, textures and icons the page loads.
scripts/
README.md
Start here. What's inside and how to run it.
HOW-IT-WAS-MADE.md
How it was made. The build step by step, and a recipe to make your own.
ADAPT.md
Adaptation prompt. Fits the kit to your client's brand in an AI builder.
RESKIN.md
Re-skin guide. Colors, type, copy and media, changed file by file.
CHANGES.md
Changelog. What changed in each version of the kit.
PROVENANCE.md
Provenance. Where every model, texture and image came from.
THIRD_PARTY.md
Open-source credits. Every library and font inside, with its license.
LICENSE.md
Commercial license. Unlimited client projects, one person per license, no resale.
Specs
- Stack
- Vite 8.2 · React 18.3 · TypeScript 5.9 · three.js 0.182 · React Three Fiber 8.18 · drei 9.122 · Custom GLSL shaders
- File size
- 0.7 MB
- Triangles
- 220,170
- Browser
- Needs WebGL 2. Tested in Chrome on desktop and at phone size.
- Released
- Oct 2026
- Version
- 1.1.0
From download to client site
Buy it, or get it with a plan
Buy this kit on its own, or get every kit in the collection with a plan.
Download the zip
It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.
Run it
Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.
npm install && npm run devMake it your client's
Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.
Unlimited client projects, one person per license, no resale. Read the license
The car is our own design: a two-door sports coupe built entirely in code by Designed by Parallel, LLC, then exported to the kit's model file. No model was downloaded, scanned or traced, no real car was referenced, and it carries no maker's badge, name or lettering. The garage, paint, foam, water, running lights and type are original too, built in code. Fonts and code libraries are listed with their licenses in THIRD_PARTY.md.
Buy LM-03 Clearcoat
Single kit
Price: $59once
Included with Monthly, Annual and Lifetime.