Primrose — a flower workshop
A flower workshop landing with a living background: petals scatter away from the cursor, the grass parts under your hand, and a click makes a flower open.
Open the project
Move the cursor across the background and click an empty spot. The palette can be changed in the "Palette" section; language and background motion live in the header.
Gallery
-
The catalogue bouquets are assembled from the same code-drawn flowers as the rest of the site -
The builder: flowers go in one at a time, the vase rearranges the fan, the price recalculates at once -
About the project
A single-page site for an imaginary workshop where the background is not a picture but four systems on one canvas: falling petals, glowing pollen, grass along the bottom edge and a bloom on click. Petals are pushed away by the cursor, pollen is drawn towards it, and scrolling adds a gust of wind. Three mood palettes repaint the layout and the background at once — the colours live in CSS variables, and the canvas reads them from there.
What is inside
- The background responds to the person: the cursor pushes petals aside and parts the grass, pollen gathers around your hand, a sharp scroll raises the wind
- A bouquet builder: flowers are added one at a time, the fan in the vase rearranges smoothly, the price updates live, and the finished mix is carried into the order form
- Eight flower varieties are drawn in code — not a single raster image, which is what makes repainting the palette free
- A "calm the motion" button next to the language switch: the background freezes on one frame, the choice is remembered and turns itself on for the system setting
- Both language versions in full, prices included as separate amounts for roubles and dollars