Word BloomMotion · ZainSpire ← Library

Canvas animation · generative flowers · wind

Type a word.
It grows a flower.

No two flowers here look the same, because each one is grown from a word. Every letter becomes a petal: vowels grow round petals, consonants grow pointed ones, and later letters in the alphabet grow longer. Plant your name, move the pointer to blow wind across the garden, then save it as an image.

Tap the ground to plant a random word · move to make wind

HTML · CSS · JavaScript · no librariesDownload the code ↓

How a word becomes a flower

Letters are the recipe

The number of petals is the number of letters. Each letter sets its own petal: a, e, i, o and u make round petals, the rest make pointed ones, and its place in the alphabet sets the length. The stem height and the leaves come from the word too, so the same word always grows the same flower.

How it grows

One timeline per flower

Each flower has its own clock from 0 to 1. The stem draws first, then the leaves unfold, the bud swells and the petals open one by one with a little overshoot. Everything is drawn on one canvas in a single animation loop.

How the wind works

Your pointer is the weather

The faster you move the pointer sideways, the harder the wind blows. Tall stems bend more than short ones, and each flower sways at its own pace, so the garden never moves in lockstep. Reduced motion settings keep it still.