shadcn.io is an independent project built on shadcn/ui
Text
ProFoil Text for Svelte
Type printed in holographic foil, its rainbows sliding as the pointer moves. For Svelte with Ark UI, when a word should feel like a collectible.
Foil Text prints a word in holographic foil: slanted bands of rainbow under a band of light, the iridescence of a foil card or a limited-edition sticker. Move the pointer across the text and the colours slide and the light swings with it, as if you were tilting the card; leave, and they settle back. It can also move slowly on its own.
Use it for a word that should feel special and a little playful: a limited edition, a badge, a reward, a drop. For a rainbow that rolls by itself in a straight ribbon, use Rainbow Text; for metal, Chrome Text; for one glossy colour under the pointer, Gloss Text. One registered CSS number, the tilt, turns the rainbows and swings the light: the pointer writes it and a CSS transition eases it, or a keyframe animation the install adds to your stylesheet sweeps it, with no animation library. With reduced motion the foil only answers the pointer.
Installation
Usage
<script lang="ts">
import { FoilText } from "@/components/ui/foil-text";
</script>
<h2>
<FoilText text="Limited edition" />
</h2>
Demos
Auto
mode="auto" moves the foil on its own, for a hero where nobody needs to hover: the colours slide along and the light swings out and back, then again, without a seam. duration is one sweep, 8000 ms by default; it pauses while the pointer is over the text.
Intensity
intensity is how vivid the foil is: subtle for a pearly sheen, medium by default, strong for full holographic colour.
Accessibility
The text stays real text, read by screen readers and selectable. The colours share one lightness, darker on a light page and lighter on a dark one; in forced-colors mode, where backgrounds are removed, the text falls back to the system's text colour. The pointer only shifts colours, never moves the text, and with reduced motion the foil doesn't move on its own.
FAQ
How does the pointer move the foil?
On each move over the text, its position across the text is written into one CSS variable, the tilt, from -0.5 at the start to 0.5 at the end. The rainbows turn and the band of light swings by it, and a transition eases each change; leaving removes it, so the foil settles back.
Does it look right on a long word?
Yes. The rainbows fan out from a point far below the text, so they cross it as slanted bands, more of them the wider it is, rather than spinning round its middle.
What happens on a touch screen?
The foil shows at rest, a full set of colours under the light, and nothing depends on moving it. For a foil that moves without a pointer, use mode="auto".
How is it different from Rainbow Text?
Rainbow Text is one straight ribbon of the colour wheel rolling slowly through the text by itself. Foil Text has more, slanted bands under a band of light, and answers the pointer like a foil card.
API Reference
FoilText
<span> data-slot="foil-text"
textstring
The text.
duration?number
One sweep of the foil when it moves by itself (mode="auto"), in
milliseconds.
- Default
8000
intensity?"subtle" | "medium" | "strong"
How vivid the foil is: subtle for a pearly sheen, medium, or
strong for full holographic colour.
- Type
"subtle" | "medium" | "strong"- Default
"medium"
mode?"pointer" | "auto"
What moves the foil: the pointer crossing the text, like tilting a card to the light, or a slow sweep of its own that pauses under the pointer.
- Type
"pointer" | "auto"- Default
"pointer"
class?string
Merged with the part's classes.
--foil-text-durationstring
One sweep of the foil in auto mode (8s).
--foil-text-lightnessstring
The colours' oklch lightness (0.64, 0.82 in dark mode).
--foil-text-shinestring
The band of light's colour.
