CANVAS · PARTICLES

Particle fields

Build animated atmospheres from independent retained commands whose position and opacity derive from one monotonic clock.

DETERMINISTIC MOTION

No per-frame mutation

The renderer computes transforms without writing coordinates back into your Signal.

ADVANCED EXAMPLE

Mix velocity, pulse, opacity, and z-order

Each particle has its own speed and pulse frequency. The central rule and title draw last, so moving circles always travel underneath the label.

dowe
signal particles value:[
  { type:"circle" x:30 y:40 radius:9 fill:"primary" opacity:0.7 motion:{ vx:22 vy:14 pulse:0.7 wrap:true } },
  { type:"circle" x:220 y:90 radius:7 fill:"tertiary" opacity:0.8 motion:{ vx:-28 vy:20 pulse:1.2 wrap:true } },
  { type:"text" x:320 y:188 text:"MOTION FIELD" fill:"surfaceText" size:26 align:"center" },
]

Canvas scene:particles viewWidth:640 viewHeight:360 fps:60 label:"Animated particle field" w:"full" h:96

TIMING

Animation honors user and app state

Monotonic time

Velocity uses elapsed seconds, so dropped frames do not slow the scene.

Reduced motion

A reduced-motion preference freezes every command at elapsed time zero.

Route lifecycle

Frame callbacks stop when the Canvas route leaves the active view.

STATIC PREVIEW

Freeze the same scene at time zero

Set autoplay:false for deterministic posters, snapshots, or compositions that reuse motion-ready scene data without starting a frame timeline.

Arcade

Build an infographic