Layout

Collision

Collision detection system with animated beams and explosion effects.

The Collision component system creates animated beams that travel across the screen and explode when they collide with a target element. It features realistic physics-based animations, customizable colors, and smooth transitions.

Usage

Target Area

Beams will collide here

<template>
  <MCollisionBackgroundBeams class="h-64 w-full rounded-lg overflow-hidden">
    <div class="relative z-10 flex items-center justify-center h-full">
      <div class="bg-default p-6 rounded-lg shadow-lg text-center">
        <h3 class="font-bold text-lg mb-2">
          Target Area
        </h3>
        <p class="text-muted">
          Beams will collide here
        </p>
      </div>
    </div>
  </MCollisionBackgroundBeams>
</template>

Examples

Custom Beam Configuration

Custom Timing

Beams with custom timing and rotation

<template>
  <MCollisionBackgroundBeams
    :beams="[
      {
        initialX: 150,
        translateX: 150,
        duration: 3,
        delay: 1,
        repeatDelay: 2,
      },
      {
        initialX: 400,
        translateX: 400,
        duration: 6,
        delay: 2,
        repeatDelay: 4,
        className: 'h-8',
      },
      {
        initialX: 650,
        translateX: 650,
        duration: 4,
        delay: 0,
        repeatDelay: 3,
        rotate: 15,
      },
    ]"
    class="h-64 w-full rounded-lg overflow-hidden"
  >
    <div class="relative z-10 flex items-center justify-center h-full">
      <div class="bg-default p-6 rounded-lg shadow-lg text-center">
        <h3 class="font-bold text-lg mb-2">
          Custom Timing
        </h3>
        <p class="text-muted">
          Beams with custom timing and rotation
        </p>
      </div>
    </div>
  </MCollisionBackgroundBeams>
</template>

Customize

Build in motion

Layered effects stay out of the way until you need them

Customize

Beams

Props

MCollisionBackgroundBeams Props

Prop	Type	Default	Description
`class`	`string`	`''`	CSS classes to apply to the container.
`beams`	`BeamOptions[]`	`7 beams with default settings`	Array of beam configuration objects.

BeamOptions

Prop	Type	Default	Description
`initialX`	`number`	-	Initial X position of the beam.
`translateX`	`number`	-	X translation distance for the beam animation.
`initialY`	`number`	-	Initial Y position of the beam.
`translateY`	`number`	-	Y translation distance for the beam animation.
`rotate`	`number`	-	Rotation angle of the beam in degrees.
`className`	`string`	-	Additional CSS classes to apply to the beam.
`duration`	`number`	-	Duration of the beam animation in seconds.
`delay`	`number`	-	Delay before starting the beam animation in seconds.
`repeatDelay`	`number`	-	Delay between animation repeats in seconds.
`fromColor`	`string`	`'from-indigo-500'`	Starting color of the beam gradient.
`viaColor`	`string`	`'via-purple-500'`	Middle color of the beam gradient.
`toColor`	`string`	`'to-transparent'`	Ending color of the beam gradient.

Edit this pageorReport an issue

Breakpoint Indicator

A development badge that names the active Tailwind breakpoint and shows the live viewport size.

iPhone 15 Pro

A CSS phone frame with a dynamic island, sized to hold any content.