Clyune Component GallerySlide to Verify · How it works & code
There is a puzzle-shaped gap on the image. The user drags the slider below, and the puzzle piece moves horizontally. When released, if the distance between the puzzle and the gap is less than the tolerance, the verification...
Runtime logic
Visiting `/micro/slide-verify`, DemoHost lazy-loads `demos/kits/kit-micro.js` (registry `mod: 'kit-micro'`) and calls `mount(host, { variant: 'slide-verify' })`. mount resolves the variant to family `slide-verify`; `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. Pointer down/drag/move updates the interaction (drag handles, hover readouts); when untouched and auto-demo is on, the pointer follows a Lissajous path. 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.onDown — Pointer down; S.onUp — Pointer up; 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.createLinearGradient() — Creates a linear gradient; ctx.fill() — Fills the current path; ctx.beginPath() — Starts a new path; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.stroke() — Strokes the current path; ctx.save() — Saves the drawing state (transform, styles, clip); ctx.translate() — Translates the coordinate system; ctx.restore() — Restores the saved drawing state; ctx.fillText() — Draws filled text
Source code
frontend/src/demos/kits/kit-micro.js: FAM.slide-verify (L440-L458)
Code walkthrough
L440-458: Calls the factory `mFam()` to produce the full definition (spec + doc + build) from the options below. L440-440: Title shown in the info and control panels: “Slide to Verify”. L440-440: Range/default of the count slider. L440-440: Extra demo-specific slider/toggle: Tolerance. L440-440: Range/default of the size slider. L440-440: Default main colour. L440-440: Animation period (s). L441-441: Help text of the count parameter. L441-441: Help text of the extra parameter. L441-441: Help text of the size parameter. L442-442: Preset buttons: name → parameter overrides (5). L443-443: Body of the “Notes” section. L444-444: Main formula of the “Formula” section. L444-444: Second formula line. L445-458: Per-frame draw function: draws with Canvas 2D `createLinearGradient`, `fill`, `beginPath`, `arc`, `moveTo`, `lineTo` …; math via `Math.min`, `Math.max`, `Math.sin`, `Math.abs`, `Math.round`; returns readouts `mode`, `cell` to the info panel.
Principles
Error = |Puzzle x - Gap x| Pass ⇔ Error ≤ Tolerance Slide validation: There is a gap in the shape of the puzzle on the picture, the user drags the slide below, the puzzle blocks move horizontally, and when the puzzle is released, the pass (greener) is verified if the distance from the gap is less than the tolerance; otherwise it becomes red and shakes and slides back to the starting point. The demonstration pointer has a few random pixels error each time, and the smaller the margin, the easier it is to fail. There's no real use here DOM 控件：每个微交互都在画布上逐帧画出来。动画按固定周期自动循环播放，并用一个「演示指针」模拟用户的点击、按住或拖动；你在画布上点一下，动画就会从头重新播放一遍。右侧滑条改动后立刻生效，下方信息面板实时显示当前状态。