GridGlow

A structured ambient preset with a subtle grid, glow falloff, and animated beam for dashboard and technical surfaces.

Import

tsx

import { GridGlow } from '@velocityuikit/velocityui'

Preview

Structured glow

default

Crisper geometry for dashboards, panels, and technical sections.

Structured glow

spotlight

Crisper geometry for dashboards, panels, and technical sections.

Structured glow

panel

Crisper geometry for dashboards, panels, and technical sections.

Props

Prop	Type	Default	Description
variant	`'default' \| 'spotlight' \| 'panel'`	`'default'`	Switches between centered, focused, and panel-oriented grid treatments.

Examples

Technical section background

tsx

import { AnimatedBackground, GridGlow } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <AnimatedBackground
      background={<GridGlow variant="spotlight" />}
      intensity="subtle"
      style={{ minHeight: 320, borderRadius: '1.5rem' }}
    />
  )
}

Panel treatment

tsx

import { AnimatedBackground, GridGlow } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <AnimatedBackground
      background={<GridGlow variant="panel" />}
      intensity="subtle"
      speed="fast"
      style={{ minHeight: 220, borderRadius: '1rem' }}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */