Browse components
Molten Metal
Slowly drifting plates of dark crust split by white-hot, pulsing cracks of molten metal. WebGL.
Molten Metal
Installation
npx shadcn@latest add @glint-ui/molten-metalFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/molten-metal.json
Usage
import { MoltenMetal } from "@/components/ui/molten-metal";
<div className="relative h-96">
<MoltenMetal glowColor="#ff4d12" hotColor="#ffc861" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| crustColor | string | "#1c100c" | Cooled crust color. |
| glowColor | string | "#ff4d12" | Deep molten glow. |
| hotColor | string | "#ffc861" | Hottest crack color. |
| speed | number | 1 | Animation speed multiplier. |
| scale | number | 3 | Plate density; higher gives smaller plates. |
| crackWidth | number | 0.08 | Width of the glowing cracks. |
| intensity | number | 1 | Heat and brightness. |
| className | string | — | Extra classes for the root element. |