shadcn.io is not affiliated with official shadcn/ui
Text Reveal puts a second text under the first and lets the pointer wipe between them. Everything from the start of the line up to the pointer shows the revealed text in full colour, the rest still shows the text, softer, with a hairline where they meet. When the pointer leaves, the wipe slides back and the text reads whole again.
Use it for a line with a twist, a before and after, or a comparison: a number that got better, an answer behind a question. To show the second message through a round hole instead, use Xray Text; for a wipe that plays by itself as the text arrives, Mask Reveal Text. The two texts are stacked in one place and cut by complementary CSS clip-path insets at the wipe, one registered CSS property that each move of the pointer writes and a transition eases, with no animation library.
Installation
Usage
import { TextReveal } from "@/components/ui/text-reveal";<h2>
<TextReveal revealText="I know the chemistry" text="You know the business" />
</h2>Demos
Color
revealColor is the revealed text's colour, any CSS colour; by default it's the text's own, at full strength over the softer text. A monospaced font lines the two texts up character for character, so only what changed changes.
Link
Inside a link, keyboard focus reveals the whole of the revealed text, since a keyboard can't point at part of it.
Accessibility
Screen readers read the text, then the revealed text, each once, from visually hidden copies. Keyboard focus on a link around it reveals the whole of the revealed text. On a touch screen, a touch wipes up to the finger, and the wipe slides back when it lifts. The text at rest is drawn at half its colour's strength: at headline sizes it stays readable on a plain background, but check the contrast on a light colour or a busy one, and restyle it through [data-slot=text-reveal-text] if needed. With reduced motion the wipe follows the pointer and goes back at once.
FAQ
How does the wipe follow the pointer?
On each move over the text, the pointer's distance from the text's left edge is written into one CSS variable, --text-reveal-x. The revealed text is clipped to everything before it and the text to everything after it, so the two meet exactly at the pointer. Nothing re-renders.
Does it work with right-to-left text?
Yes. Right-to-left text wipes from the right, the start of its line, toward the pointer; the direction comes from the text itself.
Do the two texts need the same length?
No. They're stacked in one place, the box fits the wider, and each is aligned like the text around it, centred in a centred heading. Similar lengths make the cleanest wipe; in a monospaced font, equal lengths line up character for character.
Why does the wipe trail a little behind the pointer?
It follows through a transition about a tenth of a second long, which keeps it smooth and eases it in when the pointer comes in from the far side. When the pointer leaves, it slides back over half a second.
API Reference
TextReveal
<span> data-slot="text-reveal"
revealTextstring
The text uncovered in place of text as the pointer moves across it.
textstring
The text.
revealColor?string
The revealed text's colour, any CSS colour. By default the text's own.
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.
--text-reveal-colorstring
The revealed text's colour.
Related
- Pro
Xray Text
InteractiveThe second message through a round hole
- Pro
Mask Reveal Text
EntranceA wipe that plays by itself
- Pro
Redact Text
DecodeBars that come off hidden words
- Pro
Every detail deserves the spotlightEvery detail deserves the spotlight
Spotlight Text
InteractiveLight the text where the pointer is
- Pro
Outline Text
DecorativeHollow letters that fill on hover
- Pro
Diff Text
EntranceA before and after for code