This site uses cookies

Some keep the store working, like sign-in. Meta's pixel helps us measure our ads, and it stays off unless you accept. Cookie policy

Launch price: Lifetime is $229 for every kit and every block until Sun, Nov 15, 11:59 PM PT. Then it's $249.Get Lifetime

LM-57Consumer tech

Lind

A 3D store for a glass water bottle: the bottle, built in code, fills, glows, spins, swings and comes apart over a forest spring you ripple with the cursor, with a full liquid-glass shop behind it.

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 drop falls from a leaf mark while a millilitre counter fills, then a ripple opens onto a glass bottle standing on a mossy stone in a spring pool at dawn, water ribbons spiralling round it; the pool ripples under the cursor with real reflections and caustics on the stone, a drag spins the bottle, a click bursts the water into drops. Scroll and the bottle follows through ten chapters, each with its own layout and a giant word drawn in 3D behind the glass: the lid lifts and water pours in while the scroll bar reads 0 to 750 ml, night falls and a UV-C ring climbs the water on a 60 second gauge, a drag spins a vortex with three recipes that tint the water, the bottle swings from its loop and turns upside down, cold beads run down the glass before a cork sleeve slides on, the bottle comes apart into seven labelled parts with the water hanging as a column, a sideways colour gallery recolours it as each name passes behind it, and the footer ends on the wordmark floating over the pool. Behind it is a whole store in liquid glass: a shop that opens on a pinned sideways showcase with turntable sprites you scrub by hover or drag, a product page with a live 3D studio (orbit, explode, a UV-C cycle, fill, engraving on the glass) beside a four-step builder with a rolling total, a bag drawer with a free-shipping meter that fills like water, a four-step demo checkout with a liquid progress tube and a confirmation with a real order number, plus help with a contact form, a story page and a journal. Forms and checkout send nothing until you connect a form service, and there are no payment fields. Phones get their own layouts and a swipe row in the shop, browsers without WebGL2 get rendered stills of every chapter, reduced motion skips the opening and holds the 3D still, and optional synthesised water sound starts off. For product brands, drink and outdoor makers, and studios selling one hero product that deserves a page people play with.

How it's made

  1. A bottle built from its dimensions

    No model files: real dimensions (500 and 750 ml, a 7.8 cm body, a 3 mm wall) become 2D profiles that are lathed into the glass, sleeve, collar, ribbed lid, seal and UV-C base, with the loop, pins and bosses built alongside. One API sets its colour, size, engraving, recipe and eleven states from fill to explode.

  2. Glass and water that read as real

    The water is the transmissive object with an analytic two-surface refraction, a slosh model and a volume table, so a fill of 0.62 is 62% of the real volume. The glass is a premultiplied shell drawn after it whose shader knows the inner and outer radius, so the wall thickness, edge tint and etched scale are computed per pixel.

  3. A forest you can touch

    Two generated forest plates wrap a two-layer cylinder so they parallax with the camera, lit by a matching CC0 forest HDRI. The pool is a GPU ripple simulation with planar reflection and caustics on a CC0-textured stone; the cursor pushes the water and a click splashes it.

  4. One cue table drives the film

    A director turns the scroll into a chapter and a progress, and one table holds every chapter's camera, bottle state and world grade as monotone keyframes, so nothing overshoots. Giant chapter words are set in 3D where the copy leaves room, in front of or behind the glass.

  5. Liquid glass interface

    Buttons fill with rising water, swatches are glossy drops, the size toggle sloshes, letters ripple, a droplet cursor carries labels and pages change behind a water wipe. Instrument readouts for millilitres, temperature, UV and angle follow the bottle down the page.

  6. A store that prices itself

    The shop, product builder, bag and checkout all read one catalog file; the checkout re-prices every order from it and issues a local order number. Every form goes through one small function that sends nothing until a form endpoint is set.

  7. Tiers, stills and models

    The stage reads the GPU and picks a tier, and a governor trims the pixel ratio when frames run long; without WebGL2 it shows stills rendered from the same scene. The bottle and its parts are also exported to glTF per colourway with a tool in the kit.

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.

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

  • package.json

  • package-lock.json

  • index.html

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • eslint.config.js

  • jsconfig.json

  • .env.example

  • .gitignore

  • .gitattributes

See a real zip, opened

Specs

Stack
Vite 8.2.4 · React 19.2.8 · TanStack Router 1.170.41 · three.js 0.171.0 · zod 4.6.7 · Tailwind CSS 3.4.19 · Zodiak and Author (ITF Free Font License; not included · `npm run fonts` downloads them from Fontshare) and DM Mono (self-hosted · OFL)
File size
17.8 MB
Triangles
789,808
Browser
Tested in desktop Chrome (headless, with a GPU) at 1440 x 900 and at phone size 390 x 844 with touch, without WebGL and with reduced motion, on every page, including the full checkout, contact and newsletter flows. Needs WebGL2 for the 3D and falls back to rendered stills without it. Not tested on real phones, in Safari or in Firefox.
Released
Nov 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

LIND and the Spring Bottle are invented for the kit; every word, product, price and journal post was written for it, and the layout started from a mockup the studio was given as its brief. The bottle and every part of it are built in code, and the stone, pool, light and chapter words too. The two forest backdrop plates and the two leaf cut-outs were generated with Higgsfield (Nano Banana); the fallback stills and shop renders were rendered from the site's own 3D. The lighting HDRI and the two rock texture sets are from Poly Haven under CC0. Zodiak and Author are Indian Type Foundry fonts under the ITF Free Font License, which does not allow passing the files on, so they are not in the kit: npm run fonts downloads the buyer's own copy from Fontshare. DM Mono is included under the SIL Open Font License. No stock images and no people. Written with an AI coding assistant (Claude Code) under Parallel's direction.

Buy LM-57 Lind

Single kit

Price: $49once

By buying you agree to the Terms and License.

Included with Annual and Lifetime.

Or every kit for life, $229.

Launch price until Sun, Nov 15. Then $249.