16:I[54961,["/_next/static/immutable/chunks/10r1qlsoygogh.js","/_next/static/immutable/chunks/1_f1jqdld4ngu.js","/_next/static/immutable/chunks/19vifo6_mi-qi.js","/_next/static/immutable/chunks/3kb194ft35tsv.js","/_next/static/immutable/chunks/1kmzbl6k42gme.js","/_next/static/immutable/chunks/1ekzdpc_7chvz.js","/_next/static/immutable/chunks/3kscktpsmulhw.js","/_next/static/immutable/chunks/1wyf15k9llk8a.js"],"default"] 17:T2f27,'use client'; import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'; import { bounded, createVoyageMotion, voyageImage } from './voyage-motion'; export type VoyageItem = { image: string; title: string; category?: string; alt?: string; }; export type VoyageProps = { items?: VoyageItem[]; speed?: number; cameraIntensity?: number; zoom?: number; backgroundColor?: string; className?: string; paused?: boolean; compact?: boolean; onIndexChange?: (index: number) => void; autoPlay?: boolean; textColor?: string; accentColor?: string; title?: string; }; const artwork: VoyageItem[] = [ { image: '/media/gallery/image-01.webp', title: 'Soft machinery', category: 'Study 01', }, { image: '/media/gallery/image-03.webp', title: 'Other worlds', category: 'Study 02', }, { image: '/media/gallery/image-05.webp', title: 'A little wonder', category: 'Study 03', }, { image: '/media/gallery/image-07.webp', title: 'Night companion', category: 'Study 04', }, { image: '/media/gallery/image-10.webp', title: 'New perspectives', category: 'Study 05', }, { image: '/media/gallery/image-12.webp', title: 'Quiet energy', category: 'Study 06', }, { image: '/media/gallery/image-14.webp', title: 'Somewhere else', category: 'Study 07', }, { image: '/media/gallery/image-18.webp', title: 'The unexpected', category: 'Study 08', }, ]; function CurvedPrint({ item }: { item: VoyageItem }) { const [failed, setFailed] = useState(false); useEffect(() => setFailed(false), [item.image]); return ( <> {item.image && !failed ? ( <> {item.alt

setFailed(true)} /> {Array.from({ length: 24 }, (_, i) => { const u = (i + 0.5) / 24 - 0.5, angle = u * 0.64, radius = 280 / 0.64; return ( ); })} ) : ( Image unavailable )} ); } export default function Voyage({ items = artwork, speed = 1, cameraIntensity = 1, zoom = 1, backgroundColor = '#101210', accentColor = '#b9cab8', className = '', paused = false, compact = false, onIndexChange, }: VoyageProps) { const collection = useMemo( () => (Array.isArray(items) ? items : []) .filter((x) => x && typeof x.title === 'string') .map((x) => ({ ...x, image: voyageImage(x.image) })), [items], ); const signature = JSON.stringify(collection), host = useRef(null), world = useRef(null), engine = useRef | null>(null); const options = useRef({ paused, playing: true, speed, intensity: cameraIntensity, zoom, }); options.current = { paused, playing: true, speed: bounded(speed, 1, 0.2, 3), intensity: bounded(cameraIntensity, 1, 0, 2), zoom: bounded(zoom, 1, 0.7, 1.35), }; const callback = useRef(onIndexChange); callback.current = onIndexChange; const gesture = useRef<{ id: number; x: number; y: number; last: number; dragged: boolean; } | null>(null), wheelAt = useRef(-Infinity); const lastScroll = useRef(0), scrollSurface = useRef(null); useEffect(() => { if (!host.current || !world.current || !collection.length) return; lastScroll.current = scrollSurface.current?.scrollTop ?? 0; const owner = createVoyageMotion( host.current, world.current, [...world.current.querySelectorAll('.vg-card')], () => options.current, (index) => callback.current?.(index), ); engine.current = owner; return () => { owner.dispose(); engine.current = null; gesture.current = null; }; }, [signature]); useEffect(() => engine.current?.sync(), [paused, speed, cameraIntensity, zoom]); return (

{collection.length ? (

{ if (e.altKey || e.ctrlKey || e.metaKey) return; if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { e.preventDefault(); engine.current?.step(e.key === 'ArrowRight' ? 1 : -1); } }} onPointerDown={(e) => { if (e.button !== 0) return; gesture.current = { id: e.pointerId, x: e.clientX, y: e.clientY, last: e.clientX, dragged: false, }; }} onPointerMove={(e) => { const g = gesture.current; if (g && g.id === e.pointerId) { if ( !g.dragged && Math.abs(e.clientX - g.x) > 7 && Math.abs(e.clientX - g.x) > Math.abs(e.clientY - g.y) ) { g.dragged = true; engine.current?.dragging(true); try { e.currentTarget.setPointerCapture(e.pointerId); } catch {} } if (g.dragged) { engine.current?.drag( (g.last - e.clientX) / Math.max(180, e.currentTarget.clientWidth * 0.3), ); g.last = e.clientX; } } else { const b = e.currentTarget.getBoundingClientRect(); engine.current?.pointer( ((e.clientX - b.left) / Math.max(1, b.width)) * 2 - 1, ((e.clientY - b.top) / Math.max(1, b.height)) * 2 - 1, ); } }} onPointerUp={() => { gesture.current = null; engine.current?.dragging(false); }} onPointerCancel={() => { gesture.current = null; engine.current?.dragging(false); }} onLostPointerCapture={() => { gesture.current = null; engine.current?.dragging(false); }} onPointerLeave={() => { engine.current?.pointer(0, 0); if (!gesture.current?.dragged) gesture.current = null; }} onWheel={(e) => { if ( e.ctrlKey || Math.abs(e.deltaY) >= Math.abs(e.deltaX) || Math.abs(e.deltaX) < 8 ) return; const now = performance.now(); if (now - wheelAt.current > 450) { wheelAt.current = now; engine.current?.step(Math.sign(e.deltaX)); } }} >

{ const node = e.currentTarget, range = node.scrollHeight - node.clientHeight, delta = node.scrollTop - lastScroll.current; lastScroll.current = node.scrollTop; if (range > 0) engine.current?.scrub(delta / range); }} >

{collection.map((item, i) => (

))}

) : (

No artwork to explore.

)}

); } const css = ` .voyage{position:relative;width:100%;height:100%;min-height:280px;overflow:hidden;isolation:isolate;background:var(--vg-bg);color:#eee} .voyage *{box-sizing:border-box}.voyage .vg-viewport{position:absolute;inset:0;perspective:var(--vg-perspective,1000px);perspective-origin:50% 50%;touch-action:pan-y pinch-zoom;cursor:grab;outline-offset:-5px}.voyage .vg-scroll:focus-visible{outline:2px solid var(--vg-ink);outline-offset:-4px}.voyage .vg-viewport:active{cursor:grabbing} .voyage .vg-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;z-index:2;touch-action:pan-y pinch-zoom}.voyage .vg-scroll::-webkit-scrollbar{display:none}.voyage .vg-scroll-space{height:600%;min-height:1800px;pointer-events:none}.voyage .vg-world{pointer-events:none} .voyage .vg-decorations{position:absolute;transform-style:preserve-3d;pointer-events:none}.voyage .vg-orbit-line{position:absolute;width:876px;height:876px;border:1px solid color-mix(in srgb,var(--vg-ink) 32%,transparent);border-radius:50%;opacity:calc(.38 + var(--vg-energy,0)*.5)}.voyage .vg-outer-orbit{width:1020px;height:1020px;border-style:dashed;border-color:color-mix(in srgb,var(--vg-ink) 20%,transparent)}.voyage .vg-particle{position:absolute;left:0;top:0;height:2px;border-radius:50%;background:var(--vg-ink);box-shadow:0 0 4px color-mix(in srgb,var(--vg-ink) 35%,transparent);transform-origin:left center} .voyage .vg-world{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}.voyage .vg-card{position:absolute;top:0;left:0;width:0;height:0;transform-style:preserve-3d}.voyage .vg-surface{position:absolute;transform-style:preserve-3d}.voyage .vg-strip{position:absolute;left:0;top:0;height:210px;background-size:280px 210px;background-repeat:no-repeat;backface-visibility:visible} .voyage .vg-accessible-image{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}.voyage .vg-unavailable{position:absolute;transform:translate(-50%,-50%);width:280px;height:210px;display:grid;place-items:center;background:#232622;color:#eee;font:14px sans-serif}.voyage .vg-empty{position:absolute;inset:45% 20px auto;text-align:center} .voyage[data-reduced=true] .vg-surface{transform:none}.voyage[data-reduced=true] .vg-world{will-change:auto} .voyage[data-reduced=true] .vg-decorations{display:none} `; 18:T2853,export type VoyageMotionOptions = { paused: boolean; playing: boolean; speed: number; intensity: number; zoom: number; }; export const bounded = (value: number, fallback: number, min: number, max: number) => Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback; export const wrap = (value: number, count: number) => count > 0 ? ((value % count) + count) % count : 0; /** Only local paths and explicit HTTPS images; never interpret a string as markup. */ export function voyageImage(value: unknown): string { if (typeof value !== 'string' || /[\\\u0000-\u0020]/.test(value)) return ''; if (/^\/(?!\/)/.test(value) || /^\.\.?\//.test(value)) return value; try { const url = new URL(value); return url.protocol === 'https:' && !url.username && !url.password ? url.href : ''; } catch { return ''; } } /** POV rail: orbit, rise above the rim, descend inside, look outward and leave. */ export function voyageCamera(phase: number, angle: number, intensity = 1) { const track = [ [0, 1320, -180, 0], [0.22, 1040, -560, 0], [0.4, 420, -510, 120], [0.55, 75, -30, 500], [0.72, 140, 70, 520], [0.88, 810, 260, 90], [1, 1320, -180, 0], ]; const p = wrap(phase, 1); let i = 0; while (i < track.length - 2 && p > track[i + 1][0]) i++; const a = track[i], b = track[i + 1], t = (p - a[0]) / (b[0] - a[0]), u = t * t * (3 - 2 * t), mix = (j: number) => a[j] + (b[j] - a[j]) * u; const strength = bounded(intensity, 1, 0, 2), distance = 1320 + (mix(1) - 1320) * Math.min(1, strength); return { eye: [Math.sin(angle) * distance, mix(2) * strength, Math.cos(angle) * distance], target: [ Math.sin(angle + 0.8) * mix(3) * Math.min(1, strength), 0, Math.cos(angle + 0.8) * mix(3) * Math.min(1, strength), ], distance, inside: distance < 400, }; } export function voyageView(eye: number[], target: number[]) { const normalize = (v: number[]) => { const d = Math.hypot(...v) || 1; return v.map((n) => n / d); }; const back = normalize(eye.map((v, i) => v - target[i])); const right = normalize([back[2], 0, -back[0]]); const up = [ back[1] * right[2] - back[2] * right[1], back[2] * right[0] - back[0] * right[2], back[0] * right[1] - back[1] * right[0], ]; const dot = (v: number[]) => v.reduce((sum, n, i) => sum + n * eye[i], 0); return [ right[0], up[0], back[0], 0, right[1], up[1], back[1], 0, right[2], up[2], back[2], 0, -dot(right), -dot(up), -dot(back), 1, ]; } /** Deterministic dust follows the cylinder; gesture velocity lengthens its tangential wake. */ export function voyageDust(index: number, time: number, energy: number) { const seed = wrap(index * 0.61803398875, 1), angle = index * 2.39996323 + time * 0.13; const radius = 438 + wrap(index * 0.754877666, 1) * 110; return { x: Math.sin(angle) * radius, y: (seed - 0.5) * 370 + Math.sin(time * 0.4 + index) * 12, z: Math.cos(angle) * radius, yaw: (angle * 180) / Math.PI, width: 2 + bounded(energy, 0, 0, 1) * 30, opacity: 0.18 + seed * 0.2 + bounded(energy, 0, 0, 1) * 0.45, }; } /** DOM 3D camera. No WebGL context, textures, framework imports or perpetual idle clock. */ export function createVoyageMotion( host: HTMLElement, world: HTMLElement, cards: HTMLElement[], read: () => VoyageMotionOptions, changed: (index: number) => void, ) { const count = cards.length, media = matchMedia('(prefers-reduced-motion: reduce)'); const flat = typeof CSS !== 'undefined' && !CSS.supports('transform-style', 'preserve-3d'); const particles = [...world.querySelectorAll('.vg-particle')]; let frame = 0, disposed = false, visible = true, previous = 0, scale = 1, fit = 1; let current = 0, target = 0, selected = 0; let pointerX = 0, pointerY = 0, lookX = 0, lookY = 0, dragging = false; let reduced = media.matches || flat, journey = 0, journeyTarget = 0, energy = 0; function draw() { const options = read(), angle = (current / Math.max(1, count)) * Math.PI * 2; const camera = voyageCamera(journey / 34, angle, options.intensity); camera.target[0] += lookX * 90; camera.target[1] += lookY * 65; host.dataset.reduced = String(reduced); host.dataset.cursor = String(current); host.dataset.pov = camera.inside ? 'inside' : 'orbit'; host.dataset.phase = String(wrap(journey / 34, 1)); host.dataset.travel = String(journey); host.style.setProperty('--vg-energy', String(energy)); host.style.setProperty('--vg-perspective', `${1000 * scale}px`); const magnification = scale * bounded(options.zoom, 1, 0.7, 1.35); world.style.transform = reduced ? `scale(${fit * 0.85})` : `translateZ(${1000 * scale}px) scale3d(${magnification},${magnification},${magnification}) matrix3d(${voyageView(camera.eye, camera.target).join(',')})`; cards.forEach((card, index) => { const theta = (index / Math.max(1, count)) * Math.PI * 2, active = index === selected; card.dataset.active = String(active); card.style.transform = reduced ? 'none' : `translate3d(${Math.sin(theta) * 400}px,${Math.sin(theta * 2) * 24}px,${Math.cos(theta) * 400}px) rotateY(${(theta * 180) / Math.PI}deg)`; card.style.opacity = reduced ? (active ? '1' : '0') : '1'; card.style.visibility = reduced && !active ? 'hidden' : 'visible'; }); particles.forEach((particle, index) => { const dust = voyageDust(index, journey + current * 0.5, energy); particle.style.transform = `translate3d(${dust.x}px,${dust.y}px,${dust.z}px) rotateY(${dust.yaw}deg)`; particle.style.width = `${dust.width}px`; particle.style.opacity = String(dust.opacity); }); host.dataset.ready = 'true'; } function choose() { const index = wrap(Math.round(current), count); if (selected !== index) { selected = index; changed(index); } } function tick(now: number) { frame = 0; if (disposed || !visible || document.hidden || read().paused) return; const dt = Math.min(0.05, Math.max(0, (now - (previous || now - 16.67)) / 1000)); previous = now; const options = read(), auto = options.playing && !reduced && count > 1; if (auto) { const pace = bounded(options.speed, 1, 0.2, 3); journeyTarget += dt * pace; if (!dragging) target += dt * pace * 0.18; } const damping = 1 - Math.exp(-dt * 6); const before = journey; journey = reduced ? journeyTarget : journey + (journeyTarget - journey) * (1 - Math.exp(-dt * 5)); energy += (Math.min(1, Math.abs(journey - before) / Math.max(0.001, dt) / 18) - energy) * damping; if (Math.abs(journeyTarget - journey) < 0.0001) journey = journeyTarget; current = reduced ? target : current + (target - current) * damping; lookX += (pointerX - lookX) * damping; lookY += (pointerY - lookY) * damping; if (Math.abs(current - target) < 0.0001) current = target; choose(); draw(); if ( auto || Math.abs(journeyTarget - journey) > 0.0001 || energy > 0.001 || Math.abs(current - target) > 0.0001 || (!reduced && (Math.abs(pointerX - lookX) > 0.001 || Math.abs(pointerY - lookY) > 0.001)) ) wake(); } function wake() { if (!disposed && !frame && visible && !document.hidden && !read().paused) frame = requestAnimationFrame(tick); } function cancel() { cancelAnimationFrame(frame); frame = 0; previous = 0; } function sync() { cancel(); reduced = media.matches || flat; if (reduced) { energy = 0; journey = journeyTarget; target = Math.round(target); current = target; pointerX = pointerY = lookX = lookY = 0; choose(); } draw(); wake(); } function resize() { scale = Math.max( 0.15, Math.min(host.clientWidth / 1000, host.clientHeight / 590, 1.8), ); const stageHeight = world.parentElement?.clientHeight || Math.max(100, host.clientHeight - 220); fit = Math.max( 0.2, Math.min((host.clientWidth - 56) / 260, (stageHeight - 24) / 210), ); draw(); wake(); } const ro = new ResizeObserver(resize); ro.observe(host); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? false; cancel(); if (visible) wake(); }); io.observe(host); function visibility() { cancel(); if (!document.hidden) wake(); } document.addEventListener('visibilitychange', visibility); media.addEventListener('change', sync); resize(); return { sync, position: () => target, scrub(delta: number) { if (!Number.isFinite(delta) || !count || disposed) return; const amount = bounded(delta, 0, -1, 1); journeyTarget += amount * 34; target += amount * count * 1.1; if (reduced) { target = Math.round(target); journey = journeyTarget; } wake(); }, go(index: number) { if (!Number.isFinite(index) || count < 2) return; const next = wrap(Math.round(index), count); target = Math.round(target) + wrap(next - wrap(Math.round(target), count) + count / 2, count) - count / 2; wake(); }, step(direction: number) { if (count > 1) { target = Math.round(target) + direction; wake(); } }, drag(delta: number) { if (!reduced && count > 1 && Number.isFinite(delta)) { target += bounded(delta, 0, -0.5, 0.5); wake(); } }, dragging(value: boolean) { dragging = value; if (!value) target = Math.round(target); wake(); }, pointer(x: number, y: number) { if (!reduced) { pointerX = bounded(x, 0, -1, 1); pointerY = bounded(y, 0, -1, 1); wake(); } }, dispose() { if (disposed) return; disposed = true; cancel(); ro.disconnect(); io.disconnect(); document.removeEventListener('visibilitychange', visibility); media.removeEventListener('change', sync); }, }; } b:["$","$L16",null,{"viewer":{"user":null,"pro":false,"plan":null,"renewsAt":null,"cancelAtPeriodEnd":false,"provider":null},"initialView":"preview","originalSource":{"voyage":[{"name":"voyage.tsx","code":"$17"},{"name":"voyage-motion.ts","code":"$18"}]},"initialElement":"voyage","initialConfiguration":"$undefined","initialSaved":false,"initialTag":"","initialGroup":"$undefined","initialFree":false}]