1
3
Block

Animated Shiny Text

PreviousNext

A light glare effect which pans across text making it appear as if it is shimmering.

import { AnimatedShinyText } from "@/components/ui/animated-shiny-text"

export function AnimatedShinyTextDemo() {
  return (
    <div className="z-10 flex min-h-64 items-center justify-center">
      <AnimatedShinyText
        shimmerWidth={220}
        shimmerColor="white/90"
        gradientVia="white/70"
        className="text-5xl font-bold"
      >
        Shiny Text!
      </AnimatedShinyText>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://ebonui.com/r/animated-shiny-text.json

Usage

import { AnimatedShinyText } from "@/components/ui/animated-shiny-text"
<AnimatedShinyText>Hello</AnimatedShinyText>

Props

PropTypeDefaultDescription
childrennode-The text to be shimmered.
classNamestring-The class name to be applied to the shimmer.
shimmerWidthnumber100The width of the shimmer in pixels.