Browse components
Prism
A slowly rotating glass prism splitting a white beam into a shimmering rainbow fan. Aim the beam with the cursor. WebGL.
Prism
Installation
npx shadcn@latest add @glint-ui/prismFirst 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/prism.json
Usage
import { Prism } from "@/components/ui/prism";
<div className="relative h-96">
<Prism size={0.2} spread={0.5} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| beamColor | string | "#ffffff" | Incoming light color. |
| speed | number | 1 | Rotation speed multiplier. |
| size | number | 0.2 | Prism size, fraction of height. |
| spread | number | 0.5 | Rainbow fan width in radians. |
| intensity | number | 1 | Brightness. |
| followMouse | boolean | true | Aim the beam from the cursor when it is left of the prism. |
| className | string | — | Extra classes for the root element. |