LM-26Beauty

Pellis

One drop of serum, filmed at 20,000 frames a second.

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 launch site for PELLIS, a made-up skincare brand and its one product, a milky barrier serum. The first screen sells it before anyone scrolls: the open glass bottle on a pool of serum in a coral studio, its dropper hovering beside it with a drop forming, the headline, what it does, the price and a Shop button. Then the scroll is the shutter: the drop falls, the serum stands up in a crown splash held at 14.2 ms, the rim breaks into droplets and six of them become the ingredients, each its own colour, while the camera rides from one to the next and a label opens for each. The bottle rises out of the serum, the droplets spiral into its neck and it fills, with a camera clock counting milliseconds from impact. Below sit the bottle live in 3D (drag to turn, the size buttons swap it), a reservation for the first batch, eight figures that count up, a texture stroke that sinks in, the full formula, a pinned How to apply walkthrough, what to expect over eight weeks, what it pairs with and an FAQ. Everything is built in code. For skincare, beauty and wellness brands, and any product that comes in a bottle.

How it's made

  1. Say what it is first

    The first screen shows the product and names it: the open bottle, its dropper with a drop forming, the headline, the price and a Shop button. The film is one scroll away, as the reward.

  2. One number runs the film

    The scroll becomes one progress value, and a pure function turns it into the camera, the backdrop, the drop, the crown, the ingredients, the bottle and the camera clock. Scroll back up and the drop un-splashes.

  3. A bottle with real glass

    The bottle is one closed lathe outline (outside, a rounded lip, inside, a heavy base), so the glass has thickness to refract through. The serum inside is clipped at the fill line in world space, with a meniscus on top and the label drawn in the page's own fonts.

  4. A dropper, part by part

    A glass pipette that narrows to a fine tip, the serum drawn up inside it, a collar with 56 pressed ribs and a rubber bulb. The drop is a teardrop that hangs from the tip and rounds off as it falls.

  5. A crown made of functions

    The splash is pure functions of growth and break: a wall with real thickness and a rounded lip, a soft lobe under each of 22 jets, jets lathed as liquid ligaments with a pinched neck, and spray drawn as tiny shaded droplets.

  6. Six droplets, six ingredients

    Six rim droplets swell into the ingredients, each with its own colour and milkiness. The camera rides from one to the next and their labels track them on screen with no re-renders, opening into a card for the one in focus.

  7. A live product shot

    The shop's bottle is the same model on its own small canvas, turned by dragging and slowly by itself, created only near the viewport and drawn only while visible. The size buttons swap the 30 ml bottle for the 15 ml one.

  8. How to apply, played by the scroll

    A pinned section writes straight to an SVG line drawing: the skin patted dry, three drops onto three fingertips, five press points, a thirty second timer, then morning and night.

  9. A frame on a budget

    About 83,000 triangles in the hero and 227,000 at the crown. The film renders only when the scroll moves and sleeps once it's off screen, and phones skip transmission and get a lighter crown and mirror.

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.

  • index.html

  • package.json

  • package-lock.json

  • vite.config.js

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

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

See a real zip, opened

Specs

Stack
Vite 8.2 · React 18.3 · TypeScript 5.9 · three.js 0.182 · React Three Fiber 8.18 · drei 9.122 · GLSL shaders · Procedural geometry
File size
0.6 MB
Triangles
226,946
Browser
Needs WebGL 2: current Chrome, Edge, Firefox and Safari, on desktop and phones. Phones skip transmission (opacity and a rim glow give the same look), with a lighter crown, a smaller mirror and a 1x pixel ratio. Reduced motion stops the shop bottle's idle turn and the counters. Tested in headless Chrome at 1440 x 900 and 390 x 844; Safari, Firefox and real phones weren't part of the tests.
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. 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

Built entirely in code: the glass bottle, the dropper, the drop, the crown splash, the droplets, the serum surface and the studio are generated in the browser, the How to apply face is an original line drawing, and the site loads no model, image or video files (its three typefaces are self-hosted under the SIL Open Font License). Written with an AI coding assistant (Claude Code) under Parallel's direction. PELLIS is a made-up brand, and its formula, figures, results and shipping date are placeholders to replace with a real product's claims.

Buy LM-26 Pellis

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.