Shiny Text

Text with an animated shine/highlight sweep effect with customizable colors, speed, direction, and yoyo mode.

Shiny Text Effect

import ShinyText from "@/components/vritti/shiny-text"

export function ShinyTextExample() {
  return (
    <div className="relative flex items-center justify-center w-full h-[400px]">
      <span className="text-4xl font-semibold">
        <ShinyText
          text="Shiny Text Effect"
          speed={2}
          color="#b5b5b5"
          shineColor="#ffffff"
        />
      </span>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/shiny-text"

Dependencies


pnpm add motion