Updated: Curved Loop
By Steven Van ·
Curved Loop text can now run along a wave, ring or straight line, with outlined letters, accent marks and a scroll-triggered speed burst.
The React Bits Curved Loop text animation has been updated so text can follow a wave, a closed ring or a straight line.
What changed
- Three path shapes: a wave, a closed ring or a straight line.
- Outlined letters.
- An accent mark between repeats of the text.
- Scrolling the page gives the loop a burst of speed that eases off.
Installing it
The component is added with npx shadcn@latest add @react-bits/CurvedLoop-TS-TW. The page offers JavaScript or TypeScript variants, with plain CSS or Tailwind. Curved Loop is described as flowing looping text along a customizable curve, with drag interaction.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →