Energy Charge Button — Lightning & Shockwave Interaction with Source Code

The Energy Charge Button is a cinematic interaction that builds up electrical charge on hover. It features procedural lightning arcs and releases a massive screen-filling shockwave on click.

How It Works

This animation uses a custom procedural lightning algorithm implemented in vanilla JavaScript using the HTML5 Canvas API. The drawLightning function calculates random zig-zag segments between two points, applying glow effects via shadowBlur. When clicked, a CSS-animated shockwave element is triggered, expanding rapidly from the button’s center.

Key Features

• Procedural Lightning Arcs: No two lightning bolts are exactly the same.
• Shockwave Burst: A powerful circular wave that expands across the entire viewport.
• Reactive Glow: The button’s glow intensity and “jitter” increase as the charge builds up.
• Thunderous Aesthetics: High-contrast colors (white/cyan on black) create a professional “energy” feel.

Frequently Asked Questions

Can I change the lightning color?

Yes! In the drawLightning function, you can modify ctx.strokeStyle and ctx.shadowColor to change the electricity from cyan to purple, red, or any other color.

How do I increase the bolt frequency?

In the animate function, look for Math.random() < 0.3. Decreasing this threshold will make lightning appear more frequently.

Is the shockwave scalable?

Absolutely. The .shockwave class is responsive and its size is controlled by the @keyframes wave in CSS.