MMridha UI

Background Beams Collision

Radiating light beams drawn with SVG that animate toward a central collision point with a particle burst effect using Motion. Evokes a high-energy, technical aesthetic.

ReactNext.jsClient ComponentReactMotionSVG
Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/background-beams-collision

Registry endpoint: https://ui.mridha.net/r/background-beams-collision.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/background-beams-collision.tsx

3. Import the component

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

4. Use it in a page

export default function Page() {
  return (
    <main>
      <BackgroundBeamsCollision />
    </main>
  );
}

Dependencies

motion

Accessibility

  • The entire canvas is decorative and wrapped in aria-hidden='true'.
  • Do not place essential information inside the animation area.

Performance

  • Uses SVG animation via Motion — avoids Canvas API overhead.
  • Recommend disabling on mobile using a media query when used as a full-page background.