Clyune Component GalleryMatrix Rain · How it works & code
Character rain in The Matrix style
Runtime logic
Visiting `/canvas/matrix`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'matrix' })`. mount resolves the variant to family `matrix`; `withControls` builds the control panel (5 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; makeLayer — Offscreen layer (trails / pixel fields); fadeA — Frame-rate independent fade factor; rng — Seeded deterministic PRNG (same seed, same result); hexRgb — Colour string → [r, g, b]; rgba — Builds an rgba() colour string; clamp — Clamps a value to a range; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.fillRect() — Fills a rectangle; ctx.fillText() — Draws filled text; ctx.drawImage() — Draws an image or offscreen canvas
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.matrix (L73-L125)
Code walkthrough
L74-74: Control definitions (colour/speed/size/count/extras): Char Color, Font Size px, Trail Decay α, Column Density. L75-75: Preset buttons: name → parameter overrides (5). L76-84: Info-panel content: live rows(v), formula, notes, params, steps. L85-124: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `fillRect`, `fillText`, `drawImage`; math via `Math.max`, `Math.floor`, `Math.round`, `Math.abs`, `Math.log`; returns readouts `cols`, `active`, `fs`, `vy`, `fade`, `frames`, `tail` … to the info panel.
Principles
Lightness per frame ×(1 − α): bₙ = b₀·(1 − α)ⁿ Brightness Sustainability to Disabilities Membership / 40 needs n = in1 / 40) / In (1 - alpha) frame Number of columns = width of painting / Symbol The canvass are divided into columns, each of them listed“头”字符向下落，落到新的一行就在那里写一个字。 每帧用半透明的背景色盖一层，旧字就会一点点变暗，形成拖尾。α The bigger the cover, the shorter the tail. Each column has different speeds and recommences from a random position at the top, so it seems wrong.