Still

How it's made

1. 01

   Devices made in code

   A generator builds the display, the phone, four glass cards, the focus ring and the week's bars from millimetre sizes in one file, inside a web worker. Corners are superellipses that meet the straight edges without a kink, and the phone's band is brushed titanium with a generated normal map.

2. 02

   Screens you can use

   The desktop and phone apps are drawn with Canvas 2D onto the screens, measured off the reference pictures. A ray from the pointer finds the spot on the screen, so ticking a task, adding one and starting the 25 minute timer all work.

3. 03

   Drawn exactly as designed

   The app UI and the glow backdrop enter the scene through the exact inverse of the tone curve and grade, so after the lighting and bloom they read pixel for pixel as drawn. Cover glass adds its reflections without dimming the screen under it.

4. 04

   Cards that lift off

   Each dashboard card is a glass slab docked over its spot on the display. The chapters lift one off along the display's normal and grow it, raise a 3D ring out of the focus card and stand seven bars out of the week.

5. 05

   One camera script

   Every section lists the shots it passes through, and the director runs each number on a monotone cubic through them, so the camera keeps moving through a cue and never overshoots. The 22 second walkthrough is the same script on a clock.

6. 06

   Locked to the mockup

   The hero is laid out in mockup pixels times one unit, and the 3D framing follows the same rule, so the devices hold their place under the copy at any window size. Phones get their own layout and framing.

7. 07

   Light first, detail later

   Every device starts on a light model of 55,534 triangles and a governor steps resolution, bloom and reflection up as frames allow; desktops then swap in the detailed model of 158,262. Frames draw only while something moves, and a missing or stalled GPU gets two still pictures instead.

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

• tailwind.config.js

• tailwind.still.cjs

• postcss.config.js

• eslint.config.js

• README.md

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

• CHANGES.md

  Changelog. What changed in each version of the kit.

• 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 · React Router 7.18 · three.js 0.186 · Tailwind CSS 3.4 · Lenis 1.3 (smooth scroll) · JavaScript (JSX) · GLSL shaders · Procedural geometry · Canvas 2D (the app on the screens) · Web Workers (device geometry) · Figtree (self-hosted)

File size

0.5 MB

Triangles

158,262

Browser

Needs WebGL 2 for the 3D. Desktops start on a light model and step up to the detailed one; phones keep the light model and a capped resolution. Without WebGL 2, with software-only rendering, or when the lightest quality still stalls, the stage shows two still pictures of the devices, and every section, link, tab and the pricing switch still work. Reduced motion stops the drift, draws only on change and cuts the reveals. No Base44 app, keys or database needed: the page sends nothing. Tested in headless Chrome with software WebGL at 1440 x 900, 1600 x 900 and 390 x 844, and with WebGL switched off, with no page errors and no sideways scroll; Safari, Firefox, real GPUs and real phones weren't part of the tests.

Released

Oct 2026

Version

1.0.3

From download to client site

1. 01

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

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

   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 devCopyCopied
4. 04

   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