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-52Consumer tech

Kairos

A 3D store for gaming earbuds where black sand on a white plate draws every sound you play.

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 complete store for KAIROS ONE, an invented pair of gaming earbuds, built in code and drawn live with three.js. The earbuds and their case stand on a white plate covered in black sand. Sound shakes the plate and the sand draws it: rings, lobes and lace that change with every note, the way sand does on a real vibrating plate. One camera moves through eight chapters as the visitor scrolls. In the hero a click rings the plate and the sand jumps to a new figure. In the latency chapter one bud sits inside a dial: drag the delay from 0 to 250 ms, press Fire, and the shot arrives exactly that late. In the sound chapter the bud comes apart into its drivers, cell and board, each with a label that follows it, while a scrubber runs from 20 Hz to 40 kHz and the plate redraws the figure for each note. In the position chapter the two buds stand as a head and you drag footsteps, a reload or a voice round them in 3D sound. Shut the case and the buds fly home, the lid snaps and five lamps count up. The shop has a turntable you drag, three colourways that repaint the product, add-ons, a bag that remembers itself and a checkout you point at your own. At the end the product lifts away and the sand writes the mark, then the name. Every sound is synthesized in the browser and stays off until the visitor asks for it. The earbuds and case are modelled in code and the kit ships the code that builds them, so the shape can change. Phones get their own camera layout and a lighter tier, and a browser without WebGL 2 gets the same page as a plain working store. For earbuds, headphones, speakers, gaming gear and any audio or consumer tech product that should feel premium.

How it's made

  1. Sound you can see

    The brief was a white, monochrome gaming earbud store with real depth. The idea that carries it is a physical one: sand on a vibrating plate collects on the lines that stay still. Every demo makes a sound, and every sound moves the sand.

  2. Earbuds and a case modelled in code

    Each part is a distance field: a head, a stem grown from it in one skin, a flat blade, a chevron seam. The case's sockets are cut from the buds' own shape, so the fit is exact. A bake step turns the fields into two compressed model files, one full and one light, with soft contact shading baked in.

  3. A quarter of a million grains

    The sand is a simulation on the graphics card. Each grain's position lives in a texture and a small shader moves it every frame: grains on a moving part of the plate hop, grains on a still line stay. Rings from clicks and footsteps kick them as they pass, and at the end the still lines are the mark and the name.

  4. One table for the camera

    The page reports one number for where the scroll is. A single table of rows says where the camera, the case, each bud and the sand are at each point, with separate values for phones. Everything between rows is eased and follows the scroll through one spring.

  5. Demos you can play

    A latency dial that schedules the flash and the sound on the audio clock, a frequency scrubber with a test tone, and a 3D sound source you drag round a head made of the two buds. All of it is synthesized with the Web Audio API. There are no audio files.

  6. A store on top

    React and plain CSS. Three colourways repaint the live product, the bag keeps itself in the browser and hands a list of SKUs to your checkout, and the newsletter form posts to your own address. With neither set it runs as a labelled demo store.

  7. Phones, speed and a fallback

    Two quality tiers and a governor that steps down when frames run slow, 13 to 16 shader programs, one model file per tier. Without WebGL 2 the page turns into a plain readable store with a still of the hero.

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/

  • lab/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.ts

  • tsconfig.json

  • .env.example

  • .gitignore

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

  • 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.3 · React 18.3 · TypeScript 5.9 · three.js 0.171 · GLSL shaders · GPU sand simulation on float textures · Product modelled in code and baked to meshopt GLB · Web Audio API with synthesized sound and an HRTF panner · Plain CSS · Orbitron and Exo 2 (self-hosted)
File size
2.2 MB
Triangles
363,379
Browser
Needs WebGL 2 with float render targets: current Chrome, Edge, Firefox and Safari on desktop and phones. The site starts on a full or a light tier and a governor steps down when frames run long. Without WebGL 2, or on a machine too slow to draw it, the page becomes a plain store with a still of the hero, every chapter readable and a working bag. Sound needs a click first and is off by default. Tested from the build in headless Chromium with software rendering at 1440 x 900 and 390 x 844: every control driven, no errors, no failed or outside requests, no sideways scroll. Not yet tested on a real GPU, in Safari or Firefox, or on real phones, and nobody has listened to the sounds yet.
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

Design, copy, motion, the product model, the sound and the code by Designed by Parallel, LLC, built for this kit. The look (white, monochrome, a gaming earbud store) followed a reference image; nothing from it was traced, sampled or copied, and the name, the mark, the product design, the copy and the UI are new. KAIROS ONE is an invented product: the earbuds and case are an original design modelled in code, not a scan or a copy of a real product, and every figure and price on the page is a placeholder. No trademark search has been run on the name, so rename it for your client. The two fonts are self-hosted under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction. No real people, photos, video, audio recordings or AI-generated media.

Buy LM-52 Kairos

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.