"use client"; /* * ImageComparisonSlider: a before/after reveal with a spring-driven divider. * * Two images share one frame; the "before" layer is clipped by a CSS variable * (--icp, 0 to 100) that a single rAF loop writes straight to the DOM, so a drag * never re-renders React. Press anywhere to jump the divider there (it glides on * a soft spring, then follows the pointer on a stiff one), grab the glass grip to * drag without a jump, use the arrow keys, or switch on `hover` so it follows a * mouse without a press. The corner labels fade out as the divider reaches them. * Without images it draws a night/day mountain lake in SVG. */ import { useEffect, useId, useRef, type CSSProperties, type KeyboardEvent, type PointerEvent as ReactPointerEvent } from "react"; export type ImageComparisonSliderProps = { /** Image URL for the "before" side. Omit for the built-in night scene. */ before?: string; /** Image URL for the "after" side. Omit for the built-in day scene. */ after?: string; /** Starting divider position, 0 to 100. */ initial?: number; labelBefore?: string; labelAfter?: string; /** "horizontal" splits left/right, "vertical" splits top/bottom. */ orientation?: "horizontal" | "vertical"; /** Follow a mouse without pressing. Touch and pen still drag. */ hover?: boolean; /** Called with the divider position (0 to 100) whenever the visitor moves it. */ onChange?: (position: number) => void; /** Extra classes on the root. The defaults are h-64 w-full max-w-xl. */ className?: string; }; /** Accepts http(s) and relative URLs only; strips control whitespace, rejects backslashes. */ function safeSrc(value: unknown): string | null { if (typeof value !== "string") return null; const v = value.replace(/[\t\r\n]/g, "").trim(); if (!v || v.includes("\\")) return null; const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(v); if (scheme) return scheme[1]?.toLowerCase() === "http" || scheme[1]?.toLowerCase() === "https" ? v : null; return v; } const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); /* ---- Built-in scene: the same lake at night and at dawn ------------------ */ const SCENE_W = 800; const SCENE_H = 500; const HORIZON = 318; /** A smooth skyline through deterministic points. */ function ridge(base: number, amp: number, seed: number, step: number): string { const pts: Array<[number, number]> = []; for (let x = -step; x <= SCENE_W + step * 2; x += step) { const h = Math.sin(x * 0.011 + seed) * 0.55 + Math.sin(x * 0.027 + seed * 2.3) * 0.3 + Math.sin(x * 0.061 + seed * 4.1) * 0.15; pts.push([Math.round(x * 10) / 10, Math.round((base - (h * 0.5 + 0.5) * amp) * 10) / 10]); } const first = pts[0]; if (!first) return ""; let d = "M" + first[0] + " " + first[1]; for (let i = 1; i < pts.length - 1; i++) { const p = pts[i]; const n = pts[i + 1]; if (!p || !n) continue; d += "Q" + p[0] + " " + p[1] + " " + Math.round(((p[0] + n[0]) / 2) * 10) / 10 + " " + Math.round(((p[1] + n[1]) / 2) * 10) / 10; } return d + "L" + (SCENE_W + step * 2) + " " + HORIZON + "L" + -step + " " + HORIZON + "Z"; } const RIDGE_FAR = ridge(268, 110, 1.2, 36); const RIDGE_MID = ridge(292, 92, 3.4, 30); const RIDGE_NEAR = ridge(HORIZON + 4, 70, 5.9, 26); function pine(x: number, base: number, h: number): string { const w = h * 0.34; const t = (k: number) => Math.round(k * 10) / 10; return ( "M" + t(x) + " " + t(base - h) + "L" + t(x + w * 0.5) + " " + t(base - h * 0.62) + "L" + t(x + w * 0.28) + " " + t(base - h * 0.62) + "L" + t(x + w * 0.74) + " " + t(base - h * 0.3) + "L" + t(x + w * 0.4) + " " + t(base - h * 0.3) + "L" + t(x + w) + " " + t(base) + "L" + t(x - w) + " " + t(base) + "L" + t(x - w * 0.4) + " " + t(base - h * 0.3) + "L" + t(x - w * 0.74) + " " + t(base - h * 0.3) + "L" + t(x - w * 0.28) + " " + t(base - h * 0.62) + "L" + t(x - w * 0.5) + " " + t(base - h * 0.62) + "Z" ); } const PINES: Array<[number, number]> = [ [34, 62], [70, 84], [108, 58], [146, 72], [660, 70], [700, 96], [742, 64], [782, 86], [820, 60], [622, 52], ]; const TREE_PATH = PINES.map(([x, h]) => pine(x, HORIZON + 14, h)).join(""); /** Deterministic stars (a tiny LCG, so server and client agree). */ const STARS: Array<[number, number, number]> = (() => { const out: Array<[number, number, number]> = []; let s = 7; for (let i = 0; i < 70; i++) { s = (s * 1103515245 + 12345) % 2147483648; const x = (s % 800) + 0; s = (s * 1103515245 + 12345) % 2147483648; const y = (s % 215) + 6; s = (s * 1103515245 + 12345) % 2147483648; out.push([x, y, 0.5 + (s % 100) / 100]); } return out; })(); function Scene({ mode, label }: { mode: "night" | "day"; label: string }) { const id = useId().replace(/[^a-zA-Z0-9]/g, "") + mode; const night = mode === "night"; const sky = night ? ["#03060f", "#0a1330", "#1d2c5a"] : ["#3b66b3", "#e89a8c", "#ffe3b3"]; const far = night ? "#18224a" : "#8c86bd"; const mid = night ? "#101836" : "#5d6a9e"; const near = night ? "#090e24" : "#2c3b66"; const wood = night ? "#050917" : "#14203a"; const orbX = night ? 548 : 520; const orbY = night ? 128 : HORIZON - 30; return ( ); } /* ---- Component ------------------------------------------------------------ */ const EDGE = 12; // label inset from the frame const FADE = 34; // px over which a label fades as the divider reaches it export function ImageComparisonSlider({ before, after, initial = 50, labelBefore = "Before", labelAfter = "After", orientation = "horizontal", hover = false, onChange, className, }: ImageComparisonSliderProps) { const rootRef = useRef(null); const gripRef = useRef(null); const labelBeforeRef = useRef(null); const labelAfterRef = useRef(null); const start = clamp(Number.isFinite(initial) ? initial : 50, 0, 100); const vertical = orientation === "vertical"; // Everything the loop and the handlers read lives in refs, synced in effects. const sim = useRef({ cur: start, vel: 0, target: start, drag: false, offset: 0, wake: () => {}, userSet: (p: number) => void p }); const live = useRef({ vertical, hover, label: labelBefore + "|" + labelAfter }); const touch = useRef<{ id: number; x: number; y: number; started: boolean } | null>(null); const changeRef = useRef(onChange); useEffect(() => { changeRef.current = onChange; live.current = { vertical, hover, label: labelBefore + "|" + labelAfter }; sim.current.wake(); }, [onChange, vertical, hover, labelBefore, labelAfter]); // A new `initial` repositions the divider; first run is a no-op. useEffect(() => { const s = sim.current; s.target = start; s.cur = start; s.vel = 0; s.wake(); }, [start]); useEffect(() => { const root = rootRef.current; const grip = gripRef.current; if (!root || !grip) return; const s = sim.current; const motion = window.matchMedia("(prefers-reduced-motion: reduce)"); let raf = 0; let last = -1; let lastAria = -1; const size = { w: 0, h: 0, lw: 0, lh: 0, aw: 0, ah: 0 }; const measure = () => { size.w = root.offsetWidth; size.h = root.offsetHeight; size.lw = labelBeforeRef.current?.offsetWidth ?? 0; size.lh = labelBeforeRef.current?.offsetHeight ?? 0; size.aw = labelAfterRef.current?.offsetWidth ?? 0; size.ah = labelAfterRef.current?.offsetHeight ?? 0; }; const write = () => { const c = clamp(s.cur, 0, 100); root.style.setProperty("--icp", c.toFixed(3)); const v = live.current.vertical; const at = (c / 100) * (v ? size.h : size.w); const span = v ? size.h : size.w; const ob = v ? at - (EDGE + size.lh) : at - (EDGE + size.lw); const oa = v ? span - EDGE - size.ah - at : span - EDGE - size.aw - at; root.style.setProperty("--icb", clamp(ob / FADE, 0, 1).toFixed(3)); root.style.setProperty("--ica", clamp(oa / FADE, 0, 1).toFixed(3)); const r = Math.round(clamp(s.target, 0, 100)); if (r !== lastAria) { lastAria = r; const [lb, la] = live.current.label.split("|"); grip.setAttribute("aria-valuenow", String(r)); grip.setAttribute("aria-valuetext", r + "% " + (lb ?? "Before") + ", " + (100 - r) + "% " + (la ?? "After")); } }; const frame = (t: number) => { raf = 0; const dt = last < 0 ? 1 / 60 : Math.min(0.05, (t - last) / 1000); last = t; // Stiff while held (tracks the pointer), soft when it jumps or glides. const k = s.drag ? 1100 : 240; const c = s.drag ? 66 : 26; const n = Math.max(1, Math.ceil(dt / (1 / 240))); const h = dt / n; for (let i = 0; i < n; i++) { s.vel += (-k * (s.cur - s.target) - c * s.vel) * h; s.cur += s.vel * h; } if (Math.abs(s.cur - s.target) < 0.012 && Math.abs(s.vel) < 0.05) { s.cur = s.target; s.vel = 0; last = -1; write(); return; } write(); raf = requestAnimationFrame(frame); }; s.wake = () => { measure(); if (motion.matches) { s.cur = s.target; s.vel = 0; write(); return; } if (!raf) raf = requestAnimationFrame(frame); }; s.userSet = (p: number) => { const v = clamp(p, 0, 100); s.target = v; s.wake(); changeRef.current?.(Math.round(v * 10) / 10); }; const ro = new ResizeObserver(() => { measure(); write(); }); ro.observe(root); if (labelBeforeRef.current) ro.observe(labelBeforeRef.current); if (labelAfterRef.current) ro.observe(labelAfterRef.current); measure(); write(); return () => { ro.disconnect(); if (raf) cancelAnimationFrame(raf); s.wake = () => {}; }; }, []); const place = (e: ReactPointerEvent) => { const root = rootRef.current; if (!root) return; const rect = root.getBoundingClientRect(); const span = live.current.vertical ? rect.height : rect.width; if (span <= 0) return; const at = live.current.vertical ? e.clientY - rect.top : e.clientX - rect.left; sim.current.userSet((at / span) * 100 + sim.current.offset); }; const beginDrag = (e: ReactPointerEvent, grabbed: boolean) => { const root = rootRef.current; if (!root) return; const s = sim.current; s.drag = true; root.dataset.drag = "true"; try { root.setPointerCapture(e.pointerId); } catch { /* the pointer is already gone */ } gripRef.current?.focus({ preventScroll: true }); // Grabbing the grip keeps the offset so it never jumps under the finger. const rect = root.getBoundingClientRect(); const span = live.current.vertical ? rect.height : rect.width; const at = live.current.vertical ? e.clientY - rect.top : e.clientX - rect.left; s.offset = grabbed && span > 0 ? s.cur - (at / span) * 100 : 0; place(e); }; const endDrag = () => { const root = rootRef.current; const s = sim.current; s.drag = false; s.offset = 0; if (root) root.dataset.drag = "false"; s.wake(); }; const onPointerDown = (e: ReactPointerEvent) => { if (e.pointerType === "mouse" && e.button !== 0) return; const grabbed = !!gripRef.current && gripRef.current.contains(e.target as Node); if (e.pointerType === "mouse") { beginDrag(e, grabbed); } else if (grabbed) { touch.current = null; beginDrag(e, true); } else { // Touch: wait to see whether this is a scroll, a tap or a drag. touch.current = { id: e.pointerId, x: e.clientX, y: e.clientY, started: false }; } }; const onPointerMove = (e: ReactPointerEvent) => { const s = sim.current; const tp = touch.current; if (tp && tp.id === e.pointerId && !tp.started) { const dx = Math.abs(e.clientX - tp.x); const dy = Math.abs(e.clientY - tp.y); if (Math.max(dx, dy) < 6) return; if ((live.current.vertical ? dy >= dx : dx >= dy)) { tp.started = true; beginDrag(e, false); } else { touch.current = null; } return; } if (s.drag) { if (e.pointerType === "mouse" && e.buttons === 0) { endDrag(); return; } place(e); } else if (live.current.hover && e.pointerType === "mouse") { place(e); } }; const onPointerUp = (e: ReactPointerEvent) => { const tp = touch.current; if (tp && tp.id === e.pointerId && !tp.started && e.type === "pointerup") { sim.current.offset = 0; place(e); } touch.current = null; if (sim.current.drag) endDrag(); }; const onKeyDown = (e: KeyboardEvent) => { const s = sim.current; const step = e.shiftKey ? 10 : 2; const back = live.current.vertical ? ["ArrowUp", "ArrowLeft"] : ["ArrowLeft", "ArrowDown"]; const fwd = live.current.vertical ? ["ArrowDown", "ArrowRight"] : ["ArrowRight", "ArrowUp"]; let next: number | null = null; if (back.includes(e.key)) next = s.target - step; else if (fwd.includes(e.key)) next = s.target + step; else if (e.key === "PageUp") next = s.target - 10; else if (e.key === "PageDown") next = s.target + 10; else if (e.key === "Home") next = 0; else if (e.key === "End") next = 100; if (next === null) return; e.preventDefault(); s.userSet(next); }; const beforeSrc = safeSrc(before); const afterSrc = safeSrc(after); const root: CSSProperties & Record = { "--icp": start, "--icb": 1, "--ica": 1, touchAction: vertical ? "pan-x" : "pan-y", cursor: vertical ? "ns-resize" : "ew-resize", WebkitTapHighlightColor: "transparent", }; const clip = vertical ? "inset(0 0 calc(100% - var(--icp) * 1%) 0)" : "inset(0 calc(100% - var(--icp) * 1%) 0 0)"; const pill = "pointer-events-none absolute z-[3] rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase leading-none tracking-[0.12em] text-white"; const pillStyle: CSSProperties = { background: "rgba(8,10,14,0.5)", boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.16)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", }; return (

{/* after: the base layer */}

{afterSrc ? ( // eslint-disable-next-line @next/next/no-img-element {labelAfter}

) : ( )}

{/* before: revealed up to the divider */}

{beforeSrc ? ( // eslint-disable-next-line @next/next/no-img-element {labelBefore}

) : ( )}

{/* a soft shadow the divider casts onto the after side, and the line itself */}

{labelBefore} {labelAfter} {/* the grip: clamped so it never leaves the frame */}

{/* hairline frame over the images, so a bright photo never bleeds into the page */}

); }