Getting started | Hyper Flow

Install

Install the latest registry release:

npm i @scorpion7slayer/hyper-flow

yarn add @scorpion7slayer/hyper-flow

pnpm add @scorpion7slayer/hyper-flow

bun add @scorpion7slayer/hyper-flow

Render a field

Add a canvas

Give it a CSS width and height. Hyper Flow sizes the backing buffer for the current device pixel ratio.

Create the engine

Pass the canvas element or a selector to createParticleFlow().

Keep the controller

Update it during interaction and destroy it when its component unmounts.

index.htmlhtml

<canvas id="field" style="width: 420px; height: 420px"></canvas>

field.tsts

import { createParticleFlow } from "@scorpion7slayer/hyper-flow";

const particles = createParticleFlow("#field", {
  mode: "orb",
  density: 1.8,
  speed: 0.7,
  size: 0.8,
  depth: 1.1,
  shape: "line",
  lineLength: 5.4,
  viewport: { padding: 0.1, clip: true },
  colors: ["#101c31", "#2454d4", "#0c3699"],
  interaction: { mode: "repel", strength: 0.34 },
});

particles.update({ mode: "ribbon", trail: 0.78 });

Lifecycle

particles.pause();
particles.play();
particles.render(1_500);
particles.resize();
particles.destroy();

The engine pauses while the canvas is offscreen or the page is hidden. A reduced-motion preference produces a deterministic static frame by default.

Continue with Particle fields for every option or use Customization recipes for complete visual systems.

Add DOM motion

import { flow, stagger } from "@scorpion7slayer/hyper-flow";

const controls = flow(".card", {
  from: { y: 24, opacity: 0 },
  to: { y: 0, opacity: 1 },
  duration: 640,
  easing: "cubic-bezier(0.16, 1, 0.3, 1)",
  stagger: stagger(55),
});

controls.pause();
controls.play();

Browser requirements

The particle engine requires Canvas 2D. The DOM engine requires the Web Animations API. Current evergreen browsers provide both.