——Text · Free
Shimmer Text
A light sweep that travels across your headline on a loop. One element, no extra deps.
Apex Motion
import { motion } from "framer-motion";
export function ShimmerText({ text = "Apex Motion" }) {
return (
<motion.span
className="bg-clip-text text-2xl font-semibold text-transparent"
style={{
backgroundImage: "linear-gradient(110deg, #3a3f4b 35%, #fff 50%, #3a3f4b 65%)",
backgroundSize: "200% 100%",
}}
animate={{ backgroundPositionX: ["200%", "-200%"] }}
transition={{ duration: 2.4, repeat: Infinity, ease: "linear" }}
>
{text}
</motion.span>
);
}How it works
Shimmer Text is a hand-built text component for React, styled with Tailwind and animated with Framer Motion — no heavy dependency tree, no 60-package install. Drop it in, keep your bundle lean, and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components