127 Components
Galaxy & Nebula
BackgroundsReal-time WebGL fragment shader rendering a rotating spiral galaxy and cosmic dust nebula using 5-octave Fractional Brownian Motion (FBM) noise.
WebGL FBM Nebula
Spiral Galaxy & FBM Nebula
Real-time WebGL fragment shader computing 5-octave Fractional Brownian Motion (fbm) with polar spiral distortion.
GLSL Fragment Shader · 5-Octave FBM Noise · Spiral Swirl
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/galaxy-nebula.json"
Props
TypeScript props supported by <GalaxyNebula />.
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | 1 | Time multiplier for internal nebula turbulence. |
| rotationSpeed | number | 0.25 | Angular velocity of the spiral galaxy arms. |
| primaryColor | string | "#8B5CF6" | Hex color for the inner nebula filaments. |
| secondaryColor | string | "#06B6D4" | Hex color for the outer cosmic dust cloud. |
| children | React.ReactNode | — | Optional foreground content rendered above the shader. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- GPU-accelerated WebGL GLSL fragment shader computing 5-octave Fractional Brownian Motion (`fbm`).
- Polar coordinate spiral arm warping with a luminous galactic core.
- Includes Andromeda, Orion, and Supernova color presets in the interactive preview.
Keyboard & Accessibility
- Marks the `<canvas>` shader viewport with `aria-hidden='true'`.
- Maintains high-contrast text legibility with subtle drop shadows.
- Preset selector buttons support keyboard focus.