Lightning Text

Text with Lightning effect animation .

lightning-text.tsx

Lightning

Installation

Terminal

npx shadcn@latest add "https://sniper-ui-coral.vercel.app/r/lightning-text.json"

Auto-Installed Dependencies

The CLI will automatically install these packages.

Terminal

npm install gsap

Usage

Basic

page.tsx

import { LightningText } from "@/components/ui/lightning-text";

export default function MyPage() {
  return (
    <LightningText>
      Hello World
    </LightningText>
  );
}

Examples

examples.tsx

import { LightningText } from "@/components/ui/lightning-text";

export default function MyPage() {
  return (
    <div className="space-y-4">
      {/* Custom color and speed */}
      <LightningText color="#ff6b35" repeatDelay={0.8} stagger={0.02}>
        <h1 className="text-5xl font-bold">Fast Lightning</h1>
      </LightningText>

      {/* Slower, blue effect */}
      <LightningText color="#2b6bbb" repeatDelay={2} stagger={0.06}>
        <p className="text-2xl">Subtle shimmer effect</p>
      </LightningText>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`—`	The content to apply the lightning effect to.
`color`	`string`	`"#2b6bbb"`	The color of the lightning flash.
`repeatDelay`	`number`	`1.5`	Seconds to wait before repeating the animation.
`stagger`	`number`	`0.04`	Stagger delay (in seconds) between each character's animation.

Sniper UI

An open-source library available on GitHub — contribute or star the repo to support it.

Contribute