Components
Loading preview...
Easily animate text circularly. Customize the animation with variants and transitions.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/spinning-textimport React from "react";
import { SpinningText } from "@/components/ui/spinning-text";
function SpinningTextBasic() {
return (
<SpinningText
radius={5}
fontSize={1.2}
className="font-medium leading-none"
>
{`pre-order • pre-order • pre-order • `}
</SpinningText>
);
}
function SpinningTextCustomTransition() {
return (
<SpinningText
radius={7}
fontSize={1}
duration={6}
transition={{ ease: "easeInOut", repeat: Infinity }}
className="font-mono"
>
{`motion-primitives • motion-primitives • `}
</SpinningText>
);
}
function SpinningTextCustomVariants() {
return (
<SpinningText
radius={5.5}
fontSize={1}
variants={{
container: {
hidden: {
opacity: 1,
},
visible: {
opacity: 1,
rotate: 360,
transition: {
type: "spring",
bounce: 0,
duration: 6,
repeat: Infinity,
staggerChildren: 0.03,
},
},
},
item: {
hidden: {
opacity: 0,
filter: "blur(4px)",
},
visible: {
opacity: 1,
filter: "blur(0px)",
},
},
}}
className="font-[450]"
>
{`pre-order • pre-order • pre-order • `}
</SpinningText>
);
}
export { SpinningTextBasic, SpinningTextCustomTransition, SpinningTextCustomVariants };