127 Components
Lava Lamp
BackgroundsTrue WebGL signed distance field (SDF) metaball lava lamp shader using polynomial smooth-minimum (smin) surface tension blending, 3D specular/Fresnel subsurface rim lighting, and pointer thermal attraction.
Smooth-Min Metaballs
Lava Lamp
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/lava-lamp.json"
Props
TypeScript props supported by <LavaLamp />.
| Prop | Type | Default | Description |
|---|---|---|---|
| blobCount | number | 7 | Number of buoyant wax metaballs inside the vessel (3 to 12). |
| primaryColor | string | "#FF3B00" | Core molten wax hex color. |
| secondaryColor | string | "#FFB800" | Subsurface Fresnel rim and thermal highlight hex color. |
| backgroundColor | string | "#0F071E" | Ambient vessel background hex color. |
| speed | number | 1.0 | Thermal buoyancy convection speed multiplier. |
| viscosity | number | 0.45 | Smooth-minimum (`smin`) surface tension blending factor (0.15 to 0.85). |
| children | React.ReactNode | — | Optional foreground UI rendered above the lava lamp shader. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- True polynomial smooth-minimum (`smin`) SDF blending with adjustable liquid surface tension.
- Finite-difference 3D hemisphere normal reconstruction for glassy specular highlights and Fresnel rim glow.
- Buoyant thermal wax cycle coupled with a gentle pointer heat attractor.
Keyboard & Accessibility
- Marks the WebGL metaball canvas with `aria-hidden='true'`.
- Interactive Magma, Cyber Acid, and Ultraviolet color presets are keyboard accessible.
- Dark translucent HUD container preserves legible contrast over bright molten blobs.