63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T6875,"use client"; /* * SwipeCardStack: a deck you throw cards off, on hand-written springs. * * Drag the top card and it tilts with its own x (a little more when you hold it * high), a LIKE or NOPE stamp fades in with a wash of colour, and the cards * underneath rise toward the front as you commit. Let go past the threshold, or * flick it hard enough that it would clear the threshold, and it is thrown off * the stack carrying your velocity. Buttons, the arrow keys and Backspace do the * same jobs without a pointer. Undo flies the last card back; when the deck runs * out a finished end state offers to start over. */ import { useEffect, useRef, useState, useSyncExternalStore, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type RefObject, } from "react"; export type SwipeCard = { id: string | number; title: string; subtitle?: string; meta?: string; tag?: string; /** Hue (0-360) of the generated gradient artwork. */ hue?: number; }; export type SwipeDirection = "left" | "right"; export type SwipeCardStackProps = { /** Distance in px a card must travel before letting go throws it. */ threshold?: number; /** How many cards are rendered at once. The rest wait behind them. */ stackDepth?: number; cards?: SwipeCard[]; /** Deal the deck again forever (default). Set false for a finite deck with an end state. */ loop?: boolean; likeLabel?: string; nopeLabel?: string; onSwipe?: (card: SwipeCard, direction: SwipeDirection) => void; onUndo?: (card: SwipeCard) => void; /** Called once the last card has been thrown (never when `loop` is on). */ onEnd?: () => void; /** Extra classes for the root. The default width is w-64. */ className?: string; }; const DEMO_CARDS: SwipeCard[] = [ { id: 1, title: "Alder Cove", subtitle: "Pacific Northwest", meta: "3 nights from $420", tag: "Coast", hue: 205 }, { id: 2, title: "Kestrel Ridge", subtitle: "Dolomites, Italy", meta: "5 nights from $690", tag: "Alpine", hue: 268 }, { id: 3, title: "Saffron Quarter", subtitle: "Marrakesh", meta: "4 nights from $540", tag: "City", hue: 24 }, { id: 4, title: "Lumen Atoll", subtitle: "Maldives", meta: "6 nights from $1,180", tag: "Island", hue: 168 }, { id: 5, title: "Tidewater House", subtitle: "Cornwall", meta: "2 nights from $310", tag: "Retreat", hue: 332 }, { id: 6, title: "Obsidian Flats", subtitle: "Iceland", meta: "7 nights from $960", tag: "Wild", hue: 152 }, ]; const LIKE = "#34d399"; const NOPE = "#fb7185"; const GRAIN = "url(\"data:image/svg+xml;utf8,\")"; /* ---- Engine: one rAF loop that springs every mounted card ---------------- */ type Dir = 1 | -1; interface Rec { el: HTMLElement; like: HTMLElement | null; nope: HTMLElement | null; likeWash: HTMLElement | null; nopeWash: HTMLElement | null; veil: HTMLElement | null; x: number; y: number; vx: number; vy: number; /** Effective depth in the stack: 0 is the front. Springs toward the real depth. */ d: number; vd: number; /** Resting y of a thrown card (a little lift). */ lift: number; out: 0 | Dir; drag: boolean; hidden: boolean; /** Where on the card (0 top, 1 bottom) it was grabbed. */ gy: number; px: number; py: number; x0: number; y0: number; sc: number; pid: number; samples: { t: number; x: number }[]; } interface Eng { recs: Map; /** Direction each card was last thrown, kept so an undo can fly it back in. */ dirs: Map; log: Dir[]; idx: number; n: number; loop: boolean; thr: number; depth: number; W: number; hint: -1 | 0 | 1; reduce: boolean; ready: boolean; deck: HTMLElement | null; raf: number; last: number; wake: (() => void) | null; } const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v)); const FAR_K = 2.2; function makeEng(n: number): Eng { return { recs: new Map(), dirs: new Map(), log: [], idx: 0, n, loop: false, thr: 120, depth: 3, W: 256, hint: 0, reduce: false, ready: false, deck: null, raf: 0, last: 0, wake: null, }; } /** Advance every card by dt seconds and write the result to the DOM. Returns true while anything is still moving. */ function step(e: Eng, dt: number): boolean { const W = e.W; const FAR = W * FAR_K; const thr = e.thr; let active = false; const top = e.recs.get(e.idx); const p = top ? clamp(Math.abs(top.x) / thr, 0, 1) : 0; const sub = dt > 0 ? 2 : 0; const h = dt / 2; e.recs.forEach((r, i) => { const depth = i - e.idx; if (r.hidden && depth < 0) return; if (r.hidden) { r.hidden = false; r.el.style.visibility = "visible"; } let tx = 0; let ty = 0; let td = 0; let k = 170; let c = 22; if (depth < 0) { tx = r.out * FAR; ty = r.lift; k = 48; c = 11.5; } else { if (depth === 0 && !r.drag) tx = e.hint * 14; td = depth === 0 ? 0 : Math.max(0, depth - p); } if (e.reduce && !r.drag) { r.x = depth < 0 ? r.out * W * 0.2 : tx; r.y = depth < 0 ? 0 : ty; r.d = td; r.vx = r.vy = r.vd = 0; } else { for (let s = 0; s < sub; s++) { if (!r.drag) { r.vx += (-k * (r.x - tx) - c * r.vx) * h; r.x += r.vx * h; r.vy += (-k * (r.y - ty) - c * r.vy) * h; r.y += r.vy * h; } r.vd += (-170 * (r.d - td) - 24 * r.vd) * h; r.d += r.vd * h; } const rest = !r.drag && Math.abs(r.x - tx) < 0.15 && Math.abs(r.vx) < 3 && Math.abs(r.y - ty) < 0.15 && Math.abs(r.vy) < 3 && Math.abs(r.d - td) < 0.002 && Math.abs(r.vd) < 0.03; if (rest) { r.x = tx; r.y = ty; r.d = td; r.vx = r.vy = r.vd = 0; } else active = true; } const rot = clamp((r.x / W) * 18 * (1 + (0.5 - r.gy) * 0.9), -34, 34); const sc = 1 - 0.06 * r.d; const st = r.el.style; st.transform = "translate3d(" + r.x.toFixed(2) + "px," + (r.y - 26 * r.d).toFixed(2) + "px,0) rotate(" + rot.toFixed(3) + "deg) scale(" + sc.toFixed(4) + ")"; const gone = depth < 0 && e.reduce; st.transition = e.reduce ? "opacity 200ms linear" : "none"; st.opacity = gone ? "0" : String(clamp(e.depth - r.d, 0, 1)); if (r.veil) r.veil.style.opacity = String(clamp(r.d * 0.16, 0, 0.7)); const lv = depth <= 0 && !gone ? clamp((r.x - 0.12 * thr) / (0.7 * thr), 0, 1) : 0; const nv = depth <= 0 && !gone ? clamp((-r.x - 0.12 * thr) / (0.7 * thr), 0, 1) : 0; if (r.like) { r.like.style.opacity = String(lv); r.like.style.transform = "rotate(-12deg) scale(" + (0.82 + 0.18 * lv).toFixed(3) + ")"; } if (r.nope) { r.nope.style.opacity = String(nv); r.nope.style.transform = "rotate(12deg) scale(" + (0.82 + 0.18 * nv).toFixed(3) + ")"; } if (r.likeWash) r.likeWash.style.opacity = String(lv * 0.85); if (r.nopeWash) r.nopeWash.style.opacity = String(nv * 0.85); if (depth < 0 && Math.abs(r.x) > W * 1.5 && !r.drag) { r.hidden = true; st.visibility = "hidden"; } }); return active; } function register(e: Eng, i: number, el: HTMLElement): Rec { const q = (s: string) => el.querySelector('[data-ssc="' + s + '"]'); const depth = i - e.idx; const rec: Rec = { el, like: q("like"), nope: q("nope"), likeWash: q("like-wash"), nopeWash: q("nope-wash"), veil: q("veil"), x: 0, y: 0, vx: 0, vy: 0, d: e.ready && depth > 0 ? depth + 1 : Math.max(0, depth), vd: 0, lift: -26, out: 0, drag: false, hidden: false, gy: 0.5, px: 0, py: 0, x0: 0, y0: 0, sc: 1, pid: -1, samples: [], }; const dir = e.dirs.get(i); if (depth < 0) { rec.out = dir ?? 1; rec.x = rec.out * e.W * FAR_K; rec.y = rec.lift; } else if (depth === 0 && e.ready && dir) { rec.x = dir * e.W * FAR_K; rec.y = -26; } e.recs.set(i, rec); step(e, 0); e.wake?.(); return rec; } /* ---- Hooks ---------------------------------------------------------------- */ function subscribeMotion(cb: () => void) { const m = window.matchMedia("(prefers-reduced-motion: reduce)"); m.addEventListener("change", cb); return () => m.removeEventListener("change", cb); } /** True when the visitor asked for reduced motion. False on the server. */ function useReducedMotion(): boolean { return useSyncExternalStore( subscribeMotion, () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, () => false, ); } /* ---- Artwork --------------------------------------------------------------- */ function artFor(hue: number): string { const h = ((Math.round(hue) % 360) + 360) % 360; return [ "radial-gradient(120% 78% at 18% -4%, hsl(" + h + " 92% 64% / 0.95), transparent 58%)", "radial-gradient(90% 70% at 96% 34%, hsl(" + ((h + 52) % 360) + " 88% 58% / 0.8), transparent 62%)", "radial-gradient(110% 80% at 40% 104%, hsl(" + ((h + 330) % 360) + " 80% 30%), transparent 72%)", "linear-gradient(162deg, hsl(" + h + " 58% 15%), hsl(" + ((h + 28) % 360) + " 52% 7%))", ].join(","); } /* ---- The card ----------------------------------------------------------- */ function DeckCard({ i, card, engRef, index, position, total, likeLabel, nopeLabel, onToss, }: { i: number; card: SwipeCard; engRef: RefObject; index: number; position: number; total: number; likeLabel: string; nopeLabel: string; onToss: (i: number, dir: Dir, v: number) => void; }) { const elRef = useRef(null); const isTop = i === index; useEffect(() => { const e = engRef.current; const el = elRef.current; if (!e || !el) return; register(e, i, el); return () => { e.recs.delete(i); }; }, [i, engRef]); function down(ev: ReactPointerEvent) { const e = engRef.current; if (!e || i !== e.idx) return; if (ev.pointerType === "mouse" && ev.button !== 0) return; const rec = e.recs.get(i); if (!rec) return; const deck = e.deck; const rect = rec.el.getBoundingClientRect(); rec.sc = deck ? deck.offsetWidth / Math.max(1, deck.getBoundingClientRect().width) : 1; rec.drag = true; rec.px = ev.clientX; rec.py = ev.clientY; rec.x0 = rec.x; rec.y0 = rec.y; rec.vx = rec.vy = 0; rec.gy = clamp((ev.clientY - rect.top) / Math.max(1, rect.height), 0.2, 0.8); rec.pid = ev.pointerId; rec.samples = [{ t: ev.timeStamp, x: rec.x }]; try { rec.el.setPointerCapture(ev.pointerId); } catch { /* capture is a nicety */ } e.wake?.(); } function move(ev: ReactPointerEvent) { const e = engRef.current; const rec = e?.recs.get(i); if (!e || !rec || !rec.drag || ev.pointerId !== rec.pid) return; rec.x = rec.x0 + (ev.clientX - rec.px) * rec.sc; rec.y = clamp(rec.y0 + (ev.clientY - rec.py) * rec.sc * 0.35, -70, 70); rec.samples.push({ t: ev.timeStamp, x: rec.x }); while (rec.samples.length > 2 && ev.timeStamp - (rec.samples[0]?.t ?? 0) > 90) rec.samples.shift(); e.wake?.(); } function end(ev: ReactPointerEvent, cancelled: boolean) { const e = engRef.current; const rec = e?.recs.get(i); if (!e || !rec || !rec.drag || ev.pointerId !== rec.pid) return; rec.drag = false; try { rec.el.releasePointerCapture(ev.pointerId); } catch { /* already released */ } const a = rec.samples[0]; const b = rec.samples[rec.samples.length - 1]; let v = 0; if (a && b && b.t > a.t) v = clamp(((b.x - a.x) / (b.t - a.t)) * 1000, -3200, 3200); const proj = rec.x + v * 0.16; if (!cancelled && Math.abs(proj) > e.thr) onToss(i, proj > 0 ? 1 : -1, v); else rec.vx = clamp(v, -1400, 1400); e.wake?.(); } const hue = Number.isFinite(card.hue) ? (card.hue as number) : (i * 57 + 200) % 360; const label = [card.title, card.subtitle, card.meta].filter(Boolean).join(", "); return (

end(ev, false)} onPointerCancel={(ev) => end(ev, true)} className="absolute inset-0 select-none overflow-hidden rounded-[28px] will-change-transform" style={{ zIndex: i < index ? 60 + i : 40 - (i - index), touchAction: "pan-y", cursor: isTop ? "grab" : "default", background: "#0b0c0f", boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1), 0 28px 50px -18px rgba(0,0,0,0.8), 0 6px 14px -6px rgba(0,0,0,0.6)", }} >

{card.tag ? ( {card.tag} ) : null} {card.title} {card.subtitle ? {card.subtitle} : null} {card.meta ? ( {card.meta} ) : null}

{likeLabel} {nopeLabel}

); } /* ---- Round buttons -------------------------------------------------------- */ function RoundButton({ label, color, size, disabled, onClick, onHint, children, }: { label: string; color: string; size: number; disabled: boolean; onClick: () => void; onHint?: (on: boolean) => void; children: ReactNode; }) { return ( ); } const ICON = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true } as const; /* ---- The component -------------------------------------------------------- */ export function SwipeCardStack({ threshold = 120, stackDepth = 3, cards = DEMO_CARDS, loop = true, likeLabel = "LIKE", nopeLabel = "NOPE", onSwipe, onUndo, onEnd, className = "", }: SwipeCardStackProps) { const reduce = useReducedMotion(); const engRef = useRef(null); if (engRef.current === null) engRef.current = makeEng(cards.length); const deckRef = useRef(null); const [view, setView] = useState({ index: 0, liked: 0, passed: 0, msg: "" }); const n = cards.length; const depthN = clamp(Math.round(stackDepth) || 1, 1, 6); const canLoop = loop && n > 0; useEffect(() => { const e = engRef.current; if (!e) return; e.thr = Math.max(20, threshold); e.depth = depthN; e.loop = canLoop; e.n = n; e.reduce = reduce; e.wake?.(); }, [threshold, depthN, canLoop, n, reduce]); useEffect(() => { const e = engRef.current; const deck = deckRef.current; if (!e || !deck) return; e.deck = deck; e.ready = true; e.W = deck.offsetWidth || 256; const tick = (t: number) => { e.raf = 0; const dt = e.last ? Math.min(0.034, (t - e.last) / 1000) : 0.016; e.last = t; if (step(e, dt)) e.raf = requestAnimationFrame(tick); else e.last = 0; }; e.wake = () => { if (!e.raf) e.raf = requestAnimationFrame(tick); }; const ro = new ResizeObserver(() => { e.W = deck.offsetWidth || e.W; e.wake?.(); }); ro.observe(deck); e.wake(); return () => { ro.disconnect(); if (e.raf) cancelAnimationFrame(e.raf); e.raf = 0; e.last = 0; e.wake = null; e.ready = false; }; }, []); function cardAt(i: number): SwipeCard | undefined { return n === 0 ? undefined : cards[((i % n) + n) % n]; } function sync(msg: string) { const e = engRef.current; if (!e) return; let liked = 0; for (const d of e.log) if (d === 1) liked++; setView({ index: e.idx, liked, passed: e.log.length - liked, msg }); } function toss(i: number, dir: Dir, v: number) { const e = engRef.current; if (!e || i !== e.idx || (!canLoop && i >= n)) return; const card = cardAt(i); const rec = e.recs.get(i); if (rec) { rec.out = dir; rec.drag = false; rec.vx = dir * Math.max(Math.abs(v), 700); rec.lift = clamp(rec.y, -80, 80) - 26; } e.dirs.set(i, dir); e.log.push(dir); e.idx = i + 1; e.wake?.(); const left = canLoop ? -1 : n - e.idx; const t = card?.title ?? "Card"; sync((dir === 1 ? "Liked " : "Passed on ") + t + (left >= 0 ? ". " + left + (left === 1 ? " card left." : " cards left.") : ".")); if (card) onSwipe?.(card, dir === 1 ? "right" : "left"); if (!canLoop && e.idx >= n) onEnd?.(); } function swipe(dir: Dir) { const e = engRef.current; if (e) toss(e.idx, dir, 0); } function undo() { const e = engRef.current; if (!e || e.idx <= 0) return; e.log.pop(); e.idx -= 1; const rec = e.recs.get(e.idx); if (rec) { rec.out = 0; rec.lift = -26; } e.wake?.(); const card = cardAt(e.idx); sync("Undid " + (card?.title ?? "last card") + "."); if (card) onUndo?.(card); } function restart() { const e = engRef.current; if (!e) return; e.log = []; e.dirs.clear(); e.idx = 0; e.recs.forEach((r) => { r.out = 0; r.lift = -26; }); e.wake?.(); sync("Deck restarted."); } function hint(d: -1 | 1, on: boolean) { const e = engRef.current; if (!e) return; e.hint = on ? d : e.hint === d ? 0 : e.hint; e.wake?.(); } function onKey(ev: ReactKeyboardEvent) { if (ev.target !== ev.currentTarget || ev.altKey) return; if (ev.key === "ArrowRight") swipe(1); else if (ev.key === "ArrowLeft") swipe(-1); else if (ev.key === "Backspace" || ev.key === "ArrowUp" || ((ev.metaKey || ev.ctrlKey) && ev.key.toLowerCase() === "z")) undo(); else return; ev.preventDefault(); } const ended = !canLoop && view.index >= n; const lo = Math.max(0, view.index - 3); const hi = canLoop ? view.index + depthN : Math.min(n, view.index + depthN); const slots: number[] = []; for (let i = lo; i < hi; i++) slots.push(i); const topCard = cardAt(view.index); const endRef = useRef(null); useEffect(() => { endRef.current?.toggleAttribute("inert", !ended); }, [ended]); return (

{slots.map((i) => { const card = cardAt(i); if (!card) return null; return ( ); })}

All caught up

{view.liked} liked, {view.passed} passed.
That was the whole deck.

swipe(-1)} onHint={(on) => hint(-1, on)} > swipe(1)} onHint={(on) => hint(1, on)} >

{view.msg}

); } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"components/viberdy/swipe-card-stack.tsx","content":"$64","type":"registry:component","target":"components/viberdy/swipe-card-stack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]