Hyper Flow docs | Hyper Flow

Hyper Flow combines a real-time Canvas particle engine with a compact Web Animations layer. Start from eighteen depth-sorted fields, mix topologies, chain transforms, or provide your own point math and renderer.

Create a particle field

Render a fine, responsive 3D point system in a canvas. Start here.

Tune every point

Control shape, trails, connections, pointer forces, projection and transforms. Particle fields.

Build a distinct system

Combine fields, painters and forces through complete recipes. Customization recipes.

Animate the interface

Use native keyframes, staggered groups, presets or spring easing. Smooth motion.

Sequence a scene

Coordinate several DOM targets under one controller. Timelines.

Guide an AI agent

Install the Hyper Flow skill and give agents the exact API and implementation rules. AI agent guide.

The shortest particle example

field.tsts

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

createParticleFlow("#field", {
  mode: "orb",
  density: 1.8,
  shape: "line",
  viewport: { padding: 0.1, clip: true },
  colors: ["#101c31", "#2454d4", "#0c3699"],
});

The returned controller can play, pause, render a deterministic frame, resize, update any option, and destroy the field.

Two focused entry points

createParticleFlow() owns one canvas and its real-time point field.
flow() animates one DOM target or a collection through Web Animations.
timeline() schedules several DOM flows.
inView() starts a DOM flow through IntersectionObserver.

The package has no runtime dependencies and ships TypeScript declarations.