Clyune Component GalleryBackdrop Blur · How it works & code
Used in iOS navigation bars and notification centers — content scrolls beneath cards, and the part visible through the card is blurred, showing that there's something underneath...
Runtime logic
Visiting `/filters/backdrop`, DemoHost lazy-loads `demos/kits/kit-filters.js` (registry `mod: 'kit-filters'`) and calls `mount(host, { variant: 'backdrop' })`. mount resolves the variant to family `backdrop`; `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.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.fillRect() — Fills a rectangle; ctx.beginPath() — Starts a new path; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.fill() — Fills the current path; ctx.drawImage() — Draws an image or offscreen canvas; ctx.getImageData() — Reads pixel data; ctx.save() — Saves the drawing state (transform, styles, clip); ctx.clip() — Turns the current path into the clipping region; ctx.restore() — Restores the saved drawing state; ctx.stroke() — Strokes the current path; ctx.fillText() — Draws filled text; ctx.moveTo() — Moves the pen without drawing; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path
Source code
frontend/src/demos/kits/kit-filters.js: FAM.backdrop (L366-L382)
Code walkthrough
L366-382: Calls the factory `fFam()` to produce the full definition (spec + doc + build) from the options below. L366-366: Title shown in the info and control panels: “Backdrop Blur”. L366-366: Range/default of the count slider. L366-366: Extra demo-specific slider/toggle: Backdrop Blur. L366-366: Range/default of the size slider. L366-366: Default main colour. L366-366: Hide sample photo. L367-367: Help text of the count parameter. L367-367: Help text of the extra parameter. L367-367: Help text of the size parameter. L368-368: Preset buttons: name → parameter overrides (5). L369-369: Body of the “Notes” section. L370-370: Main formula of the “Formula” section. L370-370: Second formula line. L371-382: Per-frame draw function: draws with Canvas 2D `fillRect`, `beginPath`, `arc`, `fill`, `drawImage`, `getImageData` …; math via `Math.max`, `Math.round`, `Math.sin`, `Math.min`; returns readouts `mode`, `cell` to the info panel.
Principles
Card area pixels = fu Successful (lower content) CSS：backdrop-filter: blur(r); background: rgba(15,23,42,.35) Navigation Bar Subsequent to Backboard Blur: i Limited, The Whilst Centre uses this effect Infrastructure, which Labors under the Partners' Card Demand, which is vague, to see what imagined Deliberations on the Card 733, without prejudice Tenure paras. The way to achieve this: separate images of the bottom of the area of the card04 will be blurred and/30.