ElectricBolts
Dynamic electric energy bolts with mesmerizing animated mesh lines.
Overview
Dynamic electric energy bolts with mesmerizing animated mesh lines.
- Animated 3D mesh lines with electric energy effect
- Customizable multi-color gradient system
- Adjustable turbulence and frequency controls
- Smooth performance with WebGL rendering
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
How to Use
Installation
VIDEO PLACEHOLDER: Installation Tutorial
- Log in to your account at framerhub.io
- Navigate to framerhub.io/dashboard
- Find ElectricBolts in your Recent Purchases
- Click the "Copy" button
- Open your Framer project
- 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.
License
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
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 or shahul@amazee.studio
ElectricBolts - $5
Dynamic electric energy bolts with mesmerizing animated mesh lines.
You might also like
CMS Gallery Slider
Transform CMS galleries into smooth, animated sliders with customizable thumbnails and navigation.
CMS Masonry Lightbox
Transform your CMS collections into beautiful masonry galleries with built-in lightbox and filtering—no code required.
Motion Trail
Create stunning cursor-following image trails with 8 unique animation styles.
Why Choose Framer Hub Components
Loved by Framer teams
Used by Framer professionals who need premium, no-code experiences.
"The Best Framer CMS Filtering Plugin I've Found — Truly a Game-Changer. I've tested a lot of Framer CMS filtering and sorting components — both free and paid — and this is by far the best one I've come across."
"He really helped me out when I needed assistance adding it to my Framer project. Super fast customer support highly recommend!"
"We had tried a couple of other Framer CMS filter components but they were buggy, hard to use and support was slow or non-existent. FramerCMSFilter is easier to use and has a lot of added functionality."
Got questions? We've the answers
Got questions? We've the answers
Everything you need to know about FramerHub.