Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Animated Shiny Text

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

Open in

✨ Introducing Magic UI

import { ArrowRightIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"
import { AnimatedShinyText } from "@/registry/magicui/animated-shiny-text"

export function AnimatedShinyTextDemo() {
  return (
    <div className="z-10 flex min-h-64 items-center justify-center">
      <div
        className={cn(
          "group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800"
        )}
      >
        <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
          <span>✨ Introducing Magic UI</span>
          <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
        </AnimatedShinyText>
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @magicui/animated-shiny-text

Usage

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

<AnimatedShinyText>Hello</AnimatedShinyText>

Props

Prop	Type	Default	Description
`children`	`node`	`-`	The text to be shimmered.
`className`	`string`	`-`	The class name to be applied to the shimmer.
`shimmerWidth`	`number`	`100`	The width of the shimmer in pixels.

Animated List Theme Toggler

On This Page

Installation Usage Props

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers