Stamen

How it's made

1. 01

   Petals bent on the GPU

   Each petal is one flat strip, 16 by 24 quads, that the vertex shader cups across, curls along and ruffles at the edge from four numbers per petal per frame. The same bend runs in the shadow pass, so the shadows on the wall are the real, opening shapes.

2. 02

   Six species as recipes

   Peony (88 petals), garden rose (62), ranunculus (84), tulip, anemone and cosmos are recipes: petal count, a golden-angle spiral or rings, outline, size, how far each petal tips out closed and open, and when it opens, outer petals first, sepals peeling back.

3. 03

   Tissue you can see

   Veins and a crinkle in relief, a velvet surface, a paler underside, edges that glow when the sun is behind them, and color pooling unevenly. The finest veins fade as they get smaller than a pixel, so nothing glitters.

4. 04

   A hand-tied bouquet

   Heads spiral on a dome like a florist's bunch, on stems that bend on the GPU so the heads sway and lean toward the window, with serrated leaves, eucalyptus and a speckled stoneware vase turned on a lathe.

5. 05

   The scroll is the clock

   The sun is a spotlight carrying the window's panes, crossing the wall with the bouquet's shadow in it, and nights fall plum under a cool moon. Day one 07:24 to day three 16:42 is read straight off the scroll, so time runs evenly however fast you go.

6. 06

   Petals in the wind

   At full bloom every petal leaves on its own flight toward the lens and down the wind, and the room gives way to magenta. The flights are worked out from the scroll, so scrolling back flies every petal home.

7. 07

   A close-up that holds up

   The anemone in the close-up has its own finer petals, a white eye and 150 stamens round a knobbly boss, labeled like a botanical plate as the camera pushes in.

8. 08

   A bouquet you build

   Size, color story, paper wrap or the stoneware vase, plan and card: the 3D bouquet rebuilds, recolors and rewraps live. The bag lives in the browser, and checkout is one function to connect to Stripe or Shopify.

9. 09

   A frame budget

   About 1.35 million triangles a frame on a laptop with the shadow pass, 60 fps with the CPU slowed 4x. The lights never leave the scene and the shadow map only redraws by day, so nothing recompiles mid-scroll; phones get lighter petals and stems.

In this kit

• src/

  Full source. The complete site as its own project, ready to run.

• tools/

  Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.

• index.html

• package.json

• package-lock.json

• vite.config.ts

• tsconfig.json

• tailwind.config.js

• postcss.config.js

• README.md

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

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

• CHANGES.md

  Changelog. What changed in each version of the kit.

• 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 · three.js 0.186 · TypeScript 5.9 · Tailwind CSS 3.4 · Lenis 1.3 · GLSL shaders · Procedural geometry

File size

0.1 MB

Triangles

1,346,552

Browser

Needs WebGL 2: current Chrome, Edge, Firefox and Safari, on desktop and phones. Phones get lighter petals, leaves and stems, a smaller shadow map and a 1.25 pixel-ratio cap. Reduced motion calms the sway and the drifting petals. Tested in headless Chromium 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. 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.

Unlimited client projects, one person per license, no resale. Read the license