Clyune Component GalleryLazy Image Reveal · How it works & code
Images on the page initially appear as gray placeholders and only begin downloading when they approach the viewport (distance less than 'Load distance'). After download, they fade in from blurry to clear.
Runtime logic
Visiting `/scroll-fx/lazy-img`, DemoHost lazy-loads `demos/kits/kit-scroll.js` (registry `mod: 'kit-scroll'`) and calls `mount(host, { variant: 'lazy-img' })`. mount resolves the variant to family `lazy-img`; `withControls` builds the control panel (6 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; 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.isAutoDemo — Whether auto demo is on; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.setLineDash() — Sets the dash pattern for strokes; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.stroke() — Strokes the current path; ctx.fill() — Fills the current path; ctx.save() — Saves the drawing state (transform, styles, clip); ctx.clip() — Turns the current path into the clipping region; ctx.createLinearGradient() — Creates a linear gradient; ctx.fillRect() — Fills a rectangle; ctx.restore() — Restores the saved drawing state; ctx.fillText() — Draws filled text; ctx.arcTo() — Adds an arc using tangent lines
Source code
frontend/src/demos/kits/kit-scroll.js: FAM.lazy-img (L458-L475)
Code walkthrough
L458-475: Calls the factory `scFam()` to produce the full definition (spec + doc + build) from the options below. L458-458: Title shown in the info and control panels: “Lazy-loaded images”. L458-458: Range/default of the count slider. L458-458: Extra demo-specific slider/toggle: Load distance. L458-458: Range/default of the size slider. L458-458: Default main colour. L459-459: Help text of the count parameter. L459-459: Help text of the extra parameter. L459-459: Help text of the size parameter. L460-460: Preset buttons: name → parameter overrides (5). L461-461: Body of the “Notes” section. L462-462: Main formula of the “Formula” section. L462-462: Second formula line. L463-475: Per-frame draw function: draws with Canvas 2D `setLineDash`, `beginPath`, `moveTo`, `lineTo`, `stroke`, `fill` …; math via `Math.ceil`, `Math.min`, `Math.floor`, `Math.round`; returns readouts `mode`, `cell`, `pageH` to the info panel.
Principles
Start loading: Top of the picture Load progress = clamp(top of view + rootMargin -) / Image High) Lazy to load pictures: The pictures on the page show the grey spaces first, and only when they come close to the viewer (less than "loading distance " ) do they actually start downloading, which fades from ambiguity to clarity when the download is completed. So the screen doesn't have to download all the pictures at once and load them faster. Intersection Observer's root Margin is the loading distance here. Image simulates a scrollable web page: scrollY 表示页面已经向上滚过了多少像素，这里它自动来回滚动（右侧细条就是滚动条）。元素在屏幕上的位置 = Page Location − scrollY；The degree to which the elements enter the vision is usually used scroll Event or event IntersectionObserver Let's figure this out 0~1 The progress is driven by animations such as transparency, offset, scaling, etc.