Clyune Component GalleryAurora · How it works & code
Color bands formed by the noise curtain.
Runtime logic
Visiting `/canvas/aurora`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'aurora' })`. mount resolves the variant to family `aurora`; `withControls` builds the control panel (4 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; makeNoise — Smooth value noise + fBm octaves; hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.createLinearGradient() — Creates a linear gradient; ctx.fillRect() — Fills a rectangle; ctx.drawImage() — Draws an image or offscreen canvas; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.fill() — Fills the current path
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.aurora (L708-L749)
Code walkthrough
L710-710: Control definitions (colour/speed/size/count/extras): Aurora Color, Band Height, Band Count, Amplitude, Pointer Wind. L711-711: Preset buttons: name → parameter overrides (4). L712-720: Info-panel content: live rows(v), formula, notes, params, steps. L721-748: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `createLinearGradient`, `fillRect`, `drawImage`, `beginPath`, `moveTo`, `lineTo` …; math via `Math.max`, `Math.round`, `Math.sin`, `Math.abs`; returns readouts `n`, `lam`, `amp`, `bp`, `lean`, `vd` to the info panel.
Principles
Top of the curtain y(x,t) = y₀ + A·[sin(kx + ωt + φ) + fbm(x/250, 0.2t)] Brightness b(x) = 0.4 + 0.6 · fbm(x / 120, 0.3t) Straight gradients per column: Colours → Transparent The real aura light is a solar wind particle that hits the upper atmosphere and glows like a wind Hanging screen 。这里每条光带的顶边由正弦波加噪声决定，再从顶边向下画一条由亮到透明的竖直渐变。 亮度也用噪声沿水平方向变化，出现一束束亮丝。多条光带用“Colour Mixed”（lighter）Overlay, overlay better. The pointer is in the right or right position, which corresponds to the wind and tends to tilt the curtain towards one side.