Shiny Text

Overview

ShinyText creates a continuous gradient shine animation that sweeps across text content. Built with Framer Motion's useAnimationFrame for smooth, GPU-friendly rendering with customizable speed, colors, direction, and yoyo behavior.

Features

• Smooth gradient sweep — background-clip: text with animated position
• Configurable speed and direction — left or right sweep
• Yoyo mode — bounce animation back and forth
• Pause on hover — interactive pause capability
• Custom colors — control base and shine colors

Usage

import ShinyText from '@/components/shiny-text'

<ShinyText
  text="Shiny Effect"
  speed={3}
  className="text-3xl font-semibold"
/>