Browse components
Sensitive Text
Spoiler text veiled by blur and shimmering noise particles until you hover, focus or click it.
Installation
npx shadcn@latest add @glint-ui/sensitive-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/sensitive-text.json
Usage
import { SensitiveText } from "@/components/ui/sensitive-text";
<p>The killer was <SensitiveText>the butler</SensitiveText> all along.</p>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The hidden content. |
| revealOn | "hover" | "click" | "hover" | Reveal while hovered/focused, or toggle on click/Enter/Space. |
| blur | number | 8 | Blur applied to the hidden text, in px. |
| density | number | 1 | Particle density multiplier for the noise veil. |
| speed | number | 1 | Particle drift speed multiplier. |
| label | string | "Hidden text, activate to reveal" | Accessible label for the hidden state. |
| className | string | — | Extra classes for the root element. |