LM-16Fashion

Thaw

A sneaker drop where scrolling melts the shoe out of ice.

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 release site for THAW 01, a made-up sneaker set in a block of clear ice. Scrolling is heat: a readout climbs from -18 °C to +4 °C while the ice frosts over, cracks, sheds chunks, melts into a puddle and splits into four slabs, then the pair lifts free and visitors can drag to spin it and pick a size. Below the film come a manifesto that thaws word by word, a six-angle lookbook, a live 3D anatomy view that turns the shoe to each of four parts, a pinned cold-chain chart, a spec sheet with a size converter, a release countdown with a raffle entry kept in the browser, an FAQ and an outro. The ice, meltwater, light and 3D headline are built in code and drawn live with three.js; the shoe is one .glb model, and the page images are renders baked from it. For sneaker and streetwear brands, and anyone running a limited drop.

How it's made

  1. One number runs the film

    An 820vh section pins the stage, and a pace curve with five holds turns the scroll into one progress value across five acts: frozen, crack, melt, free and drop. A pure function turns that value into every frame, so scrolling back puts the ice back together, and ?record=1 plays the whole film in 9 seconds for screen-recorded reels.

  2. One box becomes the block

    The ice is one subdivided box of about 4,500 vertices, reshaped on the CPU only when progress moves. It gets 14 chipped corners, loses 6 chunks on solved paths (launch, one bounce, slide), melts onto a shell around the shoe from the top down, then breaks into four jagged slabs that tip into the puddle.

  3. Frost and cracks in the shader

    Frost, a cellular crack network racing out from an 11-ray impact star, the four split seams and wet streaks are layered onto drei's transmission material (IOR 1.31) by chaining its shader. Every pattern is noise of each vertex's rest position, so it sticks to the ice as it deforms.

  4. Everything refracts

    The 3D headline sits behind the block, so the refraction pass bends and splits the word. 150 trapped bubbles in seven trails, four fracture sheets drawn on 256 px canvases, 18 drips riding the melting surface and a procedural caustic patch on the floor fill out the block.

  5. A shoe from one texture

    The model ships a single colour texture. At load a Sobel pass on its luminance builds a detail normal map so stitching and lugs catch light, and a physical material adds a nubuck sheen, a wet clearcoat during the melt and a burnt-orange rim once it breaks free.

  6. The page below the film

    A second canvas, created only when the anatomy section comes near, turns the shoe to four posed parts as each step crosses a focus line. One shared scroll loop drives the pinned manifesto, the horizontal lookbook and the cold-chain section, whose background follows the temperature from -78 °C to +4 °C.

  7. Phones and reduced motion

    Phones get a 1x pixel ratio, a coarser ice mesh, a 3-sample 512 px transmission pass with no back faces and half the bubbles; desktops cap at 1.5x. The canvas draws only when progress moves and sleeps off screen, and with reduced motion it renders two stills once and crossfades them halfway through.

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.

  • model-src/

  • scripts/

  • base44/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.ts

  • tsconfig.json

  • README.md

    Start here. What's inside and how to run it.

  • RECREATE.md

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

  • 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
Vite 8.3 · React 19.3 · TypeScript 5.9 · three.js 0.182 · React Three Fiber 9.8 · drei 10.7 · GLSL shaders · Self-hosted Big Shoulders Display / JetBrains Mono / Instrument Serif
File size
2.2 MB
Triangles
34,060
Load time
1.5 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2. Tested in Chrome on desktop at 1440 x 900; Safari, Firefox and real phones not tested yet.
Released
Oct 2026
Version
1.0.1

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.

Unlimited client projects, one person per license, no resale. Read the license

The ice, its frost, cracks and seams, the chunks, drips, bubbles, puddle, caustics, studio light and 3D headline are generated in code. The shoe is one .glb model (an AI-generated mesh with one baked colour texture), the page images are renders baked from it, and the three typefaces are self-hosted under the SIL Open Font License.

Buy LM-16 Thaw

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.