Getting Started

syaivo (сяйво — Ukrainian for "glow") is a zero-dependency, framework-agnostic animated background engine for the web. It renders GPU-friendly canvas effects with a unified create → mount → destroy API, ships tree-shakeable vanilla and React bindings, and respects prefers-reduced-motion out of the box.

syaivo is currently in alpha

APIs may change between releases. We're building in public — feedback and contributions are welcome!

Installation

npm install syaivo

Quick Start (Vanilla JS)

Every effect follows the same pattern: create → mount → destroy.

import { createParticles } from "syaivo";

const effect = createParticles({ color: "#a5f3fc", count: 120 });
effect.mount(document.getElementById("hero")!);

// Later:
effect.destroy();

Quick Start (React)

import { Particles } from "syaivo/react";

export function Hero() {
  return (
    <div style={{ position: "relative", height: "100vh" }}>
      <Particles color="#a5f3fc" count={120} />
      <h1>Hello</h1>
    </div>
  );
}

All effects are framework-agnostic, tree-shakeable, and have zero runtime dependencies.

Shared API

Every effect implements the BackgroundEffect interface:

interface BackgroundEffect {
  mount(container: HTMLElement): void;
  destroy(): void;
  resize(width: number, height: number): void;
  pause(): void;
  resume(): void;
}

All effects also respect prefers-reduced-motion by default.