Peonies
A site to build a bouquet drawn with ASCII characters, write a card and send it as a link. Whoever opens it watches it bloom.
A bouquet made of characters
The bouquet is not an image: it's a grid of 436 × 178 cells. Each cell has an intensity from 0 to 1 and a colour, and becomes one of seven characters, from lightest to fullest.
Each cell also knows when to appear. On the site that's the animation clock; here it's how far down the page you are.
Paper first
The florist paper behind the bouquet fans out like the flowers, with folded points along the top. In front, two flaps cross over each other the way a florist wraps the stems.
It's all geometry: polygons, shading from the distance to the edge, creases as rays from the tie point.
Stems grow from the bottom
Each flower has a stem that starts at the tie point and climbs to the bloom, opening outwards. Cells appear bottom to top, each with a brief * flash before it settles.
Greenery fills the gaps
Eucalyptus sprigs along the fan, clouds of gypsophila on the edge and a few leaves on the outer stems.
Every leaf clears a thin empty outline around itself, so overlapping shapes stay readable instead of blurring together.
Flowers, back to front
Flowers start scattered inside a fan and push each other apart until they only overlap a little, like stems settling in a hand-tied bouquet. The result is a natural dome, different every time you shuffle.
Then they bloom one at a time, farthest first, each one from the centre outwards.
Twelve flowers, each with its own shape
Peonies with five layers of petals, spiral roses, sunflowers with seeds laid out as in nature, lilies with anthers, hydrangeas made of tiny four-petal florets.
Each petal is darker at its base and along its edge, so two overlapping petals still read as two petals, even when made only of characters.
The bouquet travels inside the link
The sender picks who it's for, the occasion and the recipient's country, writes the card and sends a link. The whole bouquet lives in the link, after the #: no database.
For WhatsApp there's also a short link with a preview image, stored in Cloudflare KV. The bouquet can be downloaded as a GIF too.
And what it means
The same flower means different things in different countries. The site knows the meanings in Italy, the US and UK, France, Japan, China and Russia, with sources.
If a flower could send the wrong message, say a red rose to a friend, it says so and suggests an alternative.
How it's built
In numbers
What I learned
Phone performance matters. At first the bouquet was scaled down on every frame and stuttered on phones; scaling it once and redrawing only the cells that change halved the work.
State can live in the URL. Putting the whole bouquet in the link avoids a database to run; short links are an extra, and the site still works without them.
Release with care. Every version gets a number and a changelog entry, and the CSS and JS links change with each version so nobody is stuck with stale cached files.
Try it
Build a bouquet at peonies.mumu.party (in Italian) and send it to someone. Got an idea for a flower, a color, or something that's off? Leave me a suggestion.
Questions? Write to lorenzo.mustone@gmail.com or use the site chat.