Animated Glowing Text

Animated SVG drawing trace outline over shimmering text characters.

UniqueUI CLI

npx uniqueui add animated-glowing-text-outline

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/animated-glowing-text-outline.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Hello World

Usage

import GlowingTextOutline from "@/components/ui/animated-glowing-text-outline";

export default function Example() {
  return (
    <div className="flex justify-center p-10 bg-black rounded-xl">
      <GlowingTextOutline 
        text="Hello World" 
        colors={["#ffaa40", "#9c40ff", "#ffaa40"]}
        animationDuration={5}
      />
    </div>
  );
}

Props

Prop	Type	Description
`text`	`string`	The text content to be displayed.
`fontSize`	`number \| string`	The font size of the text.
`fontWeight`	`string \| number`	The CSS font-weight of the text.
`textColor`	`string`	Fill color of the text face.
`outlineColor`	`string`	The default color of the text stroke outline.
`colors`	`string[]`	Array of colors forming the animated gradient sweep.
`outlineWidth`	`number \| string`	Width of the stroke outline.
`animationDuration`	`number`	Duration of the stroke-drawing animation for a SINGLE character (in seconds).
`staggerDelay`	`number`	Delay between each character starting to draw (in seconds).
`dashArray`	`number`	Length of the SVG stroke dash array. Tune this higher for longer paths.