Dotted Glow Background

A high-performance Canvas-based background that renders a grid of dots with an organic, shimmering glow effect. It adapts automatically to theme changes using CSS variables.

Installation

npx raya-ui@latest add dotted-glow-background

File Structure

your-project

components

dotted-glow-background

DottedGlowBackground.vue

API Reference

Props

gap

number

12

The horizontal and vertical distance between the centers of each dot in pixels.

radius

number

2

The base radius of each dot in pixels. Glow flares will expand beyond this.

opacity

number

0.6

The baseline alpha transparency for the dot grid.

speedScale

number

1.0

Multiplier for the shimmering animation speed.

Glow.

Organic Canvas Shimmer

Settings

Dot Spacing (Gap)15px

Base Radius2px

Grid Opacity0.6

Shimmer Speed1.0x

source-code.vue

<script setup lang="ts">
import { DottedGlowBackground } from '@/components/ui/dotted-glow-background'
</script>

<template>
  <div class="relative w-full h-[500px] overflow-hidden bg-background">
    <DottedGlowBackground
    :gap="15"
      color-light-var="foreground"
      color-dark-var="foreground"
      glow-color-light-var="primary"
      glow-color-dark-var="primary"
    />

    <div class="relative z-10 flex items-center justify-center h-full">
      <h1 class="text-4xl font-bold tracking-tighter">Organic Shimmer</h1>
    </div>
  </div>
</template>