Clyune Component GallerySnowfall · How it works & code
Each layer divides the screen into a grid, placing a randomly offset snowflake in each cell and moving it downward; closer layers are larger and move faster, with wind causing snowflakes to tilt and drift.
Runtime logic
Visiting `/webgl/snow-sh`, DemoHost lazy-loads `demos/kits/kit-webgl.js` (registry `mod: 'kit-webgl'`) and calls `mount(host, { variant: 'snow-sh' })`. mount resolves the variant to family `snow-sh`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. `makeGL` compiles this demo’s GLSL fragment shader on an offscreen WebGL canvas; each frame sets uniforms (u_t, u_m, u_col…), `drawArrays` renders a full-screen quad, then `drawImage` copies it onto the 2D stage. 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; WebGL 1: Offscreen WebGL canvas running a GLSL fragment shader; 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; hexRgb — Colour string → [r, g, b]; clamp — Clamps a value to a range; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.fillText() — Draws filled text; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path; ctx.fill() — Fills the current path; ctx.stroke() — Strokes the current path; ctx.drawImage() — Draws an image or offscreen canvas; ctx.fillRect() — Fills a rectangle; gl.createShader() — Creates a vertex/fragment shader; gl.shaderSource() — Sets shader source; gl.compileShader() — Compiles a GLSL shader; gl.getShaderParameter() — Queries shader compile status; gl.getShaderInfoLog() — Reads the shader compile log; gl.createProgram() — Creates a shader program
Source code
frontend/src/demos/kits/kit-webgl.js: FAM.snow-sh (L277-L282)
Code walkthrough
L277-282: Calls the factory `glFam()` to produce the full definition (spec + doc + build) from the options below. L277-277: Title shown in the info and control panels: “Floating Snow”. L277-277: Range/default of the size slider: Snowflake Size. L277-277: Range/default of the count slider: Snowflake Layers. L278-278: Extra demo-specific slider/toggle: wind force. L278-278: Preset buttons: name → parameter overrides (4). L279-279: Body of the “Notes” section. L279-279: Main formula of the “Formula” section. L279-279: Second formula line. L280-282: GLSL fragment shader source (runs once per pixel on the GPU); uses uniforms `u_n`, `u_x`, `u_s`, `u_col`.
Principles
Grid = floor (uv) · Density + (wind) · Systematically · t)) Snowflake = snowstep(r, 0, |Gone Position - Random Point|) Snow: Each layer cuts into a grid, each with a randomly shifting snowflake and moves downwards; the next layer is larger and faster, and wind forces the snowflakes down. Every pixel is here GPU Nowadays run the same snigger independently (fragment shader), Enter pixel coordinates uv And time t, Output the color of this pixel.