N
Nyxis
AI Animations

GradientAura

Soft, rotating conic-gradient glow behind any child element — element-scoped backdrop.

Preview

Premium

Nyxis Pro

Soft gradient glow behind the card. Pure CSS — no canvas, no deps.

Installation

pnpm add nyxis-ui

Usage

import { GradientAura } from 'nyxis-ui';

<GradientAura intensity={0.7} speedMs={9000}>
  <Card>…</Card>
</GradientAura>;

Anatomy

  • A blurred conic gradient sits behind the child, slowly rotating when active.
  • intensity (0..1) drives both opacity and blur radius.
  • colors accepts a 3-stop array — defaults to primary → violet → sky.
  • Pure CSS — no canvas, no deps. Honours prefers-reduced-motion.

When to use

Element-scoped — sits behind one card, button, or hero block. For a full-viewport ambient backdrop, use a CSS gradient on the page wrapper itself instead of a wrapping component.