LM-43Fashion

Vael

A luxury down jacket in live 3D over a moving glacier, where every finish brings its own weather.

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.

VAEL opens on a giant wordmark and a silver cropped puffer turning slowly over a glacier that moves: the photo shifts in parallax, cloud and fog drift through the valley, snow blows off the ridges and falls past the jacket in 3D. Drag the jacket round, zoom in, or pick Pearl, Obsidian or Glacier, and a line of light scans down the jacket as the world turns to day, aurora night or storm. Scrolling climbs an altimeter from the valley to the summit, one chapter at a time: Form draws measurements onto the jacket, Shell puts the light on the creased metal under your pointer, Warmth switches to infrared and cuts the jacket open to show the down, and Details pins five close-ups to it. The Collection changes the weather row by row, Philosophy acts its manifesto out in four staged beats (a far ridge seen through a scope, time slowed until you hold it still, a storm, the route up Mont Blanc), and the page ends under the aurora with a journal and a newsletter. A bag with a reservation form, a size guide, search, a collection film that scrolls the page by itself, and a full phone layout come with it. For outerwear and fashion labels, product launches, and studios that want a flagship product page built around one object in real-time 3D.

How it's made

  1. A brief and a mockup

    The brief asked for a clothing brand's product page with a 3D jacket as detailed and interactive as possible, a background that moves, and motion everywhere. The hero was laid out in the mockup's own pixel units, so it holds its proportions at any size.

  2. A jacket written in code

    The body is lofted from superellipse sections, the sleeves are tubes set into it, and the hood is the surface between its face edge and its neck seam, so the opening can never close. It builds in a web worker on the visitor's device: 379,152 triangles on desktop, 135,902 on phones.

  3. Matched by measurement

    The shape was fitted to a reference photo by rendering the jacket with the photo's camera and comparing both outlines row by row, then checked from the side and the back. A side view caught a 52 cm barrel, slimmed to 36 cm.

  4. Surfaces and finishes

    A generated crinkle map, baked ambient occlusion and physical materials with clearcoat and iridescence give three finishes. Small shader patches add a light scan between finishes, an infrared view, glowing seams, a loft and a cutaway that shows the down.

  5. A glacier that moves

    The backdrop photo is read once to map its sky, depth and mist. A shader then adds parallax, a cloud deck, fog banks, spindrift, sun rays, aurora and storm, and the jacket reflects an environment drawn from the same photo.

  6. One stage, four passes

    One WebGL2 canvas sits behind the page: the jacket and 3D snow in HDR, the living photo with the giant words behind the jacket, bloom on highlights only, then one tone curve and one grade so the photo and the 3D read as one image.

  7. The scroll as a camera

    Invisible markers in the page name camera beats; a director blends them and follows the blend with a critically damped spring. Drag to turn, a pointer-steered light, an idle float and hotspot close-ups sit on top.

  8. A set piece per chapter, then the phone

    Each chapter has one interaction tied to what it is about, from the thermometer to the stopped clock. On phones the layout stacks, touch targets grow to 48 px, and the stage drops to a lighter jacket and render tier.

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.

  • models/

    3D models. The product the page is built around, ready to render.

  • tools/

    Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.

  • index.html

  • package.json

  • package-lock.json

  • .npmrc

  • .gitignore

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • eslint.config.js

  • jsconfig.json

  • components.json

  • 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.

  • ASSETS.md

    Asset list. Every image and font in the kit, where it came from and its license.

  • 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.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
React 18.3.1 and React DOM 18.3.1 · three.js 0.171.0 · WebGL2 and hand-written GLSL shaders · Vite 8.2.4 with @vitejs/plugin-react 6.0.5 · React Router DOM 6.30.6 and TanStack React Query 5.90.21 (the app shell) · Hand-written CSS · Tailwind CSS 3.4.19 with PostCSS 8.5.25 and Autoprefixer 10.4.24 (from the project template) · Playwright 1.49.1 (only for the model export script) · Node.js 20.19 or newer (or 22.12 or newer)
File size
27.3 MB
Triangles
379,152
Browser
Chrome and Edge 108 or newer, Firefox 121 or newer and Safari 16 or newer with WebGL2, on desktop and phone (checked in Chrome); without WebGL the page keeps a still backdrop.
Released
Oct 2026
Version
1.0.0

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. 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.

  3. 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 dev

  4. Make 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 code, the shaders, the motion and the 3D jacket (generated in code, with no model file) were written for this site with an AI coding assistant. The hero's layout follows a mockup, and the jacket's shape was matched by measurement to a reference image of a leather puffer; nothing was traced or downloaded, and no logos were copied. The glacier backdrop, the mockup and the jacket references were generated with ChatGPT for this kit by Designed by Parallel, LLC. The fonts are Albert Sans, Geist Mono and Libre Caslon Display under the SIL Open Font License. The prices and product facts are placeholders.

Buy LM-43 Vael

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.