Blooming Flower

Blooming Flower is an interactive background in the UI HUB interactive backgrounds collection. A WebGL point-cloud flower of 60k-100k point sprites that opens on hover and closes to a bud when the pointer leaves. Three kinds of points share one buffer: petals on a parametric surface, stamens in a dome, and a swaying tapered stem.

The component is driven by 13 documented props (background, baseColor, stemColor, accentColor, accentMix, density and 7 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: WebGL vertex/fragment shaders; Parametric petal surface math; motion/react for bloom animation.

Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.