127 Components
Solar Flare
BackgroundsChurning solar photosphere and coronal flare background powered by a custom WebGL fragment shader with domain-warped FBM plasma convection cells, magnetic sunspots, and glowing coronal prominences.
Photosphere Convection
Solar Flare
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/solar-flare.json"
Props
TypeScript props supported by <SolarFlare />.
| Prop | Type | Default | Description |
|---|---|---|---|
| coreColor | string | "#FFF7CC" | Hex color of the hottest incandescent plasma filaments and inner limb. |
| flareColor | string | "#FF5500" | Hex color of the chromosphere and erupting coronal prominences. |
| turbulence | number | 1.0 | Domain-warping FBM turbulence multiplier for plasma granulation. |
| speed | number | 1.0 | Animation speed multiplier for plasma convection and flare loops. |
| eruptionIntensity | number | 1.0 | Intensity multiplier for coronal arches and solar wind streamers. |
| children | React.ReactNode | — | Optional foreground UI rendered above the solar shader. |
| className | string | — | Additional CSS classes for the root container. |
Key Features
- Custom WebGL GLSL fragment shader computing spherical normal projection and limb darkening
- Multi-octave domain-warped Fractal Brownian Motion (FBM) for boiling plasma convection granules and sunspot umbrae
- Dynamic coronal magnetic loops and radial streamers erupting off the solar limb
- Livestellar presets (G-Type Photosphere, Blue Hypergiant, Red Magnetar) and interactive MHD controls
Keyboard & Accessibility
- WebGL canvas is marked aria-hidden so screen readers focus on foreground hero content
- Includes real-time speed and eruption intensity controls for adjusting visual motion