Clyune Component GalleryPage Flip · How it works & code
Each grid splits into upper and lower halves. When text changes, the upper half flips downward to reveal the new upper half, and the back of the flipped piece shows the new lower half.
Runtime logic
Visiting `/text-fx/pageflip`, DemoHost lazy-loads `demos/kits/kit-text.js` (registry `mod: 'kit-text'`) and calls `mount(host, { variant: 'pageflip' })`. mount resolves the variant to family `pageflip`; `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; fmt — Number formatting (fixed decimals); F — Formula block HTML; getLang — Current UI language (zh/en); S.clear — Clears with the background colour (translucent = trails); S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.save() — Saves the drawing state (transform, styles, clip); ctx.beginPath() — Starts a new path; ctx.rect() — Adds a rectangle to the path; ctx.clip() — Turns the current path into the clipping region; ctx.translate() — Translates the coordinate system; ctx.scale() — Scales the coordinate system; ctx.fillRect() — Fills a rectangle; ctx.fillText() — Draws filled text; ctx.restore() — Restores the saved drawing state; 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
Source code
frontend/src/demos/kits/kit-text.js: FAM.pageflip (L353-L365)
Code walkthrough
L353-365: Calls the factory `tFam()` to produce the full definition (spec + doc + build) from the options below. L353-353: Title shown in the info and control panels: “Page Flip”. L353-353: Range/default of the count slider. L353-353: Extra demo-specific slider/toggle: Flip Duration. L353-353: Range/default of the size slider: FontSize. L353-353: Default main colour. L353-353: Help text of the count parameter. L353-353: Help text of the extra parameter. L353-353: Preset buttons: name → parameter overrides (5). L354-354: Body of the “Notes” section. L354-354: Main formula of the “Formula” section. L354-354: Second formula line. L355-365: Per-frame draw function: draws with Canvas 2D `save`, `beginPath`, `rect`, `clip`, `translate`, `scale` …; math via `Math.min`, `Math.floor`, `Math.abs`, `Math.max`, `Math.cos`; returns readouts `mode`, `cell` to the info panel.
Principles
Flip angle θ = π · Easing ((t − 0.06i) / Duration) Upper Half Vertical Zoom = cos θ (θ 切页翻转（机场翻页牌）：每一格上下两半分开，换字时上半片向下翻倒，露出新字的上半部分，翻倒的片背面是新字的下半部分。各格依次翻转，每 3 Second in second. 文字被拆成一个个字（字形），每个字的位置、颜色、透明度都由「字的序号 i + Time t」Count it out so you can make animated verbatim.