
Toile
A clothing drop in live 3D: six garments on a chrome rail in a daylight studio, each one pulled, turned, opened and taken apart into its pattern.
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.
The page opens in a white daylight photo studio: window light and swaying leaf shadows on a curved wall, a plant in a plaster pot, and a chrome rail on casters with six garments on hangers. Point along the rail and each piece swings forward while its neighbours make room; drag to turn it a full circle; click and the camera follows it off the rail to stand beside the buy panel, with colourways, sizes, stock, a size sheet that draws the measurements on the garment, and a bag. Scroll on and the garment wipes from cloth to calico with the cutter's red pencil marks (The toile), then flies apart into its real pattern pieces, flat at true size on pattern paper (The pattern), then pairs it with other pieces. Back on the home page come the house's manifesto, an index of the drop and the next drop: a second rail under a white dust sheet you can grab and lift, a live countdown and a notify form. Checkout ends on an order page drawn as a bundle ticket; forms send nothing until you connect a form service. The garments are drafted as flat patterns in code, cloth-simulated onto their hangers and baked to .glb, and the tool that made them is in the kit, so new pieces can be drawn and baked. Phones get their own framing and tap controls, browsers without WebGL get stills and line drawings, and reduced motion stills the swing and the camera. For clothing labels, designers and studios that sell in drops and want a store people play with.
How it's made
Garments drafted flat
Each garment is a technical flat written in centimetres: named corners, seams, folds, hems and ribs, and pieces as loops of edges on a front and a back layer. Fabrics carry their weight and stiffness. The drawing is meshed on a fine lattice and the shared edges are stitched into seams.
Draped by a cloth simulation
An XPBD cloth solver with self collision lets each garment fall from flat onto its hanger, offline in Node. The bake adds smooth normals, ambient occlusion, the distance to every seam and opening, and each piece's place on the pattern sheet, then writes one meshopt-compressed .glb per garment.
One fabric shader
A patched physical material draws jersey, poplin, fleece, leather, denim, twill and rib at real scale, with stitching along the baked seams. The same shader wipes the garment to calico for The toile and flies its pieces onto the pattern paper for The pattern.
A daylight studio in code
The cyclorama, chrome rail, hangers and pot are built in code. The key light is a window projected by a spotlight, with tree leaves swaying in it, and a CC0 studio light probe fills the chrome.
The rail and the camera
Every garment swings on a damped pendulum. Pointing pulls the nearest piece forward, a drag turns it, a click opens it and the camera follows it off the rail; on phones a tap pulls and the next tap opens.
The next drop under a sheet
A real-time cotton sheet, simulated on a 46 by 42 grid, lies over a second rail of garments. It settles in small slices before it shows, and visitors can grab and lift it.
Shop, fallbacks and tiers
The buy panel, size sheet, bag, checkout and order page run on a small shared store with hash routes, so any static host works. Three quality tiers step down on slow frames, and browsers without WebGL get stills of the rail and drawings of each piece.
In this kit
.env.example
.gitignore
ADAPT.md
Adaptation prompt. Fits the kit to your client's brand in an AI builder.
ASSETS.md
Asset list. Every image and font in the kit, where it came from and its license.
CHANGES.md
Changelog. What changed in each version of the kit.
HOW-IT-WAS-MADE.md
How it was made. The build step by step, and a recipe to make your own.
LICENSE.md
Commercial license. Unlimited client projects, one person per license, no resale.
PROVENANCE.md
Provenance. Where every model, texture and image came from.
README.md
Start here. What's inside and how to run it.
RESKIN.md
Re-skin guide. Colors, type, copy and media, changed file by file.
THIRD_PARTY.md
Open-source credits. Every library and font inside, with its license.
eslint.config.js
index.html
models/
3D models. The product the page is built around, ready to render.
package-lock.json
package.json
public/
Media and assets. The images, clips, textures and icons the page loads.
scripts/
src/
Full source. The complete site as its own project, ready to run.
tools/
Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.
vite.config.js
Specs
- Stack
- Vite 8.2.4 · React 18.3.1 · three.js 0.171.0 · JavaScript (no TypeScript) · glTF Transform 4.5.1 (garment bake) · meshoptimizer 0.22.0 (garment bake) · three-mesh-bvh 0.8.3 (garment bake)
- File size
- 8.4 MB
- Triangles
- 1,055,770
- Browser
- Tested in desktop Chrome on Windows with a GPU at 1440 x 900, at 390 x 844 as a touch phone, with WebGL turned off and with reduced motion. Needs WebGL2 for the 3D; without it the page shows stills and drawings. Not checked on real phones, in Safari or in Firefox.
- Released
- Nov 2026
- Version
- 1.0.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
TOILE is an invented label; the brand, words, prices and products were written for this kit. The six garments are made in code: drafted as flat patterns, cloth-simulated onto hangers and baked by the tool in the kit. The studio, rail, hangers, light and pattern paper are drawn in code at runtime. The only outside assets are a plant model and a studio light probe from Poly Haven, both CC0. No AI-generated images, stock photos or video. Fonts are Hubot Sans, Host Grotesk and IBM Plex Mono, self-hosted under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction.
Buy LM-55 Toile
Single kit
Price: $49once
Included with Annual and Lifetime.
Pay on Stripe. You don't need an account to pay.
Your receipt comes by email, and the kit is saved under the email you paid with.
Download it from your library. New here? Make your account with that same email. Up to 10 downloads of each kit a day; each link works for 10 minutes.
Haven't downloaded anything yet? Email us within 14 days for a full refund.
Launch price until Sun, Nov 15. Then $249.