NRVM

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>
  );
}