Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Text

Pro

Foil Text for React

Text printed in holographic foil, its rainbows sliding as the pointer moves across it. For React with Base UI, when a word should feel like a collectible.

Framework

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.

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { FoilText } from "@/components/ui/foil-text";
<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.

Preview width

Intensity

intensity is how vivid the foil is: subtle for a pearly sheen, medium by default, strong for full holographic colour.

Preview width

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.

Does it cost much?

Little. The pointer writes one variable per move, with no state and no re-render, and the browser repaints the letters' background; there are no listeners on the page.

What happens with reduced motion?

In auto mode the foil holds still; it still answers the pointer, which only shifts its colours.

API Reference

FoilText

<span> data-slot="foil-text"

PropType
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"
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--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.

  • Pro

    Rainbow Text

    Decorative

    A rainbow that rolls by itself

  • Pro

    Chrome Text

    Decorative

    Polished metal instead of foil

  • Pro

    Gloss Text

    Decorative

    One glossy colour under the pointer

  • Gradient Text

    Decorative

    Brand colours flowing through a word

  • Pro

    Chromatic Text

    Decorative

    Colour split like light through a lens

  • Turn it over

    Pro

    Tilt Text

    Interactive

    The whole word tilts toward the pointer

All 97 text effects