---
title: "ElectricBolts"
canonical_url: "https://framerhub.io/components/electric-bolts"
last_updated: "2026-06-15T14:46:29.465Z"
---

## Transform Your Designs with Electric Energy

ElectricBolts brings dynamic, animated electric energy effects to your Framer projects with stunning 3D mesh lines that pulse and flow across your canvas. Built with Three.js and optimized for performance, this component creates mesmerizing visual effects that captivate your audience.

## Features

**Advanced 3D Mesh Animation**
Powered by Three.js and MeshLine library for smooth, organic electric bolt animations with realistic energy flow patterns.

**Multi-Color Gradient System**
Four independent color controls create stunning gradient transitions along each energy bolt, perfect for matching your brand palette.

**Customizable Turbulence**
Fine-tune the chaos and randomness of your electric bolts with adjustable turbulence controls for unique visual styles.

**Frequency Controls**
Adjust the density and spacing of energy bolts to create subtle background effects or intense energy storms.

**WebGL Performance**
Hardware-accelerated rendering ensures smooth 60fps animations even with multiple active energy bolts.

**Responsive Design**
Automatically adapts to any container size, perfect for hero sections, backgrounds, or creative accents.

## Use Cases

**Hero Sections** — Create electrifying landing page backgrounds that immediately grab attention and convey energy and innovation

**Tech Product Pages** — Perfect for showcasing cutting-edge technology products, AI services, or futuristic brands

**Event Landing Pages** — Build excitement for conferences, launches, or special events with dynamic energy effects

**Creative Portfolios** — Stand out with unique, eye-catching backgrounds that showcase your creative vision

**Gaming Websites** — Add intensity and action to gaming sites with electric energy animations

![Electric Bolts Preview](/framerhub/img/components/control/electric-bolts.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find ElectricBolts in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

ElectricBolts offers intuitive customization options for complete creative control:

**Color System**

- Color 1-4: Create stunning multi-color gradients along energy bolts
- Background Color: Set the canvas background (use dark colors for best effect)

**Line Appearance**

- Line Width: Control the thickness of energy bolts (0.5-5.0)
- Default: 2.0 for balanced visual impact

**Animation Controls**

- Turbulence: Adjust randomness and chaos (0-5)

  - Low (0.5-1.5): Smoother, more controlled bolts
  - High (3-5): Wild, chaotic energy patterns
- Frequency: Control bolt density and spawn rate

  - Lower values: Sparse, dramatic effects
  - Higher values: Dense energy field

### Quick Tips

**Best Performance** — Use 3-4 colors for optimal gradient rendering. More complex gradients may impact performance on lower-end devices.

**Color Combinations** — Dark backgrounds (black, deep blue, dark purple) make electric bolts pop. Try neon colors (cyan, magenta, electric blue) for authentic electric effects.

**Layering** — Place content above the component. Use white or bright text with glow effects for best readability against electric backgrounds.

**Turbulence Settings** — Start with 1.5 turbulence for balanced chaos. Increase for more dramatic effects, decrease for cleaner, tech-style animations.

**Width Settings** — Line width of 1.5-2.5 works best for hero sections. Go thinner (0.8-1.2) for subtle backgrounds, thicker (3-4) for bold statements.

## Credits

Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/).

## Why Designers Love This

ElectricBolts isn't just another animation component - it's a production-ready electric energy system built with Three.js for stunning visual impact. With smooth WebGL performance, customizable colors, and organic animation patterns, your designs will crackle with energy. Whether you're building a tech startup landing page, a gaming website, or a futuristic portfolio, ElectricBolts delivers that electric "wow" factor that sets premium brands apart.

---

**Need Help?** Visit framerhub.io/support for documentation and video tutorials.

**Support Contact:** [https://x.com/Shahul_the_dev](https://x.com/Shahul_the_dev) or [shahul@amazee.studio](mailto:shahul@amazee.studio)