Components
Loading preview...
lets you effortlessly bring text to life by animating it along any SVG path within your React applications. This component, part of the EaseMize UI library, leverages the GreenSock Animation Platform (GSAP) for high-performance, smooth animations. Customize the text, animation duration, direction (forwards/reversed), font size, letter spacing, the SVG path data, viewBox, and rotation. It's designed to be highly flexible, allowing developers to add sophisticated text-on-a-path animations with ease.
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/animated-svg-text-pathimport { AnimatedTextPath } from "@/components/ui/animated-svg-text-path";
const DemoOne = () => {
return (
<AnimatedTextPath
text="looping SVG Text Path. Any Shape And it Still Animates In Any Path."
duration={18}
reversed={false}
fontSize="16px"
letterSpacing="0.2px"
rotation={40}
/>
)
;
};
const DemoTwo = () => {
return (
<AnimatedTextPath
text="looping SVG path . Make any shape You want and add text to it ."
duration={18}
reversed={false}
fontSize="16px"
letterSpacing="0.2px"
rotation={20}
svgPath="M 80 110 C 80 50, 130 50, 140 110 C 150 170, 200 170, 200 110 C 200 50, 150 50, 140 110 C 130 170, 80 170, 80 110"
/>
)
;
};
export { DemoOne, DemoTwo };