Animated Shiny Text

PreviewCode

✨ Introducing Magic UI

@/demos/AnimatedShinyTextDemo.tsx

import { ArrowRight } from 'lucide-solid'
import { cn } from '@/lib/utils'
import { AnimatedShinyText } from '@/registry/magicui/animated-shiny-text'

export function AnimatedShinyTextDemo() {
  return (
    <div class="z-10 flex min-h-64 items-center justify-center">
      <div
        class={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 class="
          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>
          <ArrowRight class="
            ml-1 size-3 transition-transform duration-300 ease-in-out
            group-hover:translate-x-0.5
          "
          />
        </AnimatedShinyText>
      </div>
    </div>
  )
}

Installation

pnpm

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

bun

bunx shadcn@latest add @magicui-solid/animated-shiny-text

yarn

yarn dlx shadcn@latest add @magicui-solid/animated-shiny-text

npm

npx shadcn@latest add @magicui-solid/animated-shiny-text

Import

import { AnimatedShinyText } from '@/components/magicui/animated-shiny-text'

Usage

<AnimatedShinyText>Hello</AnimatedShinyText>

Props

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

Original:

magicui.design/docs/components/animated-shiny-text