Flow Text

Smooth flowing text animation

$ npx @hritik-sharmaa/repeat-ui add text-effect-flow-text
Category
Text Effect
Added
Aug 14, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview
Customize
2
30px
0°
import TextEffectFlowText from "@/components/repeat-ui/text-effect-flow-text/preview";

<TextEffectFlowText text="" separator=" • " />

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

  2. Use it

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

    import TextEffectFlowText from "@/components/repeat-ui/text-effect-flow-text/preview";

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

Props

PropTypeDefaultDescriptionOptions
textstring""The text that loops.-
speednumber2Pixels moved per frame.-
direction"left" | "right""left"Which way the ribbon runs.left | right
separatorstring" • "Placed between repeats.-
colorstring"#0a0a0a"Text colour.-
backgroundstring"#60a5fa"Ribbon colour.-
fontSizenumber30Text size in pixels.-
rotatenumber0Tilt of the ribbon in degrees.-
interactivebooleantrueLet visitors drag the ribbon.-
classNamestring""Extra classes for the root element.-

More text effect

See all
Flipping TextText that flips between different words
Pop TextText that pops with scale animations
Split Reveal TextSplit and reveal text letter by letter