Browse components
Lustre Text
Polished metal lettering with a bevel and a specular glint that sweeps across, or follows your pointer.
Installation
npx shadcn@latest add @glint-ui/lustre-textFirst 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/lustre-text.json
Usage
import { LustreText } from "@/components/ui/lustre-text";
<LustreText text="Chrome Finish" metal="silver" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Chrome Finish" | Text to render. |
| metal | "silver" | "gold" | "rose" | "titanium" | "silver" | Metal finish. |
| speed | number | 4 | Seconds per lustre sweep (includes a short rest). |
| followPointer | boolean | true | Highlight follows the pointer while hovered. |
| bevel | number | 0.6 | Strength of the bevel shading, 0–1. |
| className | string | — | Extra classes for the root element. |