text

Shining Text

Text with a looping shine sweep driven by an animated gradient background clip. Motion-powered.

Preview

Thinking...

Copy for AI

Copy for Lovable is the fastest way to move this component into another Lovable project — it copies the full prompt with dependencies, files, and a usage example. Copy all files gives you the raw source if you want to paste it manually.

Installation

npx shadcn@latest add https://21st.dev/r/preetsuthar17/shining-text

Paste into a terminal — or paste into a Lovable chat and I'll run it for you.

Source files

components/ui/shining-text.tsx

"use client";

import * as React from "react";
import { motion } from "motion/react";

export interface ShiningTextProps {
  text: string;
  className?: string;
}

export function ShiningText({ text, className }: ShiningTextProps) {
  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-regular text-transparent " +
        (className ?? "")
      }
      initial={{ backgroundPosition: "200% 0" }}
      animate={{ backgroundPosition: "-200% 0" }}
      transition={{ repeat: Infinity, duration: 2, ease: "linear" }}
    >
      {text}
    </motion.h1>
  );
}

Dependencies

motion