Animated Shine Text

Text with animated shining effect using motion

Installation


pnpm dlx shadcn@latest add @ruixenui-pro/animated-shine-text

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	required	Content to display
`className`	`string`

Accordion With Image Tooltip Apple Mega Nav

On This Page

undefined

Features

Zoom + Shine animation - Text zooms in then sweeps with a shine effect
Dark mode support - Uses CSS variables for theme-aware colors
Reduced motion support - Respects prefers-reduced-motion preference
Polymorphic element - Render as any heading or text element
Customizable timing - Control duration, delay, and repeat
Custom colors - Override base and shine colors

Usage

Basic

import { AnimatedShineText } from "@/components/ui/animated-shine-text"
 
export default function Example() {
  return <AnimatedShineText>Hello World!</AnimatedShineText>
}

Custom Element and Timing

<AnimatedShineText
  as="h2"
  zoomDuration={0.8}
  shineDuration={1.5}
  shineDelay={0.8}
>
  Welcome Back
</AnimatedShineText>

Looping Shine

<AnimatedShineText shineRepeat={Infinity} shineDelay={2}>
  Premium Feature
</AnimatedShineText>

Custom Colors

<AnimatedShineText baseColor="#3b82f6" shineColor="#93c5fd">
  Blue Shine
</AnimatedShineText>