Draw an interaction.
Manage its cost.

A swarm of particles follows a vector field and reacts to the cursor. I developed this demo to explore browser graphics, with AI assistance.

Note updated 14 October 2026

Open the Flux demo →

Move your cursor inside this drawing.Static rendering preview, reduced motion.

What this project demonstrates

Build a graphical renderer, connect user input to the drawing and manage the animation loop.

What you can check

The demo reacts to the cursor. The component caps rendering resolution and stops drawing offscreen or in a hidden tab.

The need and the decision

Create an interactive drawing without adding a graphics library. Canvas 2D is enough for line segments and trails. Three trigonometric functions form the field; particle positions evolve in a reused array.

Implementation decisions

  • Rendering resolution capped at a devicePixelRatio of 1.5 to bound the pixel count.
  • The loop runs only while the drawing is visible and the tab active.
  • Colours read from the site’s variables to follow its palette.
  • Particles are reused; new values are created when they respawn.
Inspect the code used on this site

This excerpt is read from the component or stylesheet at build time.

const S = 0.0016;
function angle(x: number, y: number, t: number): number {
  return (
    Math.sin(x * S * 1.3 + t * 0.34) * 1.5 +
    Math.cos(y * S * 1.9 - t * 0.27) * 1.5 +
    Math.sin((x + y) * S * 0.7 + t * 0.16) * 1.1
  );
}

What the demo alone does not prove

Frame rate depends on hardware, drawing size and browser. This demo is not a benchmark: I do not claim 60 frames per second on every device. The field uses trigonometric pseudo-noise, not Perlin noise.

For a project connected to a practical need and public sources: the Foncier case study.

All notes →Background and projects →