Components
Background Beams
Animated SVG background with customizable beam paths and gradient colors.
Background Beams
The BackgroundBeams component creates an animated SVG background with customizable beam paths and gradient colors. It's perfect for creating dynamic background effects with smooth animations.
Usage
Background Beams
Animated background beams effect
<template>
<UCard class="relative overflow-hidden">
<template #header>
<h2 class="text-xl font-semibold">
Background Beams
</h2>
</template>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Animated background beams effect
</p>
<MBackgroundBeams
class="h-64 w-full"
:num-paths="25"
:stroke-opacity="1"
/>
</UCard>
</template>
Props
className
string
CSS classes to apply to the container.
gradientColors
string[]
Array of gradient colors for the beams.
strokeOpacity
number
Opacity of the beam strokes (0-1).
numPaths
number
Number of beam paths to display.
duration
array
Min and max duration for animations.
Examples
Basic Background Beams
Beam Network
Connect your interface with dynamic beam effects that create a futuristic and engaging user experience
<template>
<div class="relative h-64 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<MBackgroundBeams
class="h-full w-full"
:num-paths="15"
:stroke-opacity="0.7"
/>
<div class="relative z-10 h-full flex items-center justify-center">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Basic Background Beams</h3>
</div>
</div>
</template>
Custom Colors
Custom Background Beams
<template>
<div class="relative h-64 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<MBackgroundBeams
class="h-full w-full"
:num-paths="35"
:stroke-opacity="0.9"
:gradient-colors="['#ff0000', '#ff0000', '#00ff00', '#0000ff']"
/>
<div class="relative z-10 h-full flex items-center justify-center">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Custom Background Beams</h3>
</div>
</div>
</template>