Light Speed
A mesmerizing light particle animation that simulates the sensation of moving at light speed. Smooth, GPU-accelerated, and fully customizable.
Make it with Workshop
Build your own component with AI
A mesmerizing light particle animation that simulates the sensation of moving at light speed. Smooth, GPU-accelerated, and fully customizable.
Make it with Workshop
Build your own component with AI
LightSpeed transforms a standard background into a dynamic, futuristic particle scene.Particles flow with a high-tech, energetic trail effect, adjustable in speed, intensity, count, and color. It’s responsive, Framer-compatible, and ideal for creating immersive, cinematic UI experiences.
If the user’s browser doesn’t support WebGL 2.0, a simple fallback message is displayed, keeping your layout intact.
Key Features
GPU-accelerated WebGL 2.0 particle rendering
Smooth light-speed particle trails
Fully customizable: speed, intensity, particle count, RGB colors
Quality presets: low, medium, high for performance optimization
Pause/play toggle for interactivity
Responsive to container or viewport size
Graceful fallback if WebGL is unsupported
Framer-ready: drop-in, no additional setup
How to Use
Drag LightSpeed into your Framer canvas or frame.
Open the properties panel and configure:
Speed — controls the animation velocity
Intensity — brightness and trail strength of particles
Particle Count — number of particles rendered
Color (R/G/B) — customize particle colors
Quality — choose between low, medium, or high
Paused — toggle animation state
Preview the component — particles animate smoothly and adjust dynamically.
Customization Options
Speed: Control how fast the particles flow.
Intensity: Adjust the trail brightness and visual impact.
Particle Count: Set the number of light particles in the scene.
Colors: Use RGB sliders to define particle hues.
Quality: Optimize for performance or visual fidelity (low/medium/high).
Paused: Temporarily stop particle animation without removing the component.
Perfect For
Hero sections and interactive backgrounds
Modern websites, portfolios, and product landing pages
Futuristic or tech-themed applications
SaaS dashboards and loading states
Pro Tip
Combine LightSpeed with semi-transparent overlays or text elements to create immersive headers. For cinematic effects, layer it with a subtle gradient background and animated content for depth and energy.
