Text reveal

Reveals text one word or one character at a time.

Make room for the unusual.

text-reveal-basic-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextReveal } from "@/components/vip-ui/text-reveal";export function TextRevealBasicDemo() {  const [replay, setReplay] = useState(0);  return (    <div className="grid w-full max-w-md justify-items-start gap-4">      <p className="text-4xl leading-[1.15] font-semibold tracking-[-0.06em]">        <TextReveal key={replay} text="Make room for the unusual." />      </p>      <Button        size="sm"        variant="secondary"        onPress={() => setReplay((value) => value + 1)}      >        Replay      </Button>    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-text-reveal.json

Characters

A word stays on one line unless it is wider than its container.

Studio notes

text-reveal-characters-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextReveal } from "@/components/vip-ui/text-reveal";export function TextRevealCharactersDemo() {  const [replay, setReplay] = useState(0);  return (    <div className="grid w-full max-w-md justify-items-start gap-4">      <p className="text-3xl font-semibold tracking-[0.12em] uppercase">        <TextReveal key={replay} text="Studio notes" split="characters" />      </p>      <Button        size="sm"        variant="secondary"        onPress={() => setReplay((value) => value + 1)}      >        Replay      </Button>    </div>  );}

Sequence

Set delay to start one reveal after another.

Studio notes

Make room for the unusual.

text-reveal-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextReveal } from "@/components/vip-ui/text-reveal";export function TextRevealDemo() {  const [replay, setReplay] = useState(0);  return (    <div className="grid w-full max-w-md gap-4">      <div className="rounded-2xl border border-border bg-card p-5 shadow-[var(--shadow-card)]">        <p className="text-xs font-medium tracking-[0.16em] text-muted-foreground uppercase">          <TextReveal            key={`kicker-${replay}`}            text="Studio notes"            split="characters"          />        </p>        <p className="mt-3 text-4xl leading-[1.15] font-semibold tracking-[-0.06em] text-foreground">          <TextReveal            key={`title-${replay}`}            text="Make room for the unusual."            delay={0.3}          />        </p>      </div>      <div>        <Button          size="sm"          variant="secondary"          onPress={() => setReplay((value) => value + 1)}        >          Replay        </Button>      </div>    </div>  );}

API reference

text: stringRequired: The text to show. Screen readers read it once, as plain text.
split: "words" | "characters" = "words": Reveal by word or by character. Use words for scripts that join letters, such as Arabic.
trigger: "mount" | "in-view" = "in-view": Start on mount, or the first time the text comes into view.
stagger: number = 0.045: Delay in seconds between units. Long text uses a shorter delay, so the last unit starts within 0.6 seconds of the first.
delay: number = 0: Delay in seconds before the first unit starts.