ComponentsLight
Holographic text
Foil that shifts color as you move across it.
Limited edition
Installation
$ npx shadcn@latest add @textlab/holo-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { HoloText } from "@/components/textlab/holo-text/holo-text";
<HoloText as="h1" text="Limited edition" variant="foil" />Variants
holofoilchromeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "holo" | "foil" | "chrome" | "holo" | Rainbow hologram, warm iridescent leaf, or a cool metallic sweep. |
| intensity | number | 0.7 | How far colors travel with the pointer, 0 to 1. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Collectibles, drops and premium tiers.
- Large display words people will hover or drag across.
Skip it
- Small text; the pattern breaks the letterforms.
- Text that needs high, steady contrast.
Accessibility and motion
Accessibility
- Plain, unsplit text.
- Without a pointer it rests on a pleasant still frame.
Motion
- The pattern follows the pointer with damping, like light on a tilted card.
- The sheen brightens while the pointer is over the text.
Reduced motion. A still foil frame with no pointer tracking.
Performance
- Pointer position is written to CSS variables once per frame, only while it is settling.