Hover Bloom
Grow watercolor stems and flowers along the pointer path. An accumulating Canvas 2D painting with warm, cool, pink or custom palettes. Pure TSX, no assets or animation dependencies.
npx shadcn@latest add @compronents/hover-bloomInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| spawnOn | "move" | "still" | "move" | Move grows stems along the pointer path. Still spawns only on press, not continuously on hover. |
| growthMode | "upright" | "creep" | "upright" | Mostly upward stems or sideways vines. |
| spawnRate | number | 10 | Stems per second of pointer movement. |
| maxBlooms | number | 80 | Cap on active stem/flower records, not on pigment already painted. |
| resetOnLeave | boolean | false | Clear the painting on pointer leave and enable trail fading. |
| backgroundColor / paperTint | string | "#FFFFFF" / "#F5F5F5" | Canvas background and translucent diagonal paper wash. |
| grid / gridSize / gridDotSize / gridColor | boolean / number / number / string | true / 24 / 1 / "#CCCCCC" | CSS dot grid behind the painted canvas. The opaque painting can cover it. |
| palette | "mixed" | "warm" | "cool" | "pink" | "mixed" | Preset flower hue collection. |
| customPalette | readonly string[] | — | Nonempty valid hex colors override the preset palette. |
| stemHue / stemSaturation / stemLightness | number | 115 / 28 / 38 | Stem HSL values, hue in degrees and saturation/lightness in percent. |
| flowerSaturation / flowerLightness | number | 78 / 66 | Flower saturation and lightness for preset palettes. |
| bloomScale | number | 1 | Scale multiplier for stems, leaves and flowers. |
| blur / watercolor / trailFade | number | 0.6 / 0.8 / 0.08 | Post-process blur in pixels, watercolor strength and reset-mode fade amount. |
| className / style / aria-label | string / CSSProperties / string | — | Container sizing and accessible canvas description. |
None.