N
Nyxis
AI Animations

AIHaloBorder

Animated conic-gradient border that orbits around an element — indicates "AI-touched" content.

Preview

AI-generated

Nyxis ships adapters as peer dependencies so apps only pay for the providers they actually use.

Installation

pnpm add nyxis-ui

Usage

import { AIHaloBorder } from 'nyxis-ui';

<AIHaloBorder thickness={2} radius={12} speedMs={4000}>
  <div className="p-5">AI-generated content lives here.</div>
</AIHaloBorder>;

Anatomy

  • A conic gradient sits behind the child as a “border”, rotating continuously when active.
  • colors accepts a 3-stop array — defaults to primary → violet → sky.
  • thickness is the visible border width in px; the inner card uses radius - thickness.
  • active={false} holds the gradient at a fixed angle (still pretty).
  • Honours prefers-reduced-motion (skips the spin).