Split Reveal Text

Split and reveal text letter by letter

$ npx @hritik-sharmaa/repeat-ui add text-effect-split-reveal-text
Category
Text Effect
Added
Aug 14, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview

HoverHello there

Customize
18px
96px
import TextEffectSplitRevealText from "@/components/repeat-ui/text-effect-split-reveal-text/preview";

<TextEffectSplitRevealText outerText="Hover" innerText="Hello there" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add text-effect-split-reveal-text --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/text-effect-split-reveal-text/.

    import TextEffectSplitRevealText from "@/components/repeat-ui/text-effect-split-reveal-text/preview";

export default function Page() {
  return <TextEffectSplitRevealText />;
}

Props

PropTypeDefaultDescription
outerTextstring"Hover"The word that splits open.
innerTextstring"Hello there"The band revealed inside.
colorstring"#fb923c"Colour of the word.
bandColorstring"#a3e635"Background of the inner band.
bandTextColorstring"#0a0a0a"Text colour of the inner band.
gapnumber18How far the halves move apart, in pixels.
fontSizenumber96Text size in pixels; shrinks on narrow screens.
classNamestring""Extra classes for the root element.

More text effect

See all
Flipping TextText that flips between different words
Flow TextSmooth flowing text animation
Pop TextText that pops with scale animations