CrystalAmbientGlow

CrystalAmbientGlow creates subtle, animated gradient blobs that sit behind content for atmospheric depth. Three variants handle full-screen backgrounds, localized spots behind elements, or corner accents.

Import

import { CrystalAmbientGlow } from '@artasce/crystal-ui';

Usage

{/* Full-page background glow */}
<CrystalAmbientGlow />

{/* Behind a specific element */}
<div className="relative">
  <CrystalAmbientGlow variant="spot" />
  <CrystalCard title="Featured" />
</div>

Props

Variants

Full (Page Background)

Creates two glow blobs at opposite corners, covering the full viewport. Uses position: fixed and z-index: -1.

<CrystalAmbientGlow variant="full" color="amethyst" />

Spot (Behind Element)

A single centered glow that sits behind a parent element. Uses position: absolute and requires a parent with position: relative.

<div className="relative">
  <CrystalAmbientGlow variant="spot" color="cool" />
  <div className="relative z-10">Content above the glow</div>
</div>

Corner (Accent)

A single glow positioned at the top-left corner. Good for section accents or card decorations.

<section className="relative overflow-hidden">
  <CrystalAmbientGlow variant="corner" color="warm" />
  <h2>Section Title</h2>
</section>

Color Options

Accessibility

The glow element renders with aria-hidden="true" and pointer-events: none, so it has no impact on interaction or screen readers.