Electric Text

Animated electric text with glowing, distorted outline for dynamic neon effects.

Feel the Sparks

Installation

npx shadcn@latest add https://scrollxui.dev/registry/electric-text.json

Usage

import { ElectricText } from "@/components/ui/electric-text";

<ElectricText
        color="#BB8A2C"
        showFill={false}
        speed={1}
        glowIntensity="high"
        chaos={1}
        strokeWidth={3}
        className="text-5xl font-bold"
      >
        Feel the Spark
      </ElectricText>

API Reference

Electric Text

Animated electric text with glowing, distorted outline for dynamic neon effects.

Props

Property	Type	Default	Description
`children`	ReactNode	`-`	The text or React nodes to display with the electric effect.
`color`	string	`#5227FF`	Primary stroke color for the electric outline.
`speed`	number	`1`	Animation speed multiplier for the electric effect.
`chaos`	number	`1`	Intensity of the distortion in the electric effect.
`strokeWidth`	number	`2`	Width of the text stroke for the electric outline.
`className`	string	`-`	Custom class names for styling the root container.
`glowIntensity`	'low' \| 'medium' \| 'high'	`medium`	Controls blur and opacity levels of the glow layers.
`fillColor`	string	`rgba(0,0,0,0.8)`	Fill color for the text when `showFill` is true.
`showFill`	boolean	`true`	Toggles the fill layer. Set to false to show only electric outline.