Back to Discover
Text EffectsIntermediate
Shimmer Text
A beautiful, endlessly shimmering text effect created with CSS background clipping and Framer Motion.
Live Preview
Shimmering Text
"use client";
import { motion } from "framer-motion";
export function ShimmerText() {
return (
<div className="flex w-full h-40 items-center justify-center bg-[#0a0a0a] rounded-2xl border border-border">
<motion.h1
className="text-4xl sm:text-5xl font-bold bg-clip-text text-transparent"
style={{
backgroundImage: "linear-gradient(90deg, #444 0%, #fff 50%, #444 100%)",
backgroundSize: "200% auto",
}}
animate={{ backgroundPosition: ["200% center", "-200% center"] }}
transition={{ repeat: Infinity, duration: 4, ease: "linear" }}
>
Shimmering Text
</motion.h1>
</div>
);
}