Browse components
Metallic Paint
Liquid chrome flows inside a beveled star, heart, ring or glyph, with reflections that lean toward the cursor. Raw WebGL.
Installation
npx shadcn@latest add @glint-ui/metallic-paintFirst 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/metallic-paint.json
Usage
import { MetallicPaint } from "@/components/ui/metallic-paint";
<MetallicPaint shape="text" text="G" className="size-80" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "star" | "heart" | "ring" | "text" | "star" | Mask shape. |
| text | string | "G" | Glyphs used when shape is text. |
| speed | number | 1 | Flow speed multiplier. |
| tint | string | "#eef2ff" | Highlight tint. |
| bands | number | 1.6 | Density of reflected bands. |
| bevel | number | 7 | Bevel depth near the edges. |
| className | string | — | Extra classes for the root element. |