Electric Logo

Turns any SVG or PNG into a living lightning outline, with flowing strands, arcs that leap off the edges and a charge that follows the cursor.

Default

Every prop is wired to the controls underneath. Hover the logo to charge the lightning around the cursor, and click to send a ripple through it. Pick another image or upload your own SVG or PNG.

Customize

Image

Color

Glow Color

Scale0.7

Intensity1

Glow1

Fill0

Thickness1.5px

Strands4

Bend0.6

Crackle1.5

Arcs1

Flicker0.6

Speed2.5

Interactive

Cursor Intensity0.75

Cursor Radius100px

API Reference

ElectricLogo

Prop	Type	Default	Description
`src`	`string`	`lightning bolt`	Any image URL. SVGs and transparent PNGs are traced by their alpha, opaque images by keying out their backdrop colour.
`color`	`string`	`'#ecc7ff'`	Colour of the hot core of every strand.
`glowColor`	`string`	`'#ad6dff'`	Colour of the glow around the strands, the bloom and the interior fill.
`scale`	`number`	`0.7`	Size of the logo as a fraction of the container. The glow and arcs extend beyond it.
`intensity`	`number`	`1`	Overall brightness of the effect.
`glow`	`number`	`1`	Strength of the halo around strands and the soft bloom around the shape.
`thickness`	`number`	`1.5`	Width of the main strand, in px. Satellite strands are thinner, and every strand swells and thins as it flows.
`strands`	`number`	`4`	Number of filaments tracing the outline, from 1 to 6. Extra strands come and go along the edge.
`bend`	`number`	`0.6`	How far the strands sway and ripple away from the outline. The main strand stays closest.
`crackle`	`number`	`1.5`	Size of the fine crinkle along every strand and arc.
`arcs`	`number`	`1`	How often short arcs leap off the edge and land further along it. 0 turns them off.
`flicker`	`number`	`0.6`	How much the whole effect pulses and each strand shimmers in brightness.
`fill`	`number`	`0`	Translucent glow inside the shape, brightest near its edges.
`speed`	`number`	`2.5`	Animation speed. 0 freezes the current frame.
`interactive`	`boolean`	`true`	Turn on pointer interactions. Hovering charges the lightning around the cursor, and a click sends a ripple through it with a burst of arcs.
`cursorIntensity`	`number`	`0.75`	How strongly the lightning charges up around the cursor. 0 turns the hover charge off.
`cursorRadius`	`number`	`100`	Radius of the charged area around the cursor, in px.
`theme`	`'dark' \| 'light'`	`'dark'`	The background the logo sits on. Dark renders the lightning as emitted light. Light renders crisp electric ink with a white-hot core and a lighter fill.
`@render`	`(canvas: HTMLCanvasElement) => void`	`undefined`	Emitted immediately after each rendered frame. Copy the canvas synchronously to capture the current frame for effects such as live reflections.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. With prefers-reduced-motion the animation slows down and the arcs, flicker and click ripple are turned off.

Electric Border Fade Content