{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"A two-image split view where the divider "},{"type":"text","text":"only moves while you're dragging it","marks":[{"type":"bold"}]},{"type":"text","text":" — hovering across the image doesn't yank the reveal around, which is the thing every before/after slider gets wrong. The handle itself is friendlier than usual: as your cursor moves up and down, the grip "},{"type":"text","text":"homes","marks":[{"type":"bold"}]},{"type":"text","text":" toward your cursor's height so it's always where your hand is. Two skins for the grip — a skeuomorphic pyramid and a flat triangle."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Try it"}]},{"type":"paragraph","content":[{"type":"text","text":"Drag the handle in the tile above. Hover up and down without dragging and watch the grip follow."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How it works"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The split position is state ("},{"type":"text","text":"0–100%","marks":[{"type":"code"}]},{"type":"text","text":") that changes "},{"type":"text","text":"only","marks":[{"type":"bold"}]},{"type":"text","text":" between "},{"type":"text","text":"pointerdown","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"pointerup","marks":[{"type":"code"}]},{"type":"text","text":" on the handle; the container clips the \"after\" layer with "},{"type":"text","text":"clip-path","marks":[{"type":"code"}]},{"type":"text","text":", so both images stay the same size and aligned."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"On hover, a second piece of state tracks the pointer's Y and the grip eases toward it with a CSS transition — the *homing*."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The pointer is captured on the handle during a drag, so fast drags that leave the element still track."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The skin picker just swaps the icon ("},{"type":"text","text":"Pyramid","marks":[{"type":"code"}]},{"type":"text","text":" / "},{"type":"text","text":"Triangle","marks":[{"type":"code"}]},{"type":"text","text":" from lucide) and a couple of classes."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"This same behavior is now the site's CMS image-reveal slider; the lab version is the minimal, dependency-free original."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Settings"}]},{"type":"paragraph","content":[{"type":"text","text":"The gear in the top corner of the demo (14px, "},{"type":"text","text":"Settings","marks":[{"type":"code"}]},{"type":"text","text":" icon) opens a menu of this lab's controls; every change updates the demo live. Save keeps your values in the browser, Reset restores the defaults, and a universal \"Hide controls\" switch hides every lab's gear at once (a small \"show controls\" link brings it back)."}]},{"type":"enhancedImage","attrs":{"src":"/labs/shots/split-view-settings.png","alt":"The Split-view settings menu: handle style, homing speed and curve, initial split, line color, show handle","title":"The Split-view settings menu: handle style, homing speed and curve, initial split, line color, show handle","width":null}},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Control"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Type"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Default"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Range or options"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Handle style"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"select"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"3D"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"3D, Flat"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Homing speed"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"170ms"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"50ms to 4000ms"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Homing curve"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"select"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"None"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Ease in, Ease in-out, Linear, None"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Initial split"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"50%"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"10% to 90%"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Line color"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"color"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Gold (#FFC429)"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Gold, White, Foreground 50%, Pink, Blue"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Show handle"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"toggle"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on/off"}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Going live: pass "},{"type":"text","text":"showControls={false}","marks":[{"type":"code"}]},{"type":"text","text":" to hide the gear in production, or keep it and let visitors dial it in."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Install"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Download "},{"type":"text","text":"HomingHandleSplit.tsx","marks":[{"type":"code"}]},{"type":"text","text":" and drop it in your project (client component)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"npm i lucide-react","marks":[{"type":"code"}]},{"type":"text","text":" for the two grip icons (or replace them with your own SVG)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Replace the two image URLs at the top of the file with yours — both images should be the same size."}]}]}]},{"type":"codeBlock","attrs":{"language":"bash"},"content":[{"type":"text","text":"npm i lucide-react"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Use"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"type":"text","text":"import HomingHandleSplit from \"@/components/HomingHandleSplit\";\n\nexport default function Compare() {\n return (\n

\n \n

\n );\n}"}]},{"type":"paragraph","content":[{"type":"text","text":"To expose the images as props instead of constants, lift "},{"type":"text","text":"BEFORE","marks":[{"type":"code"}]},{"type":"text","text":"/"},{"type":"text","text":"AFTER","marks":[{"type":"code"}]},{"type":"text","text":" into the function signature — the rest of the file doesn't care where the URLs come from."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"The source"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"type":"text","text":"// Lab: \"Split-View with Homing Handle\" (Figma 21:1543 / 28:3299), behaving like\n// the site's image-reveal-slider: the reveal moves ONLY while you drag the line or\n// handle; while you hover, the handle glides up/down to your cursor's Y (homing).\n// The divide line spans the whole frame, not just the picture. Picker (21:2172):\n// pyramid = skeuomorphic handle (default), triangle = flat (line and handle flat,\n// no shadows, yellow).\n\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { Pyramid, Triangle } from \"lucide-react\";\nimport LabSettings, { useLabSettings, type LabSettingSchema } from \"@/components/labs/LabSettings\";\n\ntype Skin = \"skeuo\" | \"flat\";\ntype HandleStyle = \"pyramid\" | \"flat\";\n\nconst HANDLE_STYLE_TO_SKIN: Record = { pyramid: \"skeuo\", flat: \"flat\" };\n\n// ---------------------------------------------------------------------------\n// Settings (S2, see qmanning-notes/drafts/cms-plan/LAB-SETTINGS-PLAN.md).\n// Every `default` below is lifted verbatim from this file's original hard-coded\n// values (see the citation in each entry), so the gear changes nothing at rest.\n// ---------------------------------------------------------------------------\nexport const HOMING_HANDLE_SETTINGS: LabSettingSchema = [\n {\n key: \"handleStyle\",\n label: \"Handle style\",\n kind: \"select\",\n default: \"pyramid\", // was `useState(\"skeuo\")` — skeuo is the pyramid picker button\n options: [\n { value: \"pyramid\", label: \"3D\" },\n { value: \"flat\", label: \"Flat\" },\n ],\n },\n {\n key: \"homingMs\",\n label: \"Homing speed\",\n kind: \"range\",\n // The original tick() lerps handleY toward targetY by 25%/frame at ~60fps,\n // which settles (<5% remaining) in ~10 frames ≈ 170ms; 200 is the nearest\n // step at the slider's floor. Only takes effect when homingCurve !== \"none\" —\n // the default curve reproduces the original 0.25 factor exactly and ignores\n // this value, so the default look is unaffected either way.\n default: 170,\n min: 50,\n max: 4000,\n step: 50,\n unit: \"ms\",\n },\n {\n key: \"homingCurve\",\n label: \"Homing curve\",\n kind: \"select\",\n // \"none\" = today's exact algorithm (fixed 0.25/frame ease, tick() below);\n // the other curves are duration-based alternates driven by homingMs.\n default: \"none\",\n options: [\n { value: \"ease-in\", label: \"Ease in\" },\n { value: \"ease-in-out\", label: \"Ease in-out\" },\n { value: \"linear\", label: \"Linear\" },\n { value: \"none\", label: \"None\" },\n ],\n },\n {\n key: \"initialSplit\",\n label: \"Initial split\",\n kind: \"range\",\n default: 50, // was `useState(50)`\n min: 10,\n max: 90,\n step: 1,\n unit: \"%\",\n },\n {\n key: \"lineColor\",\n label: \"Line color\",\n kind: \"color\",\n // Was the flat skin's hard-coded accent stroke:\n // globals.css `.h26-divide--flat::after { background: #FFC429 }`.\n // Only visible in the flat skin, matching today's design (skeuo has no\n // accent stroke at all — see the handleStyle === \"flat\" gate below).\n default: \"#FFC429\",\n options: [\n { value: \"#FFC429\", label: \"Gold\" },\n { value: \"#FFFFFF\", label: \"White\" },\n { value: \"color-mix(in srgb, var(--foreground) 50%, transparent)\", label: \"Foreground 50%\" },\n { value: \"#FF5364\", label: \"Pink\" },\n { value: \"#84CEFF\", label: \"Blue\" },\n ],\n },\n {\n key: \"showHandle\",\n label: \"Show handle\",\n kind: \"toggle\",\n default: true, // the handle

was always rendered\n },\n];\n\nconst FRAME_MS = 16.67; // nominal rAF cadence — matches tick()'s original implicit assumption\n\n// Per-frame lerp factor for the homing ease. \"none\" reproduces the original\n// hard-coded 0.25 constant exactly (ignores homingMs); the other curves derive a\n// frame factor from homingMs so the settle time stays roughly configurable while\n// remaining stable under a continuously-moving hover target.\nfunction easeFactor(curve: string, homingMs: number): number {\n // Per-frame lerp factor from a settle time: the handle closes ~95% of the gap in\n // `homingMs`. At the default (170ms) this equals the original 0.25/frame feel.\n const f = 1 - Math.exp((-3 * FRAME_MS) / Math.max(30, homingMs));\n switch (curve) {\n case \"ease-in\":\n return f * 0.6; // starts gentler, same settle time order\n case \"ease-in-out\":\n return f * 0.8;\n case \"linear\":\n case \"none\":\n default:\n return f;\n }\n}\n\nexport default function HomingHandleSplit() {\n const { value, setValue } = useLabSettings(HOMING_HANDLE_SETTINGS, \"lab:split-view-homing-handle\");\n const handleStyle = (value.handleStyle as HandleStyle) ?? \"pyramid\";\n const homingMs = Number(value.homingMs ?? 200);\n const homingCurve = String(value.homingCurve ?? \"none\");\n const initialSplit = Number(value.initialSplit ?? 50);\n const lineColor = String(value.lineColor ?? \"#FFC429\");\n const showHandle = value.showHandle !== false;\n const skin: Skin = HANDLE_STYLE_TO_SKIN[handleStyle] ?? \"skeuo\";\n\n const frame = useRef(null);\n const [pos, setPos] = useState(initialSplit); // reveal %, changes only on drag\n const IMG_TOP = 92, IMG_H = 162, FRAME_H = 362; // slot height (tile 378 minus 8px padding each side)\n const CENTER = ((IMG_TOP + IMG_H / 2) / FRAME_H) * 100;\n const MIN = ((IMG_TOP + 12) / FRAME_H) * 100, MAX = ((IMG_TOP + IMG_H - 12) / FRAME_H) * 100;\n const [targetY, setTargetY] = useState(CENTER); // cursor Y as % of frame, clamped to the picture\n const [handleY, setHandleY] = useState(CENTER); // eased\n const [dragging, setDragging] = useState(false);\n const [handleHover, setHandleHover] = useState(false);\n const [tipSuppressed, setTipSuppressed] = useState(false); // set on drag, cleared only on a fresh enter\n\n // Settings-driven starting position: fires once at mount (matches the old\n // hard-coded 50) and again live whenever the gear's \"Initial split\" changes.\n useEffect(() => { setPos(initialSplit); }, [initialSplit]);\n\n useEffect(() => {\n let raf = 0;\n const factor = easeFactor(homingCurve, homingMs);\n const tick = () => { setHandleY((y) => (dragging ? targetY : y + (targetY - y) * factor)); raf = requestAnimationFrame(tick); };\n raf = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(raf);\n }, [targetY, dragging, homingCurve, homingMs]);\n\n const IMG_W = 250;\n const pct = (e: React.PointerEvent) => {\n const r = frame.current!.getBoundingClientRect();\n const imgLeft = r.left + (r.width - IMG_W) / 2;\n return { x: ((e.clientX - imgLeft) / IMG_W) * 100, y: ((e.clientY - r.top) / r.height) * 100 };\n };\n // line x in frame coordinates = picture left + pos% of picture width\n const lineLeft = `calc(50% + ${((pos - 50) / 100) * IMG_W}px - 2px)`;\n\n return (\n {\n const p = pct(e);\n setTargetY(Math.min(MAX, Math.max(MIN, p.y)));\n if (dragging) setPos(Math.min(100, Math.max(0, p.x)));\n }}\n onPointerUp={() => setDragging(false)}\n onPointerLeave={() => { setDragging(false); setTargetY(CENTER); }}\n >\n {/* Picture slot 250×162 r24, centered in the upper part of the frame */}\n

\n {/* Divide line: full frame height (28:3127 / flat variant) — drag to reveal */}\n { e.preventDefault(); (e.target as Element).closest(\"div\")?.setPointerCapture?.(e.pointerId); setDragging(true); setTipSuppressed(true); }}\n >\n {/* Color override for the flat skin's accent stroke (globals.css's\n ::after is a fixed #FFC429; this real element sits on top of it via\n z-index so the settings color wins without touching globals.css).\n Skeuo has no accent stroke today, so this only renders for flat —\n adding it unconditionally would change the skeuo default look. */}\n {skin === \"flat\" ? (\n \n ) : null}\n {showHandle ? (\n { e.preventDefault(); setDragging(true); setTipSuppressed(true); }}\n onPointerEnter={() => { setHandleHover(true); setTipSuppressed(false); }}\n onPointerLeave={() => setHandleHover(false)}\n >\n {/* Tooltip shows on a fresh mouseover only. A drag suppresses it for\n the rest of that hover; it returns only after leaving and\n re-entering. State-driven (dropping the h26-tip class entirely when\n suppressed) so CSS :hover can't bring it back after a drag. */}\n

\n ) : null}\n

\n \n \n

\n \n

\n );\n}\n"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"License"}]},{"type":"paragraph","content":[{"type":"text","text":"MIT."}]}]}