Text printed like holographic foil: a metal base, a band of spectrum colors and a hard specular streak that sweeps across. With a mouse, the streak follows the pointer instead.
npx shadcn@latest add https://hyperblur.dev/r/text-foil-sweep.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-foil-sweep.tsx.
import { TextFoilSweep } from "@/components/hyperblur/text-foil-sweep"
<TextFoilSweep text="Members edition" tone="gold" className="text-5xl font-bold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| tone | "silver" | "gold" | "graphite" | "silver" | Metal used for the base layer. |
| speed | number | 3.2 | Seconds per automatic sweep, including the pause between passes. |
| intensity | number | 0.65 | Strength of the spectrum band, from 0 to 1. |
| interactive | boolean | true | Let the mouse steer the streak while hovering. |