Loop Text

New

Text running round a circle, faster on hover

$ npx @hritik-sharmaa/repeat-ui add text-effect-loop-text
Category
Text Effect
Added
Nov 1, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
Scroll to explore • Copy • Paste • Repeat •
Customize
72px
13px
14s
4×
import TextEffectLoopText from "@/components/repeat-ui/text-effect-loop-text/preview";

<TextEffectLoopText text="Scroll to explore • Copy • Paste • 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-loop-text --variant ts-tailwind

  2. Use it

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

    import TextEffectLoopText from "@/components/repeat-ui/text-effect-loop-text/preview";

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

Props

PropTypeDefaultDescription
textstring"Scroll to explore • Copy • Paste • Repeat • "Text that runs round the circle; end it with a separator so the loop joins up.
radiusnumber72Circle radius in pixels.
fontSizenumber13Text size in pixels.
speednumber14Seconds per turn at rest.
hoverSpeednumber4How many times faster it spins on hover.
reversebooleanfalseSpin anticlockwise.
colorstring"currentColor"Text colour.
childrenReactNode-Shown in the middle of the circle.
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