LM-27SaaS & apps

Relay

One request, split by a prism into six colours and joined back into one answer.

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 Relay, a made-up AI startup: one API that sends each part of an AI request to the right model, data and tools, checks the result and joins it back into one answer. The first screen says so before anyone scrolls, beside a glass prism splitting a white beam into a rainbow, and the cursor aims the light: the prism turns, the colours sweep and a readout gives the real angles. Then the scroll follows one customer's refund request through the product. The light races across a gallery wall to six frosted glass panels, one colour and one product each, and the camera visits them in turn while each panel runs its own piece of working UI: models scored and one chosen, sources found, a plan checked off, two API calls answered, four checks passed and a card number blacked out, a trace drawn as a waterfall. The six beams meet in a second prism and leave as one white beam that writes the answer, with a trace bar counting 1,263 ms and $0.0041 along the way. Below sit a Try it console with three recorded runs, the API in TypeScript, Python and cURL, platform rows, pricing with a usage slider, an FAQ and a sign-up. Everything is built in code. For AI and developer-tool startups, APIs, SaaS and any product with a pipeline to explain.

How it's made

  1. One idea, start to finish

    One AI request is really six jobs. The white beam is the request, the prism splits it into six colours, each colour is one product doing one job, and a second prism joins them back into the answer. Every scene comes from that.

  2. Real optics

    A 2D optical bench solves Snell's law at both faces of the prism, with the prism at minimum deviation at rest. Each panel stands where its colour lands, and the beams, the camera, the wall's light and the labels all read the same bench.

  3. Aim the light

    In the hero the cursor turns the prism and tilts the beam, and the bench is solved again every frame: the fan sweeps the way real light would, and a readout shows the true angle of incidence and how far the light bends.

  4. Light on a white page

    Beams are camera-facing shafts with a white-hot core, a glow and a soft halo in normal blending, so colour stays colour on white; white beams carry a faint spectral fringe. All 26 are one instanced draw, with a light front that races out ahead.

  5. A wall the light falls on

    A pale gallery wall stands behind the light. Its shader lays each beam's colour on it as a soft line, glows around the lit panels, casts their soft shadows and lights a pool wherever the camera looks.

  6. Glass panels with working UI

    Frosted glass slabs that blur the wall behind them, lit from the edge where their beam comes in. Each draws a small piece of product UI on a canvas as its stage runs, redrawn only when the stage moves on, while the other panels step back.

  7. One number runs the film

    The scroll becomes one progress value through a pace curve, and a pure function turns it into the camera, the light, the panels, the join, the answer and the trace's milliseconds and dollars. Scroll back and the light goes back into the prism.

  8. A light frame

    About 3,500 triangles in the scene and at most about 6,000 in a frame, in up to 34 draw calls. The film renders only when the scroll moves or the cursor aims, and phones skip transmission.

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.2 MB
Triangles
5,964
Browser
Needs WebGL 2: current Chrome, Edge, Firefox and Safari, on desktop and phones. Phones skip transmission on the glass (opacity and reflections give a thin, bright glass instead), with a 1x pixel ratio and smaller panel canvases; the cursor's aiming is off on touch screens. Reduced motion makes the reveals instant and stops the tape. 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 prisms, the beams and flares, the glass panels and the UI drawn on them, and the gallery wall with the light spilling on it are generated in the browser, 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. Relay is a made-up company: its products, models, figures, plans and prices are placeholders, the Try it console plays recordings, and no real AI provider is named.

Buy LM-27 Relay

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.