Shiny Text

CSS text shine with beam/glass variants and reduced-motion support.

shiny-text

Shiny Text

0px

Customize

Edit props; preview updates instantly.

Customize

Duration (s)

5.0s

Intensity

32%

Variant

Props

Props accepted by ShinyText.

Prop	Type	Default	Description
children	ReactNode	—	Text or inline content to render.
duration	number	5	Sweep duration in seconds.
intensity	number	0.32	Dimmed text intensity from 0 to 1.
variant	"beam" \| "glass"	"beam"	`beam` uses a sharp moving glint, `glass` uses a softer liquid band.
disabled	boolean	false	Render plain text without the animated treatment.
respectMotion	boolean	true	Stop animation when the user prefers reduced motion.
className	string	—	Extra class names merged onto the root span.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/shiny-text.json

Usage

Import the component and drop it into a render.

demo.tsx13 lines

import { ShinyText } from "@/components/lazy-ui/text-animate/shiny-text";

export function Demo() {
  return (
    <ShinyText
      duration={5}
      intensity={0.32}
      className="text-5xl font-semibold text-neutral-100"
    >
      Shiny Text
    </ShinyText>
  );
}