Marigolds
Marigolds rise from every edge toward an open patch of sky, drawn in type or dither, swaying in a slow breeze. Point and they part for you, brush through and they swing; click to shake a few petals loose.
Needs: None. A 2D canvas.
Customize
look
sky
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| flowers | number | 34 | How many flowers. Leafy stems fill in around them. |
| look | "ascii" | "dither" | "dither" | Glyphs, or a dither of small square pixels. |
| cell | number | 3 | Size of one cell in px. Leave it unset for 3 with dither and 10 with ascii. |
| color | string | "#f07b16" | The petals' colour; deeper and lighter shades are made from it. |
| leaf | string | "#4f8a2e" | The leaves' and stems' colour. |
| sky | "none" | "drawn" | "natural" | "none" | The sky through the gap: your page with faint cloud wisps, a sky drawn in the same type or dither, or a soft painted sky with drifting cumulus. |
| skyColor | string | "#5d9fd9" | The sky's blue, for drawn and natural skies. |
| breeze | number | 1 | How hard the breeze blows. 0 is still air. |
| speed | number | 1 | Time scale. 0 holds the moment. |
| interactive | boolean | true | Lean away from the cursor, swing when brushed, shed petals on click. Read on the window, so content above keeps its clicks. |
| seed | number | 7 | Picks where each flower grows. |
| opacity | number | 1 | Opacity of the whole field. |
| dpr | number | null | Device pixel ratio to render at. Math.min(devicePixelRatio, 2) when unset. |
| className | string | – | Class on the root element, which fills its parent. |
| style | CSSProperties | – | Style on the root element. Theme it through the --mlui-* variables. |