How it works

The stem goes first. It climbs out of the soil a cell at a time, and the leaves join as the stem reaches them, one side then the other. Only then does the head begin.

The head grows from its centre out. A cell’s place in the queue is its distance from the middle, so the yellow eye closes first and the lilac tips land last, the way a flower opens.

In the garden a stitch lands every 26 milliseconds, and a whole flower never takes more than 900, so nothing blooms slower than a breath. Each stitch plays a note: low, muted plucks up the stem, brighter ones for the petals, all in D major pentatonic so no tap is ever out of tune.

How it works

Same rules as every flower: stem from the soil up, leaves as it passes them, then the head from its centre out. The head is a chart drawn by hand, ten rows of letters, one letter per cell, like a cross-stitch pattern written in code.

The letters are roles, not colours: a petal, the crease where two petals meet, the deep fold between them. Each rose comes in a few colourways, and the garden picks whichever stands apart from the flowers beside it.

The same seed always grows the same plant. The greens, stem and leaves draw on it first and the head after, so a rose keeps its stem when you tap it and it turns into the next of its kind.

How it works

One fragment shader draws all four stages. A bloom opens when the order is confirmed, a glowing box bobs once it’s packed, a comet runs the route to a pin when it ships, and a bouquet sits at different depths of focus when it’s home.

Under each scene is a grainy colour field in the stage’s accent, a faint iridescent edge, and a light leak that slides as you tilt. A cosine palette keeps the colour smooth, and dither on top stops the gradients banding. Move your pointer over it to tilt the light.

A status label says “shipped”. The pass shows it: You’re in, All packed, On its way, It’s home.

The shaders were written for the drop pass, then turned up around the rest of the store. The full write-up of how they were made lives on the prototype site.

How it works

The glyphs are printed like a riso: paper tooth, a faint ink-starved band, then grain. Move your pointer over it to tilt the light.

These started with the drop pass and spread. The beta pass got riso badges.

How it works

The asterisk’s halo is drawn as 2px ordered-dither dots. Move your pointer over it to tilt the light.

These started with the drop pass and spread. The beta pass got a dithered asterisk.

How it works

It’s one shell that morphs between three shapes. At the top of the page it’s a bar. Further down it shrinks to a pill. Tap a tab and it opens into a panel: Shop, Account or More.

Each change is a morph on a spring, not a swap. This is the real component, built from the store and running in a frame. The notes around it are measured from the live dock.

On WhyClub the navigation lives at the bottom of the screen, where your thumb already is.

Instead of a header and a separate menu, it’s one thing that stays small while you browse and opens up when you ask it to. The tour walks it through each shape until you tap it.