AI Animations

NeuralBackground

Animated network of nodes and edges drifting across a hero — pure canvas, GPU-accelerated.

Preview

Nyxis

A modern React component library for AI products.

Installation

pnpm add nyxis-ui

Usage

import { NeuralBackground } from 'nyxis-ui';

<NeuralBackground
  nodeCount={60}
  edgeRadius={0.2}
  speed={1}
  className="text-primary h-screen w-full"
>
  <Hero />
</NeuralBackground>;

Anatomy

Pure canvas (no SVG, no DOM nodes per point).
Nodes drift slowly, edges fade with distance, brightness pulses with each node’s phase.
The dot/line colour is taken from currentColor — set it via a Tailwind class on the wrapper (text-primary, text-violet-500, etc.).
Honours prefers-reduced-motion — paints a static snapshot.
Resizes responsively via ResizeObserver.

When to use this

Hero sections, marketing pages, “AI products” landing pages. Pair with a plain <h1> and a tagline — the background carries the visual weight.