Text reveal

Reveal a short piece of content with restrained motion.

npx shadcn@latest add @silicon-ui/text-reveal
textmotioncontent
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/text-reveal

Manually

  1. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/text-reveal/text-reveal.tsx
    • components/silicon-ui/text-reveal/text-reveal.module.css

  2. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { TextReveal } from "@/components/silicon-ui/text-reveal/text-reveal";

API reference

PropTypeDefault
text*string—
as"h1" | "h2" | "h3" | "p""h2"
classNamestring—
idstring—
delaynumber0

Dependencies

npm
None
Registry
silicon-motion-tokens