Components
Dotted Glow Background
Animated dotted background with glowing effects and customizable colors.
Dotted Glow Background
The DottedGlowBackground component creates an animated dotted background with glowing effects and customizable colors. It's perfect for creating visually appealing backgrounds with subtle animations.
Usage
Welcome to Nuxt UI
<template>
<UContainer class="min-h-screen relative">
<MDottedGlowBackground
:gap="16"
:radius="2"
color-light-var="--color-gray-900"
color-dark-var="--color-gray-100"
glow-color-light-var="--color-primary-500"
glow-color-dark-var="--color-primary-400"
class="background"
/>
<div class="relative z-10 py-12">
<UCard class="max-w-2xl mx-auto backdrop-blur-sm bg-white/80 dark:bg-gray-900/80">
<template #header>
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
Welcome to Nuxt UI
</h1>
<UColorModeButton />
</div>
</template>
</UCard>
</div>
</UContainer>
</template>
Props
class
string
CSS classes to apply to the container.
style
object
Inline styles to apply to the container.
gap
number
Gap between dots in pixels.
radius
number
Radius of each dot in pixels.
color
string
Color of the dots in light mode.
darkColor
string
Color of the dots in dark mode.
glowColor
string
Glow color of the dots in light mode.
darkGlowColor
string
Glow color of the dots in dark mode.
colorLightVar
string
CSS variable for dot color in light mode.
colorDarkVar
string
CSS variable for dot color in dark mode.
glowColorLightVar
string
CSS variable for glow color in light mode.
glowColorDarkVar
string
CSS variable for glow color in dark mode.
opacity
number
Opacity of the dots (0-1).
backgroundOpacity
number
Opacity of the background gradient (0-1).
speedMin
number
Minimum animation speed.
speedMax
number
Maximum animation speed.
speedScale
number
Scale factor for animation speed.
Examples
Basic Dotted Glow Background
Dotted Glow
Subtle glowing dot patterns that create depth and visual interest in your backgrounds
<template>
<div class="relative h-64 rounded-lg overflow-hidden">
<MDottedGlowBackground
:gap="12"
:radius="1.5"
class="background"
/>
<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 Dotted Glow</h3>
</div>
</div>
</template>
Custom Colors
Custom Dotted Glow
<template>
<div class="relative h-64 rounded-lg overflow-hidden">
<MDottedGlowBackground
:gap="20"
:radius="3"
:opacity="0.8"
glow-color="rgba(236, 72, 153, 0.85)"
class="background"
/>
<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 Dotted Glow</h3>
</div>
</div>
</template>