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.
What is Blooming Flower?
Premium WebGL point-cloud flower with parametric petal surface, hover bloom gate, swaying stem, and weather animation.
Blooming Flower at a glance
- Category
- Interactive Backgrounds
- Pricing
- Pro component
- Libraries
- React and Motion
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 13
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Blooming Flower works
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 head and stem share one sway expression so the flower cannot drift off its stalk.
Technical information for Blooming Flower
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React and Motion |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | WebGL shaders, HTML canvas, point sprites, blend modes |
| State change | closed bud (idle) to fully bloomed (hover) |
| Props | 13 configurable |
| Usage example | Included on this page |
What Blooming Flower requires
- WebGL vertex/fragment shaders
- Parametric petal surface math
- motion/react for bloom animation
- Additive blending
- ResizeObserver
How to use Blooming Flower
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <BloomingFlower /> in your page using that import path.
- Pass any of the 13 documented props to change colours, density, speed or behaviour.
Blooming Flower questions
What is Blooming Flower?
Premium WebGL point-cloud flower with parametric petal surface, hover bloom gate, swaying stem, and weather animation.
How does Blooming Flower work?
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 head and stem share one sway expression so the flower cannot drift off its stalk.
Which category does Blooming Flower belong to?
Blooming Flower is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the background prop do in Blooming Flower?
CSS background color behind the canvas. It defaults to "#07060C".
What does the baseColor prop do in Blooming Flower?
Primary petal color. It defaults to "#C4327E".
Is Blooming Flower free to use?
Blooming Flower is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Blooming Flower use?
Blooming Flower uses React and Motion and is styled with Tailwind CSS.
What does Blooming Flower need to run?
Blooming Flower needs WebGL vertex/fragment shaders, Parametric petal surface math, motion/react for bloom animation and Additive blending.