Backgrounds
Background Lines
Animated SVG background with customizable colored lines that move across the screen.
The BackgroundLines component creates an animated SVG background with customizable colored lines that move across the screen. It features smooth animations with configurable colors, duration, and timing for dynamic visual effects.
Usage
Background Lines
Animated SVG lines with customizable colors
<template>
<div class="relative h-96 w-full overflow-hidden rounded-lg border bg-accented">
<MBackgroundLines
class="h-full"
:colors="['primary', 'secondary', 'error']"
>
<div class="relative z-10 h-full flex flex-col items-center justify-center text-highlighted">
<h2 class="text-3xl font-bold mb-4">
Background Lines
</h2>
<p class="text-lg mb-6 text-center max-w-md text-dimmed">
Animated SVG lines with customizable colors
</p>
<button class="px-6 py-3 bg-default/10 backdrop-blur-sm rounded-full hover:bg-default/20 transition-colors">
Explore
</button>
</div>
</MBackgroundLines>
</div>
</template>
<script setup>
// This component will be registered globally in the documentation app
</script>
Examples
Basic Background Lines
Grid System
Enhance your layouts with dynamic grid lines that create structure and visual rhythm in your designs
<template>
<div class="relative h-96 w-full overflow-hidden rounded-xl border bg-accented">
<MBackgroundLines class="h-full">
<div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-6">
<div class="mb-6">
<div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center mx-auto">
<UIcon
name="i-lucide-grid-3x3"
class="w-10 h-10 text-inverted"
/>
</div>
</div>
<h2 class="text-4xl font-bold text-highlighted mb-4">
Grid System
</h2>
<p class="text-dimmed max-w-md mb-8">
Enhance your layouts with dynamic grid lines that create structure and visual rhythm in your designs
</p>
<div class="flex flex-col sm:flex-row gap-4">
<UButton
color="primary"
variant="solid"
size="lg"
>
Learn More
</UButton>
<UButton
color="neutral"
variant="outline"
size="lg"
>
View Demo
</UButton>
</div>
</div>
</MBackgroundLines>
</div>
</template>
Customize
Customize
Colors
Props
| Prop | Type | Default | Description |
|---|---|---|---|
svgOptions | object | {} | Options for the SVG animation including duration. |
colors | string[] | ['primary', 'secondary', 'success', 'info', 'warning', 'error'] | Array of colors for the lines. Each entry can be a theme token (primary, var(--ui-primary)) or any CSS colour. |
class | string | '' | CSS classes to apply to the container. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.backgroundLines in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | relative |
svg | - | absolute inset-0 w-full h-full |