Star Burst
Star Burst is a website background in the UI HUB website backgrounds collection. A radial flower-burst on Canvas 2D: starCount jittered spokes each launch 15 pulses that fly outward, drawn additively as rotated streak sprites (lighter compositing) so the trails fan into a star flower.
The component is driven by 10 documented props (speed, starCount, color, centerX, centerY, starSize and 4 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D; requestAnimationFrame loop; ResizeObserver.
Preview the website background in the browser above, copy the source, and paste it into your project. Website Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Star Burst?
Additive canvas flower-burst of twinkling star streaks blooming from a glowing core.
Star Burst at a glance
- Category
- Website Backgrounds
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 10
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Star Burst works
A radial flower-burst on Canvas 2D: starCount jittered spokes each launch 15 pulses that fly outward, drawn additively as rotated streak sprites (lighter compositing) so the trails fan into a star flower. Particles twinkle on a per-phase sine, fade at spawn/trail end, and respawn behind the core; a radial gradient center bloom scales with flowerIntensity/starSize. Each frame clears to black so it sits over any page. DPR-capped at 2; export/thumbnail modes render 60 static frames.
Technical information for Star Burst
| Category | Website Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, blend modes, CSS gradients |
| State change | concealed core with faint bloom to full radial flower of twinkling streaks |
| Props | 10 configurable |
| Usage example | Included on this page |
What Star Burst requires
- Canvas 2D
- requestAnimationFrame loop
- ResizeObserver
- seeded rng
- additive compositing
- rotated streak sprites
- twinkle/fade envelope
- devicePixelRatio cap
How to use Star Burst
- 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 <StarBurst /> in your page using that import path.
- Pass any of the 10 documented props to change colours, density, speed or behaviour.
Star Burst questions
What is Star Burst?
Additive canvas flower-burst of twinkling star streaks blooming from a glowing core.
How does Star Burst work?
A radial flower-burst on Canvas 2D: starCount jittered spokes each launch 15 pulses that fly outward, drawn additively as rotated streak sprites (lighter compositing) so the trails fan into a star flower. Particles twinkle on a per-phase sine, fade at spawn/trail end, and respawn behind the core; a radial gradient center bloom scales with flowerIntensity/starSize. Each frame clears to black so it sits over any page. DPR-capped at 2; export/thumbnail modes render 60 static frames.
Which category does Star Burst belong to?
Star Burst is listed under Website Backgrounds in the UI HUB catalog. Full-bleed background treatments for landing pages and sections: gradient meshes, canvas particle systems, grid and beam patterns, noise and scanline textures. Unlike static images, these scale to any viewport and stay sharp on retina displays. Each background is a self-contained component with documented props for palette, density and animation speed.
What does the speed prop do in Star Burst?
Outward travel rate 0-100. It defaults to 10.
What does the starCount prop do in Star Burst?
Number of spokes (each carries 15 pulses, capped at 5000 particles). It defaults to 100.
Is Star Burst free to use?
Star Burst is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Star Burst use?
Star Burst uses React and is styled with Tailwind CSS.
What does Star Burst need to run?
Star Burst needs Canvas 2D, requestAnimationFrame loop, ResizeObserver and seeded rng.