Ambient Grid

A playful, high-performance background component that renders a subtle grid with interactive ambient glows that react to mouse movement.

Installation

npx raya-ui@latest add ambient-grid

File Structure

your-project

components

ambient-grid

AmbientGrid.vue

API Reference

Props

gridSize

number

24

The size of the background grid cells in pixels.

interactive

boolean

true

When true, the primary glow (color1) dynamically follows the user's mouse cursor.

color1

string

"#a855f7"

The color of the primary glow point.

color2

string

"#3b82f6"

The color of the secondary static ambient glow.

Interactive Grid

The background reacts to your movements and configuration.

Settings

Interactive MouseGlow follows the cursor position.

Grid Cell Size30px

Primary Glow (Color 1)

Secondary Glow (Color 2)

source-code.vue

<script setup lang="ts">
import { AmbientGrid } from '@/components/ui/ambient-grid'
</script>

<template>
  <div class="relative min-h-screen overflow-hidden bg-background">
    <AmbientGrid
    :grid-size="30"
    />

    <div class="relative z-10 p-10">
      <h1 class="text-4xl font-bold">Ambient Layout</h1>
    </div>
  </div>
</template>