127 Components
Volcano Embers
BackgroundsRising volcanic embers and charred thermal ash on Canvas 2D with molten caldera horizon glow, velocity-aligned incandescent spark trails, and turbulent updraft vortices.
Thermal Ash & Updrafts
Volcano Embers
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/volcano-embers.json"
Props
TypeScript props supported by <VolcanoEmbers />.
| Prop | Type | Default | Description |
|---|---|---|---|
| emberCount | number | 110 | Total number of rising embers and thermal ash particles. |
| updraftSpeed | number | 1.2 | Vertical thermal updraft velocity multiplier. |
| turbulence | number | 1.0 | Intensity of horizontal curl turbulence and vortex swirl. |
| emberColor | string | "#FF6B1A" | Primary hex color for the glowing embers and caldera horizon. |
| coreGlow | number | 0.8 | Intensity of the molten magma glow along the bottom horizon (0 to 1.5). |
| children | React.ReactNode | — | Optional foreground UI rendered above the embers canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Velocity-aligned incandescent ember streaks with radial bloom halos and cooling curves
- Mixed particle simulation combining glowing sparks and charred floating thermal ash
- Pulsing molten caldera horizon glow behind a dark basalt rim silhouette
- Interactive pointer updraft repulsion and live HUD controls for ember color, updraft, and swirl
Keyboard & Accessibility
- Canvas layer uses pointer-events-none so foreground interactive elements remain unobstructed
- Interactive HUD presets and sliders support full keyboard focus and manipulation