Animated Shiny Text

herofrom MagicUI Effects

Animated Shiny Text

AI Usage Rules

Use AnimatedShinyText for announcement banners or subtle text highlights. Requires animate-shiny-text keyframe. The shimmer effect draws attention without being distracting. Best for short text (1-2 lines).

Code Template

import { type CSSProperties } from "react"
import { cn } from "@/lib/utils"

interface AnimatedShinyTextProps extends React.ComponentProps<"span"> {
  shimmerWidth?: number
}

export function AnimatedShinyText({ children, className, shimmerWidth = 100, ...props }: AnimatedShinyTextProps) {
  return (
    <span
      style={{ "--shimmer-width": `${shimmerWidth}px` } as CSSProperties}
      className={cn(
        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
        "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80",
        className
      )}
      {...props}
    >
      {children}
    </span>
  )
}

Props Schema

Property	Type	Default	Description
children	string	—
shimmerWidth	number	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "children": {
      "type": "string"
    },
    "shimmerWidth": {
      "type": "number"
    }
  }
}