Pop Text

Text that pops with scale animations

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

Copy. Paste.Repeat.

Customize
72px
1.5s
1s
import TextEffectPopText from "@/components/repeat-ui/text-effect-pop-text/preview";

<TextEffectPopText maintext="Copy. Paste." subText="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-pop-text --variant ts-tailwind

  2. Use it

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

    import TextEffectPopText from "@/components/repeat-ui/text-effect-pop-text/preview";

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

Props

PropTypeDefaultDescription
maintextstring"Copy. Paste."The first line.
subTextstring"Repeat."The second line, in the accent colour.
colorstring"currentColor"Colour of the first line.
accentColorstring"#eab308"Colour of the second line.
fontSizenumber72Text size in pixels; shrinks on narrow screens.
durationnumber1.5Seconds each line takes to pop up.
staggernumber1Seconds before the second line starts.
classNamestring""Extra classes for the root element.

More text effect

See all
Flipping TextText that flips between different words
Flow TextSmooth flowing text animation
Split Reveal TextSplit and reveal text letter by letter