Background Beams — Animated beams with impact explosions

Beam Collision is a visually striking animated background component for Framer that simulates falling light beams with realistic collision effects. Each beam moves vertically with a glowing gradient and triggers a particle explosion when it hits the bottom edge, creating an energetic and futuristic visual experience.

The animation is rendered using canvas for high performance and smooth motion. Designers can easily customize the beam color, speed, and density to match their design style—from subtle ambient motion to intense, high-energy effects.

Particles fade out naturally after impact, while beams continuously regenerate from the top, ensuring a seamless infinite animation loop.

This component is perfect for hero sections, landing pages, tech websites, gaming interfaces, and creative portfolios.

Features

• Animated falling beam effect

• Collision-based particle explosions

• Smooth gradient beam rendering

• Customizable speed, density, and color

• Continuous looping animation

• Canvas-based high performance

• Ideal for futuristic and high-energy designs