Echo Text

New

Outlined copies of a word fan out behind it

$ npx @hritik-sharmaa/repeat-ui add text-effect-echo-text
Category
Text Effect
Added
Nov 1, 2026
Version
1.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview
Customize
5
10px
96px
import TextEffectEchoText from "@/components/repeat-ui/text-effect-echo-text/preview";

<TextEffectEchoText text="Repeat" />

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-echo-text --variant ts-tailwind

  2. Use it

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

    import TextEffectEchoText from "@/components/repeat-ui/text-effect-echo-text/preview";

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

Props

PropTypeDefaultDescriptionOptions
textstring"Repeat"The word to echo.-
copiesnumber5Number of outlined copies.-
offsetnumber10Distance between copies, in pixels.-
direction"down" | "up" | "left" | "right" | "diagonal""down"Which way the copies fan out.down | up | left | right | diagonal
colorstring"currentColor"Colour of the front word.-
echoColorstring"#fa5f1b"Outline colour of the copies.-
fontSizenumber96Text size in pixels; shrinks on narrow screens.-
alwaysbooleanfalseKeep the copies fanned out, not only on hover.-
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