GradientOrbs

A soft blurred ambient preset that places animated color fields around the edges of a container.

Import

tsx

import { GradientOrbs } from '@velocityuikit/velocityui'

Preview

hero

Soft blurred color fields for hero and auth layouts.

diagonal

Soft blurred color fields for hero and auth layouts.

spotlight

Soft blurred color fields for hero and auth layouts.

Props

Prop	Type	Default	Description
variant	`'hero' \| 'diagonal' \| 'spotlight'`	`'hero'`	Chooses the orb layout and focal area.

Examples

Hero preset

tsx

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

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

Centered spotlight

tsx

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

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

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 */