ComponentsText Shine
Text Shine
Generating code...
TextShine.tsx
"use client"; // @NOTE: add in case you are using Next.js
import { motion } from "framer-motion";
export function TextShine() {
return (
<motion.h1
className="bg-[linear-gradient(110deg,#404040,35%,#fff,50%,#404040,75%,#404040)] bg-[length:200%_100%] bg-clip-text text-base font-medium text-transparent"
initial={{ backgroundPosition: "200% 0" }}
animate={{ backgroundPosition: "-200% 0" }}
transition={{
repeat: Infinity,
duration: 2,
ease: "linear",
}}
>
Generating code...
</motion.h1>
);
}