Electric Text

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

Installation

npx shadcn@latest add @scrollxui/electric-text

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.