Beams Collision Background for React

Q: How many beams can I use?

count spreads them across the width: 15 by default, up to 16. Their positions, tail lengths and timings come from a fixed hash of each beam's index, so the server and the browser render the same thing.

Q: Can I change the colour?

beamColor takes any CSS colour and paints the beams, the glow and the sparks with it. By default each beam runs from indigo at its head to violet along its tail; set --beams-collision-color and --beams-collision-tail for your own two-colour gradient. The floor uses your border colour, and you can style it through its beams-collision-floor slot.

Light beams that fall behind your content and burst into a flash, a glowing line and a spray of sparks when they hit the floor. For React with Base UI, when a launch, a release or a celebration hero needs energy without a script.

Light beams fall from the top of the section at different paces and burst when they reach the floor: a flash, a glowing line that spreads along it and a spray of sparks that flies up and fades. Each beam is a bright 2px core in a soft glow, running from indigo at its head to violet along a tail that fades out over 12 to 28% of the section's height. Each beam falls in a known time and its burst is delayed to that moment, so it's all CSS keyframes on position, scale and opacity: nothing is measured while it runs, and it renders the same on the server.

Use it for a launch, a release or a celebration hero. For beams that only sweep across, use Beams; for streaks that fall without an impact, Meteors; for bigger bursts, Fireworks; for a falling celebration, Confetti.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { BeamsCollision } from "@/components/ui/beams-collision";

Beams Collision is a container: give it a height and put your content inside. The beams fall behind the content, and the floor is the container's bottom edge.

<BeamsCollision className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Version 2.0 has landed</h1>
</BeamsCollision>

For a backdrop behind the whole page, leave it empty and fix it under everything else; the floor is then the bottom of the window:

<BeamsCollision className="fixed inset-0 -z-10" />

Demos

In a card

count={8} spreads fewer beams across a narrow card, so the card's bottom edge becomes the floor.

PreviewCode

Colour and speed

beamColor paints the beams, their glow and their sparks one colour, here cyan on a dark section, and speed={1.5} makes the beams fall and burst half again as fast. The floor is a part you can style: here **:data-[slot=beams-collision-floor]:bg-white/15.

PreviewCode

Accessibility

The beams are decorative: they're hidden from screen readers and never take the pointer, and your content stays on top in normal flow. With reduced motion everything stops where it is: beams held at different heights and a few sprays caught in the air, a still picture with nothing moving or flashing. The whole background bursts at most three times a second: count stops at 16 and the stylesheet slows the beams if speed would go over. Each burst is a small glow on the floor and a few short sparks, not a full-screen flash. The beams are thin and spread apart, so text on top stays readable in your foreground colour.

FAQ

How does it know when a beam hits the floor?

It doesn't measure anything. Each beam crosses the container's full height in a set time and reaches the floor at the same point in its cycle, and its glow and sparks run on that same cycle, started at that moment. They stay in step at any size and any speed.

Do beams fall at the same speed everywhere?

They take the same time, so they move faster in a tall section and slower in a short card. Adjust with speed if a tall page needs calmer beams.

How many beams can I use?

count spreads them across the width: 15 by default, up to 16. Their positions, tail lengths and timings come from a fixed hash of each beam's index, so the server and the browser render the same thing.

Can I change the colour?

beamColor takes any CSS colour and paints the beams, the glow and the sparks with it. By default each beam runs from indigo at its head to violet along its tail; set --beams-collision-color and --beams-collision-tail for your own two-colour gradient. The floor uses your border colour, and you can style it through its beams-collision-floor slot.

Why doesn't a high speed make it faster?

Bursts are capped at three a second over the whole background. With many beams, a high speed reaches that cap, and the stylesheet holds the pace there. Fewer beams leave room for more speed.