$ open peonies.mumu.party

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.

:-=+*#%
intensity 01
ITPeony: romantic love and affection, common in bridal bouquets.
JPBotan (牡丹): courage.
CNMǔdan, the “king of flowers”: prosperity, wealth and honour.
01 / 08

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.

02 / 08

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.

03 / 08

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.

04 / 08

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.

05 / 08

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.

06 / 08

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.

07 / 08

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.

08 / 08

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

PageHTML, CSS and JavaScript, no framework, no build step
DrawingCanvas 2D on a character grid
HostingCloudflare Pages, deployed from GitHub
Short linksCloudflare Pages Functions + KV, expire after a year
GIFgenerated in the browser with gifenc
Releaseschangelog with MAJOR.minor.patch numbering

In numbers

12flower types
12colours
15flowers max per bouquet
6countries with meanings
0databases for full links

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.