))} </div> </div> </div> ); } /** The titles on screen: the current one, and the ones still animating out. */ function useTitles(index: number) { const [titles, setTitles] = useState<TitleEntry[]>(() => [{ key: 0, item: index, leaving: false, animate: true }]); const counter = useRef(0); useEffect(() => { setTitles((list) => { const current = list.find((t) => !t.leaving); if (current && current.item === index) return list; const next = list.map((t) => (t.leaving ? t : { ...t, leaving: true })); next.push({ key: ++counter.current, item: index, leaving: false, animate: true }); return next.slice(-MAX_TITLES); }); }, [index]); useEffect(() => { if (!titles.some((t) => t.leaving)) return; const timer = setTimeout(() => setTitles((list) => list.filter((t) => !t.leaving)), LEAVE_MS); return () => clearTimeout(timer); }, [titles]); return titles; } /** One title, split into words (so lines still wrap) and characters (each rising in its own mask). */ function Title({ text, leaving, animate, delay }: { text: string; leaving: boolean; animate: boolean; delay: number }) { let i = 0; const words = text.split(" "); return ( <p className="og-title" data-og-leaving={leaving ? "" : undefined} data-og-animate={animate ? "" : undefined} style={{ "--og-delay": `${delay}ms` } as CSSProperties}> {words.map((word, w) => ( <Fragment key={w}> <span className="og-word"> {[...word].map((char) => ( <span className="og-char" key={i} style={{ "--og-i": i++ } as CSSProperties}> {char} </span> ))} </span> {w < words.length - 1 ? " " : null} </Fragment> ))} </p> ); } 76:T3408,"use client"; // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { PerformanceMonitor } from "@react-three/drei"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { gsap } from "gsap"; import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react"; import { Color, Vector3, type PointLight } from "three"; import { Cards, INTRO_SECONDS, type CardsConfig, type CardsHandle, type SceneShared } from "@/components/orbit-gallery-cards"; import { TextureCache } from "@/components/orbit-gallery-textures"; import { Effects } from "@/components/orbit-gallery-effects"; import { FLOOR_Y, ReflectiveGrid } from "@/components/orbit-gallery-floor"; import type { CursorBridge } from "@/components/orbit-gallery-cursor"; import type { OrbitStore } from "@/components/orbit-gallery-store"; import { damp } from "@/components/orbit-gallery-layouts"; import { CameraRig, FOV } from "@/components/orbit-gallery-camera-rig"; import type { EffectsPreset, FloorMode, QualityMode } from "@/components/orbit-gallery-types"; // ── from package/src/Scene.tsx ─────────────────────────────────────────────────────────────────────────────────────── /** * Exponential fog density (brief: ≈ 0.045). Distant cards and the floor's horizon dissolve into the background; * on paper, fog lightens what it touches, so it is thinner there. */ const FOG_DENSITY = 0.05; const FOG_DENSITY_LIGHT = 0.032; /** * The quality governor averages frame rates over MONITOR_ITERATIONS windows of MONITOR_MS: about 1.2 s, so a * machine that can't keep up steps down during or just after the intro rather than mid-browse. Each step rebuilds * the effect chain's shader, a one-off hitch. */ const MONITOR_MS = 200; const MONITOR_ITERATIONS = 6; /** * Below the lower bound (fps) quality steps down, above the upper it steps back up. Wide, so a busy moment on the * machine doesn't cost the reflections for good. */ const MONITOR_BOUNDS: [number, number] = [32, 55]; /** Largest device pixel ratio per quality tier (low, medium, high). */ const TIER_DPR = [1, 1.5, 2] as const; /** Reflection texture size per tier. */ const TIER_REFLECTION = [512, 512, 1024] as const; /** Largest texture side per tier. */ const TIER_TEXTURE = [1024, 2048, 2048] as const; /** The key light hangs this far above and in front of the active card, lighting the floor beneath it. */ const KEY_OFFSET = new Vector3(0, 1.5, 1.3); const KEY_INTENSITY_DARK = 5; const KEY_INTENSITY_LIGHT = 2.2; // No environment map: drei's <Environment> (the brief's "city" preset at 0.25, for reflections only) costs a 3.3 s // first frame on Windows' D3D backend (PMREM pre-filtering) and downloads its HDR from a CDN. The floor's // reflections come from the reflector itself; the hemisphere and key lights do the rest. export type SceneProps = { store: OrbitStore; cards: Omit<CardsConfig, "eager" | "defocus">; floor: FloorMode; effects: EffectsPreset; quality: QualityMode; /** The stage element has keyboard focus that should be shown. */ focusVisible: MutableRefObject<boolean>; /** Called with the active card's accent whenever it changes (the overlay tints its progress arc with it). */ onAccent?: (accent: string) => void; /** Called once the first frame is on screen. */ onReady?: () => void; /** The custom cursor reads the hovered card's screen position from here. */ bridge?: CursorBridge; }; /** The WebGL stage. Loaded lazily by OrbitGallery, after mount and only when WebGL is available. */ export default function Scene(props: SceneProps) { const background = props.cards.tokens.background; const tier = initialTier(props.quality); return ( <Canvas className="og-canvas" flat // Nothing is drawn until every shader has compiled (see SceneContents): the first frame then costs no compile. frameloop="never" dpr={[1, TIER_DPR[tier]!]} gl={{ antialias: false, alpha: false, stencil: false, powerPreference: "high-performance" }} camera={{ fov: FOV, near: 0.1, far: 120, position: [0, 0.42, 5.2] }} onCreated={({ gl }) => gl.setClearColor(background)} aria-hidden > <SceneContents {...props} /> </Canvas> ); } /** A first guess before any frame has been measured: phones and small machines start one tier down. */ function initialTier(quality: QualityMode): number { if (quality === "high") return 2; if (quality === "low") return 0; if (typeof navigator === "undefined") return 2; const nav = navigator as Navigator & { deviceMemory?: number }; const small = (nav.deviceMemory !== undefined && nav.deviceMemory <= 4) || (nav.hardwareConcurrency || 8) <= 4; const touch = typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches; return small || touch ? 1 : 2; } function SceneContents({ store, cards, floor, effects, quality, focusVisible, onAccent, onReady, bridge }: SceneProps) { const gl = useThree((s) => s.gl); const scene = useThree((s) => s.scene); const camera = useThree((s) => s.camera); const setFrameloop = useThree((s) => s.setFrameloop); const [ready, setReady] = useState(false); // With window.__ORBIT_GALLERY_DEBUG__ set, the renderer is reachable for checks (renderer.info in a memory audit). useEffect(() => { if (!isDebug()) return; const w = window as Window & { __ORBIT_GALLERY__?: unknown }; w.__ORBIT_GALLERY__ = { gl, store }; return () => { delete w.__ORBIT_GALLERY__; }; }, [gl, store]); // Compile every material in parallel, off the main thread where the browser can (KHR_parallel_shader_compile), // then start the frame loop. Compiling inside the first frame instead blocked the page for 100–400 ms. useEffect(() => { let live = true; const t0 = performance.now(); const start = () => { if (!live) return; debug("compiled in", Math.round(performance.now() - t0), "ms"); setFrameloop("always"); }; const compile = (gl as typeof gl & { compileAsync?: (s: typeof scene, c: typeof camera) => Promise<unknown> }).compileAsync; if (compile) compile.call(gl, scene, camera).then(start, start); else start(); return () => { live = false; }; }, [gl, scene, camera, setFrameloop]); const size = useThree((s) => s.size); const setDpr = useThree((s) => s.setDpr); const [tier, setTier] = useState(() => initialTier(quality)); const cache = useMemo(() => new TextureCache(gl, TIER_TEXTURE[initialTier(quality)]!), [gl, quality]); useEffect(() => () => cache.dispose(), [cache]); useEffect(() => { cache.maxSize = TIER_TEXTURE[tier]!; setDpr(Math.min(TIER_DPR[tier]!, typeof window === "undefined" ? 1 : window.devicePixelRatio || 1)); }, [tier, cache, setDpr]); const handle = useRef<CardsHandle | null>(null); const shared = useMemo<SceneShared>( () => ({ speed: 0, speedNorm: 0, activePosition: new Vector3(), activeAccent: new Color(1, 1, 1), focusDistance: 5, focusVisible: false, hoveredKey: null, }), [], ); const background = useMemo(() => new Color(cards.tokens.background), [cards.tokens.background]); const lastAccent = useRef(""); const started = useRef(false); const key = useRef<PointLight>(null); // Taps are resolved synchronously against the cards as they are drawn. useEffect(() => { const canvas = gl.domElement; store.setPicker((clientX, clientY) => { const rect = canvas.getBoundingClientRect(); const hit = handle.current?.pick(((clientX - rect.left) / rect.width) * 2 - 1, -(((clientY - rect.top) / rect.height) * 2 - 1)); return hit ? { item: hit.item } : null; }); return () => store.setPicker(null); }, [gl, store]); // The physics first, then GPU uploads, every frame. useFrame((_, dt) => { store.step(dt); cache.uploadPending(); shared.focusVisible = focusVisible.current; }, -2); // After the cards have moved this frame (same priority, registered after them: a parent subscribes after its // children): hover, the key light, the accent. No positive priorities anywhere: those would take rendering over // from R3F and from the effect composer. useFrame((_, dt) => { const m = store.motion; const s = store.getState(); if (key.current) { const target = shared.activePosition; key.current.position.x = damp(key.current.position.x, target.x + KEY_OFFSET.x, 6, dt); key.current.position.z = damp(key.current.position.z, target.z + KEY_OFFSET.z, 6, dt); // Mostly white, with a hint of the active card's colour. KEY_TINT.copy(WHITE).lerp(shared.activeAccent, KEY_ACCENT_SHARE); key.current.color.lerp(KEY_TINT, 1 - Math.exp(-3 * dt)); } const accent = `#${shared.activeAccent.getHexString()}`; if (accent !== lastAccent.current) { lastAccent.current = accent; onAccent?.(accent); } if (bridge) bridge.speed = shared.speed; if (!m.pointerInside || s.dragging || s.mode !== "browse" || !handle.current) { shared.hoveredKey = null; if (bridge) bridge.hover = false; if (s.hovered !== -1) store.hover(-1); return; } const hit = handle.current.pick(m.pointerX, m.pointerY); shared.hoveredKey = hit?.key ?? null; store.hover(hit ? hit.item : -1, hit?.u ?? 0, hit?.v ?? 0); if (bridge) { bridge.hover = false; const position = hit ? handle.current.screenOf(hit.key) : null; if (position) { bridge.hover = true; bridge.x = ((position.x + 1) / 2) * size.width; bridge.y = ((1 - position.y) / 2) * size.height; } } }); // The first frame has been drawn by the time the second one starts: start the intro then. const frames = useRef(0); useFrame(() => { if (++frames.current === 2 && !started.current) { started.current = true; onReady?.(); // The intro: cards come out of the fog, front first; skipped under reduced motion. const done = () => { store.setReady(); setReady(true); }; if (cards.reducedMotion) done(); else gsap.to(store.motion, { intro: 1, duration: INTRO_SECONDS, ease: "none", delay: 0.1, onComplete: done }); } }); const dark = cards.dark; const floorMode = floor === "reflective" && tier === 0 ? "grid" : floor; return ( <> <color attach="background" args={[background.r, background.g, background.b]} /> <fogExp2 attach="fog" args={[background.getHex(), cards.dark ? FOG_DENSITY : FOG_DENSITY_LIGHT]} /> {/* Watching starts once the intro has played: loading frames are slow on every machine. */} {quality === "auto" && ready && ( <PerformanceMonitor ms={MONITOR_MS} iterations={MONITOR_ITERATIONS} bounds={() => MONITOR_BOUNDS} flipflops={4} onDecline={() => { debug("quality: decline"); setTier((t) => Math.max(0, t - 1)); }} onIncline={() => { debug("quality: incline"); setTier((t) => Math.min(initialTier(quality), t + 1)); }} onFallback={() => setTier(0)} /> )} <hemisphereLight args={[dark ? "#b9c6ff" : "#ffffff", dark ? "#000000" : "#e9e5dd", dark ? 0.35 : 1.15]} /> <pointLight ref={key} position={[0, FLOOR_Y + KEY_OFFSET.y, KEY_OFFSET.z]} intensity={dark ? KEY_INTENSITY_DARK : KEY_INTENSITY_LIGHT} distance={9} decay={2} /> <CameraRig store={store} shared={shared} cardWidth={cards.cardWidth} reducedMotion={cards.reducedMotion} /> <Cards store={store} config={{ ...cards, eager: false, defocus: effects === "cinematic" }} cache={cache} shared={shared} handle={handle} /> {floorMode !== "none" && ( <ReflectiveGrid mode={floorMode} store={store} tokens={cards.tokens} dark={dark} radius={cards.radius} cardWidth={cards.cardWidth} gap={cards.gap} resolution={TIER_REFLECTION[tier]!} reducedMotion={cards.reducedMotion} /> )} {effects !== "off" && <Effects preset={effects} bokeh={effects === "cinematic" && quality === "high"} tier={tier} shared={shared} dark={dark} />} </> ); } const WHITE = new Color(1, 1, 1); function isDebug() { return typeof window !== "undefined" && Boolean((window as Window & { __ORBIT_GALLERY_DEBUG__?: boolean }).__ORBIT_GALLERY_DEBUG__); } /** Logs only when window.__ORBIT_GALLERY_DEBUG__ is set (handy when tuning quality on a device). */ function debug(...args: unknown[]) { if (isDebug()) console.info("[orbit-gallery]", ...args); } const KEY_TINT = new Color(); /** How much of the active card's accent the key light takes on. */ const KEY_ACCENT_SHARE = 0.35; 77:T7dba, // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { gsap } from "gsap"; import { clamp, wrapIndex, wrapSigned } from "@/components/orbit-gallery-layouts"; import type { LayoutName, OrbitItem, WheelMode } from "@/components/orbit-gallery-types"; // ── from package/src/hooks/store.ts ────────────────────────────────────────────────────────────────────────────────── /** * The headless core: every piece of interaction state and all of the physics, in plain TypeScript. React wraps it in * `useOrbitGallery`; the 3D scene and the DOM overlay only read from it and call its actions. Nothing here touches * the DOM or three.js, which is what lets the unit tests drive it frame by frame. * * Positions are measured in cards ("slots"): slot k is the k-th visible item. The position is unwrapped (it can grow * past the number of items on an endless arc); the active item is the one under the rounded position. */ export const PHYSICS = { /** Pixels a press must travel before it becomes a drag, so clicks still register. */ DRAG_THRESHOLD_PX: 4, /** λ of the exponential decay of velocity, per second: a fling travels velocity / λ cards. */ DAMPING: 4, /** Flings are capped at this many cards per second. */ MAX_VELOCITY: 14, /** Velocity a wheel pixel adds, in cards per second: one 100 px notch then travels one card (100 × 0.04 / λ). */ WHEEL_VELOCITY_PER_PIXEL: 0.04, /** Seconds without input after which a coast resolves into a snap. */ INPUT_SETTLE: 0.09, /** Stiffness ω of the critically damped spring used from rest (keys, clicks, autoplay): within 1% in 0.6 s. */ SPRING_OMEGA: 12, /** * A glide re-solves its decay rate to land on a card; this is the range it may pick from (per second). Below 3 the * tail creeps on for seconds; above 8 the stop feels like a brake. */ GLIDE_RATE_MIN: 3, GLIDE_RATE_MAX: 8, /** Below this speed (cards per second) a release springs to the nearest card instead of gliding. */ REST_SPEED: 0.35, /** How far past its ends a finite list follows the pointer: 0.35 of the distance dragged. */ RUBBER_BAND: 0.35, /** Seconds of pointer samples the release velocity is measured over. */ VELOCITY_WINDOW: 0.1, /** A snap ends when the carousel is this close to the card (in cards; about half a pixel). */ SETTLE_DISTANCE: 0.0015, /** …and moving slower than this. */ SETTLE_SPEED: 0.02, /** Longest frame step the physics takes, so a stalled tab doesn't fling the carousel when it comes back. */ MAX_STEP: 0.1, } as const; /** Durations of the open transition (seconds). */ export const TRANSITION = { /** Camera dolly + card un-bending to flat and filling the viewport. */ OPEN: 1.1, /** The detail view's crossfade, starting near the end of the dolly. */ DETAIL: 0.45, DETAIL_AT: 0.8, } as const; export type OrbitMode = "browse" | "opening" | "open" | "closing"; /** Discrete state: changes re-render the DOM layer. */ export type OrbitState = { /** The active item, as an index into `items`. */ index: number; /** Indices of the items shown, in order. */ visible: readonly number[]; /** True while the filter is applied ("Featured"). */ filtered: boolean; hasFilter: boolean; mode: OrbitMode; /** The item opening, open or closing; -1 otherwise. */ selected: number; /** The item under the pointer; -1 when none. */ hovered: number; layout: LayoutName; dragging: boolean; /** The intro has finished (or was skipped). */ ready: boolean; }; export type MotionPhase = "idle" | "drag" | "free" | "glide" | "spring"; /** Continuous state, mutated every frame and read by the renderers. Never put it in React state. */ export type OrbitMotion = { /** Carousel position in slots, unwrapped. */ position: number; /** Cards per second. */ velocity: number; phase: MotionPhase; /** Where a glide or a spring comes to rest. */ target: number; /** Decay rate of the current glide. */ glideRate: number; /** Open transition, 0 (on the arc) to 1 (filling the viewport). */ open: number; /** Detail view opacity, 0..1. */ detail: number; /** Intro progress, 0..1. */ intro: number; /** Pointer over the stage, -1..1 on both axes (y up). */ pointerX: number; pointerY: number; pointerInside: boolean; /** Pointer within the hovered card, -1..1 (y up). */ hoverU: number; hoverV: number; /** Running total of position shifts made when the visible list changed; cards add each change to stay put. */ slotShift: number; /** Seconds since the store started stepping. */ clock: number; /** Clock time of the last user input. */ lastInput: number; /** On-screen distance between two cards, in pixels; the scene keeps it up to date so drags stay 1:1. */ pixelsPerCard: number; }; /** What the scene answers when asked which card is under a point: the item, or null. */ export type Picker = (clientX: number, clientY: number) => { item: number } | null; export type TransitionDriver = { open: () => void; close: () => void; kill: () => void }; export type TransitionFactory = ( motion: OrbitMotion, events: { onOpened: () => void; onClosed: () => void }, /** Asked at each open and close: true jumps straight to the end (reduced motion). */ instant: () => boolean, ) => TransitionDriver; export type OrbitStoreConfig = { items: OrbitItem[]; filter?: ((item: OrbitItem) => boolean) | undefined; /** Start on the filtered set ("Featured") when there is a filter. Default true. */ initialFiltered?: boolean; /** Endless. Applies to the arc only; other layouts are always finite. */ infinite?: boolean; snap?: boolean; autoplay?: number | false; initialIndex?: number; layout?: LayoutName; reducedMotion?: boolean; onChange?: ((index: number) => void) | undefined; onSelect?: ((item: OrbitItem, index: number) => void) | undefined; /** Drives the open/close transition; GSAP by default. Tests pass an instant one. */ transition?: TransitionFactory; /** Clock in seconds, for tests. */ now?: () => number; }; /** The default transition: one GSAP timeline, played forward to open and reversed to close, from wherever it is. */ export const gsapTransition: TransitionFactory = (motion, events, instant) => { const timeline = gsap.timeline({ paused: true, onComplete: events.onOpened, onReverseComplete: events.onClosed }); timeline .to(motion, { open: 1, duration: TRANSITION.OPEN, ease: "power3.inOut" }, 0) .to(motion, { detail: 1, duration: TRANSITION.DETAIL, ease: "power2.out" }, TRANSITION.DETAIL_AT); return { open() { if (instant()) { timeline.progress(1); events.onOpened(); } else timeline.play(); }, close() { if (instant()) { timeline.progress(0); events.onClosed(); } else timeline.reverse(); }, kill() { timeline.kill(); }, }; }; export type OrbitStore = ReturnType<typeof createOrbitStore>; export function createOrbitStore(initial: OrbitStoreConfig) { let config: Required<Omit<OrbitStoreConfig, "filter" | "onChange" | "onSelect">> & Pick<OrbitStoreConfig, "filter" | "onChange" | "onSelect"> = { initialFiltered: true, infinite: true, snap: true, autoplay: false, initialIndex: 0, layout: "arc", reducedMotion: false, transition: gsapTransition, now: () => (typeof performance !== "undefined" ? performance.now() / 1000 : Date.now() / 1000), ...initial, }; const listeners = new Set<() => void>(); let picker: Picker | null = null; const pauses = new Set<string>(); let autoplayTimer = 0; const filtered = Boolean(config.filter) && config.initialFiltered; const visible = visibleItems(config.items, config.filter, filtered); const startSlot = Math.max(0, visible.indexOf(clamp(config.initialIndex, 0, Math.max(0, config.items.length - 1)))); let state: OrbitState = { index: visible[startSlot] ?? 0, visible, filtered, hasFilter: Boolean(config.filter), mode: "browse", selected: -1, hovered: -1, layout: config.layout, dragging: false, ready: false, }; const motion: OrbitMotion = { position: startSlot, velocity: 0, phase: "idle", target: startSlot, glideRate: PHYSICS.DAMPING, open: 0, detail: 0, intro: 0, pointerX: 0, pointerY: 0, pointerInside: false, hoverU: 0, hoverV: 0, slotShift: 0, clock: 0, lastInput: -Infinity, pixelsPerCard: 420, }; // Pointer bookkeeping for drags. const press = { down: false, dragging: false, /** The press stopped a moving carousel: releasing it snaps instead of clicking. */ caught: false, x: 0, y: 0, position: 0, samples: [] as { t: number; p: number }[], }; let lastWheelAt = -Infinity; /** Wheel pixels gathered under reduced motion, where the wheel steps card by card instead of coasting. */ let wheelSteps = 0; /** Made on first use and again after destroy(), so React's StrictMode remount keeps a working timeline. */ let driver: TransitionDriver | null = null; const transition = () => (driver ??= config.transition( motion, { onOpened: () => set({ mode: "open" }), onClosed: () => set({ mode: "browse", selected: -1 }), }, () => config.reducedMotion, )); // ── state plumbing ──────────────────────────────────────────────────────────────────────────────────────────── function set(patch: Partial<OrbitState>) { let changed = false; for (const key of Object.keys(patch) as (keyof OrbitState)[]) { if (state[key] !== patch[key]) { changed = true; break; } } if (!changed) return; const previous = state.index; state = { ...state, ...patch }; if (state.index !== previous) config.onChange?.(state.index); for (const listener of listeners) listener(); } const count = () => state.visible.length; /** Endless only on the arc, and only with more than one card. */ const endless = () => config.infinite && state.layout === "arc" && count() > 1; /** The item under a (possibly fractional, unwrapped) slot. */ function itemAt(slot: number) { const m = count(); if (m === 0) return -1; const k = endless() ? wrapIndex(Math.round(slot), m) : clamp(Math.round(slot), 0, m - 1); return state.visible[k] ?? -1; } function syncIndex() { const item = itemAt(motion.position); if (item >= 0 && item !== state.index) set({ index: item }); } function touch() { motion.lastInput = motion.clock; autoplayTimer = 0; } const canMove = () => state.mode === "browse" && count() > 0; // ── motion targets ──────────────────────────────────────────────────────────────────────────────────────────── /** Clamp a target into a finite list's range; endless lists take any slot. */ function bound(slot: number) { return endless() ? slot : clamp(slot, 0, Math.max(0, count() - 1)); } /** Critically damped spring to `slot`, keeping the current velocity. Used from rest (keys, clicks, autoplay). */ function springTo(slot: number) { // (+ 0 turns a -0 from Math.round(-0.3) into 0) motion.target = bound(Math.round(slot)) + 0; motion.phase = "spring"; if (config.reducedMotion) settle(); } /** * Resolve a coast into a snap. Velocity decays exponentially (rate λ) and would come to rest at p + v/λ. Pick the * card nearest that rest point in the direction of travel, then re-solve the decay rate so the same exponential * ends exactly on it: λ' = v / (target − p). Velocity stays continuous and motion is monotonic, so it cannot * overshoot. When no card gives a sensible rate (too close, or too slow to bother) a spring does it instead. */ function resolveSnap() { const p = motion.position; const v = motion.velocity; if (!config.snap) { motion.phase = "free"; return; } if (Math.abs(v) < PHYSICS.REST_SPEED) { springTo(p); return; } const target = glideTarget(p, v); if (target === null) { springTo(p + v / PHYSICS.DAMPING); return; } motion.target = target; motion.glideRate = v / (target - p); motion.phase = "glide"; if (config.reducedMotion) settle(); } function glideTarget(p: number, v: number): number | null { const dir = Math.sign(v); const rest = p + v / PHYSICS.DAMPING; const candidates = [Math.floor(rest) - dir, Math.floor(rest), Math.ceil(rest), Math.ceil(rest) + dir]; let best: number | null = null; let bestScore = Infinity; for (const raw of candidates) { const t = bound(raw); const distance = (t - p) * dir; if (distance <= PHYSICS.SETTLE_DISTANCE) continue; const rate = v / (t - p); if (rate < PHYSICS.GLIDE_RATE_MIN || rate > PHYSICS.GLIDE_RATE_MAX) continue; const score = Math.abs(Math.log(rate / PHYSICS.DAMPING)); if (score < bestScore) { bestScore = score; best = t; } } return best; } function settle() { motion.position = motion.target; motion.velocity = 0; motion.phase = "idle"; syncIndex(); } // ── actions ─────────────────────────────────────────────────────────────────────────────────────────────────── /** Move to an item (an index into `items`), the short way round on an endless arc. */ function goTo(item: number) { if (!canMove()) return; const slot = state.visible.indexOf(item); if (slot < 0) return; touch(); const from = motion.phase === "spring" ? motion.target : motion.position; springTo(endless() ? from + wrapSigned(slot - from, count()) : slot); } function step(delta: 1 | -1) { if (!canMove()) return; touch(); const from = motion.phase === "spring" || motion.phase === "glide" ? motion.target : Math.round(motion.position); springTo(from + delta); } function open(item: number = state.index) { if (item < 0 || item >= config.items.length) return; if (state.mode === "closing" && item === state.selected) { set({ mode: "opening" }); transition().open(); return; } if (state.mode !== "browse") return; if (!state.visible.includes(item)) return; touch(); if (item !== state.index) goTo(item); // Freeze the arc where it is headed, so the card that flies out is the one that was asked for. motion.velocity = 0; motion.phase = "spring"; set({ mode: "opening", selected: item, hovered: -1, dragging: false }); press.down = press.dragging = false; const found = config.items[item]; if (found) config.onSelect?.(found, item); transition().open(); } function close() { if (state.mode === "open" || state.mode === "opening") { touch(); set({ mode: "closing" }); transition().close(); } } /** A click or tap on a card: the active one opens, any other comes to the front first. */ function select(item: number) { if (state.mode === "closing") { if (item === state.selected) open(item); return; } if (state.mode !== "browse") return; if (item === state.index && Math.abs(motion.position - motion.target) < 0.5) open(item); else goTo(item); } function setFiltered(on: boolean) { const next = Boolean(config.filter) && on; if (next === state.filtered && state.hasFilter === Boolean(config.filter)) return; applyVisible(visibleItems(config.items, config.filter, next), { filtered: next, hasFilter: Boolean(config.filter) }); } /** * Swap the visible list, keeping the active item where it is on screen. The position is remapped to the active * item's new slot; the shift goes into `slotShift`, which cards add to their own slot so nothing jumps, then they * glide to their new places. */ function applyVisible(visible: number[], patch: Partial<OrbitState> = {}) { if (visible.length === 0) return; if (sameList(visible, state.visible)) { set(patch); return; } const oldIndex = state.index; let keep = visible.indexOf(oldIndex); if (keep < 0) { // The active item was filtered out: take the next visible one after it in item order, else the last before. const after = visible.findIndex((i) => i > oldIndex); keep = after >= 0 ? after : visible.length - 1; } const fraction = motion.position - Math.round(motion.position); const before = motion.position; const targetOffset = motion.target - Math.round(motion.position); motion.position = keep + fraction; motion.target = keep + Math.round(targetOffset); motion.slotShift += motion.position - before; set({ ...patch, visible, index: visible[keep] ?? 0 }); if (motion.phase === "idle") springTo(motion.position); } function setLayout(layout: LayoutName) { if (layout === state.layout) return; const wasEndless = endless(); set({ layout }); if (wasEndless && !endless()) { // Bring an unwrapped position back into range for a finite layout, without moving anything on screen. const before = motion.position; const m = count(); const wrapped = wrapIndex(Math.round(before), m) + (before - Math.round(before)); motion.position = wrapped; motion.target = wrapIndex(Math.round(motion.target), m); motion.slotShift += wrapped - before; springTo(motion.target); } } function hover(item: number, u = 0, v = 0) { if (press.dragging || state.mode !== "browse") item = -1; motion.hoverU = u; motion.hoverV = v; if (item !== state.hovered) set({ hovered: item }); } function setPointer(x: number, y: number, inside: boolean) { motion.pointerX = x; motion.pointerY = y; motion.pointerInside = inside; if (!inside && state.hovered !== -1) set({ hovered: -1 }); } function pointerDown(x: number, y: number) { // A press is recorded while closing too, so a tap on the card flying back can reopen it; drags need browse. if (state.mode !== "browse" && state.mode !== "closing") return; touch(); press.down = true; press.dragging = false; press.caught = state.mode === "browse" && Math.abs(motion.velocity) > PHYSICS.REST_SPEED * 2; if (press.caught) { // Like a hand on a spinning wheel: a press stops the carousel where it is. motion.velocity = 0; motion.phase = "drag"; } press.x = x; press.y = y; press.position = motion.position; press.samples = [{ t: config.now(), p: motion.position }]; } function pointerMove(x: number, y: number) { if (!press.down || !canMove()) return; const dx = x - press.x; if (!press.dragging) { if (Math.hypot(dx, y - press.y) < PHYSICS.DRAG_THRESHOLD_PX) return; // Start the drag from here, so the threshold doesn't make the carousel jump by 4 px. press.dragging = true; press.x = x; press.position = motion.position; motion.velocity = 0; motion.phase = "drag"; set({ dragging: true, hovered: -1 }); return; } touch(); let position = press.position - (x - press.x) / motion.pixelsPerCard; if (!endless()) { const max = Math.max(0, count() - 1); if (position < 0) position *= PHYSICS.RUBBER_BAND; else if (position > max) position = max + (position - max) * PHYSICS.RUBBER_BAND; } motion.position = position; const now = config.now(); press.samples.push({ t: now, p: position }); while (press.samples.length > 2 && now - press.samples[0]!.t > PHYSICS.VELOCITY_WINDOW) press.samples.shift(); syncIndex(); } /** Ends a press. Returns true when it was a tap (not a drag), which the caller turns into a click on a card. */ function pointerUp(x: number, y: number): boolean { if (!press.down) return false; press.down = false; if (!press.dragging) { if (press.caught) { press.caught = false; resolveSnap(); return false; } const hit = picker?.(x, y); if (hit) select(hit.item); return true; } press.caught = false; press.dragging = false; set({ dragging: false }); const now = config.now(); const first = press.samples[0]; const last = press.samples[press.samples.length - 1]; let velocity = 0; if (first && last && last.t - first.t > 1e-3 && now - last.t < PHYSICS.VELOCITY_WINDOW) { velocity = (last.p - first.p) / (last.t - first.t); } motion.velocity = clamp(velocity, -PHYSICS.MAX_VELOCITY, PHYSICS.MAX_VELOCITY); resolveSnap(); return false; } function pointerCancel() { if (press.dragging) { press.dragging = false; set({ dragging: false }); resolveSnap(); } press.down = false; } /** * A wheel or trackpad event. Returns true when it was used (the caller then prevents the page from scrolling). * Both axes turn the arc in "all" mode; "horizontal" leaves vertical scrolling to the page. */ function wheel(deltaX: number, deltaY: number, mode: WheelMode = "all"): boolean { if (mode === "off" || !canMove()) return false; const horizontal = Math.abs(deltaX) > Math.abs(deltaY); if (mode === "horizontal" && !horizontal) return false; const delta = mode === "horizontal" || horizontal ? deltaX : deltaY; if (delta === 0) return mode === "all"; touch(); if (config.reducedMotion) { wheelSteps += delta; if (Math.abs(wheelSteps) >= REDUCED_WHEEL_STEP_PX) { step(wheelSteps > 0 ? 1 : -1); wheelSteps = 0; } return true; } lastWheelAt = motion.clock; nudge(delta * PHYSICS.WHEEL_VELOCITY_PER_PIXEL, false); return true; } /** Adds velocity (cards per second); the carousel coasts and then snaps. */ function nudge(velocity: number, isInput = true) { if (!canMove()) return; if (isInput) { touch(); lastWheelAt = motion.clock; } if (motion.phase === "drag") return; // A coast continues from the current motion; a spring or glide hands its velocity over. motion.velocity = clamp(motion.velocity + velocity, -PHYSICS.MAX_VELOCITY, PHYSICS.MAX_VELOCITY); motion.phase = "free"; } /** Keyboard. Returns true when the key was used. */ function key(name: string): boolean { if (name === "Escape") { if (state.mode === "open" || state.mode === "opening") { close(); return true; } return false; } if (state.mode !== "browse") return false; switch (name) { case "ArrowRight": case "ArrowDown": step(1); return true; case "ArrowLeft": case "ArrowUp": step(-1); return true; case "Home": goTo(state.visible[0] ?? 0); return true; case "End": goTo(state.visible[state.visible.length - 1] ?? 0); return true; case "Enter": open(state.index); return true; default: return false; } } /** Put the carousel on a slot at once, without motion (the CSS fallback follows its own scroll this way). */ function place(slot: number) { if (count() === 0) return; motion.position = motion.target = bound(slot); motion.velocity = 0; motion.phase = "idle"; syncIndex(); } /** Autoplay waits while any reason holds: "hover", "focus", "hidden", or your own. */ function setPaused(reason: string, paused: boolean) { if (paused) pauses.add(reason); else pauses.delete(reason); autoplayTimer = 0; } /** Called by the scene when the intro has played (or right away when it is skipped). */ function setReady() { motion.intro = 1; set({ ready: true }); } // ── the frame step ──────────────────────────────────────────────────────────────────────────────────────────── function stepFrame(rawDt: number) { const dt = clamp(rawDt, 0, PHYSICS.MAX_STEP); motion.clock += dt; const p = motion.position; switch (motion.phase) { case "free": { // Exact integral of v·e^(−λt) over the step: frame-rate independent. const decay = Math.exp(-PHYSICS.DAMPING * dt); const v1 = motion.velocity * decay; motion.position += (motion.velocity - v1) / PHYSICS.DAMPING; motion.velocity = v1; if (!endless() && keepInRange()) break; if (motion.clock - lastWheelAt > PHYSICS.INPUT_SETTLE) { if (config.snap) resolveSnap(); else if (Math.abs(motion.velocity) < PHYSICS.SETTLE_SPEED) { motion.velocity = 0; motion.phase = "idle"; } } break; } case "glide": { const rate = motion.glideRate; const v1 = motion.velocity * Math.exp(-rate * dt); motion.position += (motion.velocity - v1) / rate; motion.velocity = v1; const remaining = (motion.target - motion.position) * Math.sign(motion.velocity || 1); if (Math.abs(motion.target - motion.position) < PHYSICS.SETTLE_DISTANCE || remaining < 0) settle(); break; } case "spring": { // Critically damped spring, solved exactly over the step: x(t) = (x0 + (v0 + ωx0)t)e^(−ωt). const omega = PHYSICS.SPRING_OMEGA; const x0 = motion.position - motion.target; const c = motion.velocity + omega * x0; const e = Math.exp(-omega * dt); const x1 = (x0 + c * dt) * e; const v1 = (motion.velocity - omega * c * dt) * e; if (x0 !== 0 && Math.sign(x1) !== Math.sign(x0)) { // It would cross the card: stop on it instead (only possible when it started fast toward a near card). settle(); break; } motion.position = motion.target + x1; motion.velocity = v1; if (Math.abs(x1) < PHYSICS.SETTLE_DISTANCE && Math.abs(v1) < PHYSICS.SETTLE_SPEED) settle(); break; } default: break; } if (motion.position !== p) syncIndex(); tickAutoplay(dt); } /** A finite list coasting past an end springs back from it. */ function keepInRange() { const max = Math.max(0, count() - 1); if (motion.position >= 0 && motion.position <= max) return false; motion.velocity *= 0.5; springTo(clamp(motion.position, 0, max)); return true; } function tickAutoplay(dt: number) { const seconds = config.autoplay; if (!seconds || seconds <= 0 || config.reducedMotion || !state.ready) return; if (state.mode !== "browse" || pauses.size > 0 || motion.phase !== "idle" || state.dragging) { autoplayTimer = 0; return; } autoplayTimer += dt; if (autoplayTimer >= seconds) { autoplayTimer = 0; const from = Math.round(motion.position); const m = count(); // A finite list starts over from the first card. springTo(endless() || from < m - 1 ? from + 1 : 0); } } // ── configuration ───────────────────────────────────────────────────────────────────────────────────────────── /** Apply new options (props changed). Items, filter and layout changes keep the active item where possible. */ function configure(next: Partial<OrbitStoreConfig>) { const itemsChanged = next.items !== undefined && itemsKey(next.items) !== itemsKey(config.items); const filterChanged = "filter" in next && Boolean(next.filter) !== Boolean(config.filter); const wasEndless = endless(); config = { ...config, ...next }; if (next.layout && next.layout !== state.layout) setLayout(next.layout); // A new filter function (an inline arrow re-created each render) only matters if it picks other items: // applyVisible compares the lists and does nothing when they match. if (itemsChanged || filterChanged || (config.filter && state.filtered)) { const filteredNow = Boolean(config.filter) && (state.hasFilter ? state.filtered : config.initialFiltered); applyVisible(visibleItems(config.items, config.filter, filteredNow), { filtered: filteredNow, hasFilter: Boolean(config.filter), }); } if (wasEndless && !endless() && state.layout === "arc") { motion.position = clamp(wrapIndex(Math.round(motion.position), count()), 0, count() - 1); motion.target = motion.position; syncIndex(); } } return { motion, getState: () => state, subscribe(listener: () => void) { listeners.add(listener); return () => listeners.delete(listener); }, /** Endless right now (arc layout, infinite on, more than one card). */ isEndless: endless, configure, step: stepFrame, next: () => step(1), prev: () => step(-1), goTo, open, close, select, setFiltered, toggleFilter: () => setFiltered(!state.filtered), setLayout, hover, setPointer, pointerDown, pointerMove, pointerUp, pointerCancel, wheel, nudge: (velocity: number) => nudge(velocity, true), key, setPaused, setReady, place, setPicker(next: Picker | null) { picker = next; }, setPixelsPerCard(px: number) { if (px > 1 && Number.isFinite(px)) motion.pixelsPerCard = px; }, /** Stops the transition timeline. The store keeps working: a later open() makes a new one. */ destroy() { driver?.kill(); driver = null; }, }; } /** Pixels of wheel that make one step under reduced motion (a mouse notch is about 100). */ const REDUCED_WHEEL_STEP_PX = 60; function sameList(a: readonly number[], b: readonly number[]) { if (a.length !== b.length) return false; for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false; return true; } function itemsKey(items: OrbitItem[]) { return JSON.stringify(items.map((item) => item.id)); } /** Indices of the items that pass the filter (all of them when it's off or would leave nothing). */ export function visibleItems(items: OrbitItem[], filter: ((item: OrbitItem) => boolean) | undefined, filtered: boolean) { const all = items.map((_, i) => i); if (!filter || !filtered) return all; const kept = all.filter((i) => filter(items[i]!)); return kept.length > 0 ? kept : all; } 78:T3616, // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { ClampToEdgeWrapping, Color, DataTexture, LinearFilter, LinearMipmapLinearFilter, RGBAFormat, SRGBColorSpace, Texture, VideoTexture, type WebGLRenderer } from "three"; import { parseColor, toHex } from "@/components/orbit-gallery-theme"; // ── from package/src/Cards/useTextureLoader.ts ─────────────────────────────────────────────────────────────────────── /** Textures load with at most this many requests in flight; the rest wait their turn by priority. */ const MAX_CONCURRENT = 3; /** Uploading a big texture to the GPU takes a few milliseconds; never more than this many per frame. */ const UPLOADS_PER_FRAME = 1; /** Anisotropic filtering, for cards seen at an angle on the arc. */ const ANISOTROPY = 8; /** An unused texture lingers this long (ms) before it is freed, so a card that comes straight back is instant. */ const RELEASE_DELAY = 4000; export type TextureEntry = { url: string; texture: Texture | null; /** Width / height of the picture. */ aspect: number; /** The picture's most vivid colour (sRGB hex), measured from a 16 × 16 downsample. */ accent: string | null; status: "idle" | "queued" | "loading" | "ready" | "error"; refs: number; priority: number; releaseTimer: ReturnType<typeof setTimeout> | null; listeners: Set<() => void>; }; /** * Every picture the gallery shows, loaded once however many cards (and copies) show it, decoded off the main thread * with createImageBitmap where the browser can, capped to `maxSize`, uploaded to the GPU one per frame, and freed * when no card has needed it for a while. */ export class TextureCache { private entries = new Map<string, TextureEntry>(); private inFlight = 0; private uploads: Texture[] = []; private disposed = false; constructor( private renderer: WebGLRenderer, public maxSize: number, ) {} /** The entry for `url`, created on first use. */ entry(url: string): TextureEntry { let entry = this.entries.get(url); if (!entry) { entry = { url, texture: null, aspect: 0, accent: null, status: "idle", refs: 0, priority: Infinity, releaseTimer: null, listeners: new Set() }; this.entries.set(url, entry); } return entry; } /** Take a reference and ask for the picture with a priority (lower loads sooner). */ request(url: string, priority: number) { const entry = this.entry(url); if (entry.releaseTimer) { clearTimeout(entry.releaseTimer); entry.releaseTimer = null; } entry.priority = Math.min(entry.priority, priority); if (entry.status === "idle" || entry.status === "error") { if (entry.status === "error") return entry; entry.status = "queued"; this.pump(); } return entry; } retain(url: string) { const entry = this.entry(url); entry.refs++; if (entry.releaseTimer) { clearTimeout(entry.releaseTimer); entry.releaseTimer = null; } return entry; } release(url: string) { const entry = this.entries.get(url); if (!entry) return; entry.refs = Math.max(0, entry.refs - 1); if (entry.refs === 0 && !entry.releaseTimer) { entry.releaseTimer = setTimeout(() => this.free(entry), RELEASE_DELAY); } } /** Raise a waiting request's priority (a card came closer to the front). */ prioritize(url: string, priority: number) { const entry = this.entries.get(url); if (entry && entry.status === "queued" && priority < entry.priority) entry.priority = priority; } /** Called once per frame by the scene: hands at most one decoded texture to the GPU. */ uploadPending() { for (let i = 0; i < UPLOADS_PER_FRAME && this.uploads.length > 0; i++) { const texture = this.uploads.shift()!; const t0 = typeof performance !== "undefined" ? performance.now() : 0; this.renderer.initTexture(texture); if (typeof window !== "undefined" && (window as Window & { __ORBIT_GALLERY_DEBUG__?: boolean }).__ORBIT_GALLERY_DEBUG__) { console.info("[orbit-gallery] upload", Math.round(performance.now() - t0), "ms"); } } } dispose() { this.disposed = true; for (const entry of this.entries.values()) { if (entry.releaseTimer) clearTimeout(entry.releaseTimer); entry.texture?.dispose(); closeImage(entry.texture); } this.entries.clear(); this.uploads = []; } private free(entry: TextureEntry) { entry.releaseTimer = null; if (entry.refs > 0) return; entry.texture?.dispose(); closeImage(entry.texture); this.entries.delete(entry.url); } private pump() { while (this.inFlight < MAX_CONCURRENT) { let next: TextureEntry | null = null; for (const entry of this.entries.values()) { if (entry.status === "queued" && (!next || entry.priority < next.priority)) next = entry; } if (!next) return; this.load(next); } } private async load(entry: TextureEntry) { entry.status = "loading"; this.inFlight++; try { const { image, width, height, flipped } = await decode(entry.url, this.maxSize); if (this.disposed) { if ("close" in image && typeof image.close === "function") image.close(); return; } const texture = new Texture(image as TexImageSource as HTMLImageElement); texture.flipY = !flipped; texture.colorSpace = SRGBColorSpace; texture.anisotropy = Math.min(ANISOTROPY, this.renderer.capabilities.getMaxAnisotropy()); texture.generateMipmaps = true; texture.minFilter = LinearMipmapLinearFilter; texture.magFilter = LinearFilter; texture.wrapS = texture.wrapT = ClampToEdgeWrapping; texture.needsUpdate = true; entry.texture = texture; entry.aspect = width / height; entry.accent = vividColor(image); entry.status = "ready"; this.uploads.push(texture); } catch { entry.status = "error"; } finally { this.inFlight--; for (const listener of entry.listeners) listener(); this.pump(); } } } function closeImage(texture: Texture | null) { const image = texture?.image as { close?: () => void } | undefined; if (image && typeof image.close === "function") image.close(); } type Decoded = { image: ImageBitmap | HTMLImageElement; width: number; height: number; flipped: boolean }; /** Decode off the main thread when possible: fetch + createImageBitmap, flipped and resized there. */ async function decode(url: string, maxSize: number): Promise<Decoded> { if (typeof createImageBitmap === "function" && typeof fetch === "function") { try { const response = await fetch(url, { mode: "cors", credentials: "same-origin" }); if (!response.ok) throw new Error(String(response.status)); const blob = await response.blob(); const probe = await createImageBitmap(blob); const scale = Math.min(1, maxSize / Math.max(probe.width, probe.height)); const width = Math.max(1, Math.round(probe.width * scale)); const height = Math.max(1, Math.round(probe.height * scale)); probe.close(); const bitmap = await createImageBitmap(blob, { imageOrientation: "flipY", premultiplyAlpha: "none", resizeWidth: width, resizeHeight: height, resizeQuality: "high", }); return { image: bitmap, width, height, flipped: true }; } catch { // fall through to an <img>: older Safari, or a host without CORS } } const img = await new Promise<HTMLImageElement>((resolve, reject) => { const image = new Image(); image.crossOrigin = "anonymous"; image.decoding = "async"; image.onload = () => resolve(image); image.onerror = reject; image.src = url; }); return { image: img, width: img.naturalWidth, height: img.naturalHeight, flipped: false }; } let sampler: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null | undefined; /** * The picture's accent: drawn into 16 × 16 pixels, each weighted by its saturation and brightness, so a dark photo * with one vivid area glows in that colour rather than in its muddy average. A colourless picture gives a soft white. */ export function vividColor(image: CanvasImageSource): string | null { try { if (sampler === undefined) { sampler = typeof OffscreenCanvas === "function" ? new OffscreenCanvas(16, 16).getContext("2d", { willReadFrequently: true }) : typeof document !== "undefined" ? document.createElement("canvas").getContext("2d", { willReadFrequently: true }) : null; if (sampler && "canvas" in sampler && !(typeof OffscreenCanvas === "function")) { (sampler.canvas as HTMLCanvasElement).width = 16; (sampler.canvas as HTMLCanvasElement).height = 16; } } if (!sampler) return null; sampler.clearRect(0, 0, 16, 16); sampler.drawImage(image, 0, 0, 16, 16); const data = sampler.getImageData(0, 0, 16, 16).data; let r = 0; let g = 0; let b = 0; let total = 0; for (let i = 0; i < data.length; i += 4) { const pr = data[i]! / 255; const pg = data[i + 1]! / 255; const pb = data[i + 2]! / 255; const max = Math.max(pr, pg, pb); const min = Math.min(pr, pg, pb); const saturation = max === 0 ? 0 : (max - min) / max; const weight = saturation * saturation * max + 0.002; r += pr * weight; g += pg * weight; b += pb * weight; total += weight; } if (total <= 0) return null; const color = new Color(r / total, g / total, b / total); // Lift it to a glow-worthy brightness, keeping its hue. const hsl = { h: 0, s: 0, l: 0 }; color.getHSL(hsl); color.setHSL(hsl.h, Math.min(1, hsl.s * 1.15), Math.max(0.55, Math.min(0.72, hsl.l + 0.2))); return toHex({ r: color.r, g: color.g, b: color.b, a: 1 }); } catch { return null; // a tainted canvas (no CORS): the theme's accent is used instead } } /** A texture for the blur-up: the item's tiny placeholder image, or one pixel of a colour. */ export function placeholderTexture(source: string | undefined, fallback: string): Promise<{ texture: Texture; aspect: number }> { if (source && (source.startsWith("data:") || source.startsWith("/") || source.startsWith("http"))) { return new Promise((resolve) => { const image = new Image(); image.decoding = "async"; image.onload = () => { const texture = new Texture(image); texture.colorSpace = SRGBColorSpace; texture.minFilter = LinearFilter; texture.magFilter = LinearFilter; texture.generateMipmaps = false; texture.needsUpdate = true; resolve({ texture, aspect: image.naturalWidth / Math.max(1, image.naturalHeight) }); }; image.onerror = () => resolve({ texture: colorTexture(fallback), aspect: 0 }); image.src = source; }); } return Promise.resolve({ texture: colorTexture(source ?? fallback), aspect: 0 }); } export function colorTexture(css: string): DataTexture { const { r, g, b } = parseColor(css); const data = new Uint8Array([Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), 255]); const texture = new DataTexture(data, 1, 1, RGBAFormat); texture.colorSpace = SRGBColorSpace; texture.needsUpdate = true; return texture; } /** * The muted loop of an item, played only while its card is active. Created on first need and kept (paused) for a * quick return; `dispose()` releases the decoder. */ export class CardVideo { readonly element: HTMLVideoElement; readonly texture: VideoTexture; ready = false; aspect = 16 / 10; private wanted = false; constructor(url: string) { const video = document.createElement("video"); video.muted = true; video.defaultMuted = true; video.loop = true; video.playsInline = true; video.crossOrigin = "anonymous"; video.preload = "auto"; video.setAttribute("muted", ""); video.setAttribute("playsinline", ""); video.src = url; this.element = video; this.texture = new VideoTexture(video); this.texture.colorSpace = SRGBColorSpace; this.texture.minFilter = LinearFilter; this.texture.magFilter = LinearFilter; this.texture.generateMipmaps = false; const markReady = () => { this.aspect = video.videoWidth / Math.max(1, video.videoHeight) || this.aspect; this.ready = true; }; // Only crossfade once a frame is really on screen, so the swap from the poster never shows a black frame. const frames = video as HTMLVideoElement & { requestVideoFrameCallback?: (callback: () => void) => number }; if (typeof frames.requestVideoFrameCallback === "function") { video.addEventListener("playing", () => frames.requestVideoFrameCallback?.(markReady)); } else { video.addEventListener("playing", markReady); } } play() { if (this.wanted) return; this.wanted = true; this.element.play().catch(() => { this.wanted = false; }); } pause() { if (!this.wanted) return; this.wanted = false; this.element.pause(); } dispose() { this.element.pause(); this.element.removeAttribute("src"); this.element.load(); this.texture.dispose(); } } 79:T4681, // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import type { CSSProperties } from "react"; import type { ThemeName, ThemeOverrides, ThemeTokens } from "@/components/orbit-gallery-types"; // ── from package/src/theme.ts ──────────────────────────────────────────────────────────────────────────────────────── const SANS = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif'; const MONO = 'ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace'; /** Black stage, warm white type. Muted text is 7.4:1 on the background. */ export const darkTheme: ThemeTokens = { background: "#000000", foreground: "#f4f1ec", muted: "#9e9a93", accent: "#b8c6ff", gridLine: "rgba(255, 255, 255, 0.08)", cardBorder: "rgba(255, 255, 255, 0.12)", fontDisplay: SANS, fontMono: MONO, }; /** Warm paper stage, ink type. Muted text is 5.6:1 on the background. */ export const lightTheme: ThemeTokens = { background: "#efede8", foreground: "#111111", muted: "#5e5c57", accent: "#3046c8", gridLine: "rgba(17, 17, 17, 0.09)", cardBorder: "rgba(17, 17, 17, 0.12)", fontDisplay: SANS, fontMono: MONO, }; export type ThemeMode = "dark" | "light"; /** Tokens for a theme prop, in the given mode: the mode's preset with the prop's own tokens laid over it. */ export function themeTokens(theme: ThemeName | ThemeOverrides | undefined, mode: ThemeMode): ThemeTokens { const base = mode === "light" ? lightTheme : darkTheme; if (theme === undefined || typeof theme === "string") return base; return { ...base, ...overrides(theme) }; } /** The mode a theme prop asks for, or null for "auto" (decided by the page, see useThemeMode). */ export function fixedMode(theme: ThemeName | ThemeOverrides | undefined): ThemeMode | null { if (theme === "dark" || theme === "light") return theme; if (theme === undefined) return "dark"; if (theme === "auto") return null; if (theme.mode === "auto") return null; if (theme.mode === "dark" || theme.mode === "light") return theme.mode; return theme.background && luminance(parseColor(theme.background)) > 0.5 ? "light" : "dark"; } /** Just the tokens of a theme object (without its `mode`). */ export function overrides(theme: ThemeName | ThemeOverrides | undefined): Partial<ThemeTokens> { if (theme === undefined || typeof theme === "string") return {}; const { mode: _mode, ...tokens } = theme; return tokens; } const VARS: Record<keyof ThemeTokens, string> = { background: "--og-bg", foreground: "--og-fg", muted: "--og-muted", accent: "--og-accent", gridLine: "--og-grid", cardBorder: "--og-card-border", fontDisplay: "--og-font-display", fontMono: "--og-font-mono", }; /** Tokens as the CSS custom properties the overlay is styled with (only the ones given). */ export function themeVars(tokens: Partial<ThemeTokens>): CSSProperties { const vars: Record<string, string> = {}; for (const [key, value] of Object.entries(tokens)) { const name = VARS[key as keyof ThemeTokens]; if (name && typeof value === "string") vars[name] = value; } return vars as CSSProperties; } /** The custom properties as CSS text, for the "auto" theme's stylesheet rules (no JavaScript, so no flash). */ export function themeCss(tokens: ThemeTokens) { return Object.entries(themeVars(tokens)) .map(([key, value]) => `${key}:${String(value)};`) .join(""); } export type Rgba = { r: number; g: number; b: number; a: number }; /** Parses #rgb, #rgba, #rrggbb, #rrggbbaa, rgb() and rgba() into 0..1 channels (sRGB). Unknown input is grey. */ export function parseColor(css: string): Rgba { const value = css.trim().toLowerCase(); if (value.startsWith("#")) { let hex = value.slice(1); if (hex.length === 3 || hex.length === 4) hex = [...hex].map((c) => c + c).join(""); const n = (i: number) => parseInt(hex.slice(i, i + 2), 16) / 255; if (hex.length === 6 || hex.length === 8) return { r: n(0), g: n(2), b: n(4), a: hex.length === 8 ? n(6) : 1 }; } const match = /^rgba?$([^)]+)$$/.exec(value); if (match) { const parts = match[1]!.split(/[\s,/]+/).filter(Boolean); const channel = (part: string | undefined) => { if (!part) return 0; return part.endsWith("%") ? parseFloat(part) / 100 : parseFloat(part) / 255; }; const alpha = parts[3] === undefined ? 1 : parts[3].endsWith("%") ? parseFloat(parts[3]) / 100 : parseFloat(parts[3]); return { r: channel(parts[0]), g: channel(parts[1]), b: channel(parts[2]), a: Number.isFinite(alpha) ? alpha : 1 }; } return { r: 0.5, g: 0.5, b: 0.5, a: 1 }; } /** Relative luminance (WCAG) of an sRGB colour. */ export function luminance({ r, g, b }: Rgba) { const lin = (c: number) => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)); return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b); } export function toHex({ r, g, b }: Rgba) { const h = (c: number) => Math.round(Math.min(1, Math.max(0, c)) * 255) .toString(16) .padStart(2, "0"); return `#${h(r)}${h(g)}${h(b)}`; } // ── from package/src/styles.ts ─────────────────────────────────────────────────────────────────────────────────────── // The component's stylesheet, rendered by OrbitGallery itself in a <style> (React 19 hoists and dedupes it), so // there is no CSS file to import. Every class starts with og- and every custom property with --og-. const EASE_OUT_EXPO = "cubic-bezier(0.16, 1, 0.3, 1)"; const EASE_IN_OUT = "cubic-bezier(0.76, 0, 0.24, 1)"; export const ORBIT_GALLERY_CSS = ` .og-root[data-og-theme="auto"]{${themeCss(lightTheme)}} @media (prefers-color-scheme: dark){.og-root[data-og-theme="auto"]{${themeCss(darkTheme)}}} .light .og-root[data-og-theme="auto"]{${themeCss(lightTheme)}} .dark .og-root[data-og-theme="auto"]{${themeCss(darkTheme)}} .og-root{--og-pad:clamp(16px,2.6vw,40px);position:relative;width:100%;height:100%;min-height:420px;overflow:hidden; isolation:isolate;background:var(--og-bg);color:var(--og-fg);font-family:var(--og-font-mono); touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent; outline:none;cursor:grab;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .og-root[data-og-dragging]{cursor:grabbing} .og-root[data-og-cursor],.og-root[data-og-cursor] *{cursor:none} .og-root *,.og-root *::before,.og-root *::after{box-sizing:border-box} .og-root:focus-visible:not([data-og-webgl]){outline:2px solid var(--og-fg);outline-offset:-6px} .og-root :focus-visible{outline:2px solid var(--og-fg);outline-offset:4px;border-radius:3px} .og-canvas{position:absolute!important;inset:0;z-index:0;animation:og-fade 1s ease both} .og-canvas canvas{display:block} .og-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap;border:0} .og-overlay{position:absolute;inset:0;z-index:2;pointer-events:none} .og-scrim{position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none; background:linear-gradient(to top, color-mix(in srgb,var(--og-bg) 72%,transparent) 0%, color-mix(in srgb,var(--og-bg) 52%,transparent) 22%, color-mix(in srgb,var(--og-bg) 26%,transparent) 48%, color-mix(in srgb,var(--og-bg) 8%,transparent) 74%, transparent 100%)} .og-corner{position:absolute;display:flex;align-items:center;gap:20px;pointer-events:auto; font:500 11px/1.2 var(--og-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--og-muted); transition:opacity .45s ease} .og-corner a,.og-corner button{all:unset;color:inherit;padding:8px 0;cursor:pointer;transition:color .25s ease} .og-corner a:hover,.og-corner button:hover,.og-corner [aria-pressed="true"],.og-corner [aria-expanded="true"], .og-corner [aria-current]{color:var(--og-fg)} .og-corner a:focus-visible,.og-corner button:focus-visible{outline:2px solid var(--og-fg);outline-offset:4px;border-radius:2px} .og-tl{top:calc(var(--og-pad) - 8px);left:var(--og-pad)} .og-tr{top:calc(var(--og-pad) - 8px);right:var(--og-pad)} .og-bl{bottom:calc(var(--og-pad) - 8px);left:var(--og-pad);gap:8px} .og-br{bottom:calc(var(--og-pad) - 8px);right:var(--og-pad)} .og-slash{opacity:.6} .og-hint{position:absolute;left:50%;bottom:var(--og-pad);transform:translateX(-50%);display:flex;align-items:center;gap:12px; font:500 10.5px/1 var(--og-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--og-muted); animation:og-fade 1s ease 1.8s both;transition:opacity .6s ease} .og-hint[data-og-hidden]{opacity:0} .og-hint-line{width:26px;height:1px;background:currentColor;opacity:.55} .og-meta{position:absolute;left:var(--og-pad);right:var(--og-pad);bottom:calc(var(--og-pad) + 44px);display:flex; flex-direction:column;gap:16px;pointer-events:none;transition:opacity .4s ease,transform .6s ${EASE_OUT_EXPO}} .og-index{display:flex;align-items:center;gap:12px;min-height:20px;font:500 12px/1 var(--og-font-mono);letter-spacing:.08em; text-transform:uppercase;color:var(--og-muted);animation:og-lift .9s ${EASE_OUT_EXPO} both;animation-delay:calc(var(--og-delay,0ms) + 120ms)} .og-progress{flex:none;transform:rotate(-90deg)} .og-progress-track{fill:none;stroke:color-mix(in srgb,var(--og-fg) 16%,transparent);stroke-width:1.5} .og-progress-value{fill:none;stroke:var(--og-arc);stroke-width:1.5;stroke-linecap:round; transition:stroke-dashoffset .8s ${EASE_OUT_EXPO},stroke .8s ease} .og-count{color:var(--og-fg);font-variant-numeric:tabular-nums} .og-count-sep{color:var(--og-muted)} .og-subtitle{position:relative;padding-left:14px;animation:og-fade .6s ease both} .og-subtitle::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:currentColor;opacity:.7} .og-titles{display:grid;font-size:clamp(32px,6vw,72px)} .og-title{grid-area:1/1;margin:0;font-family:var(--og-font-display);font-weight:400;font-size:inherit;line-height:1.02; letter-spacing:-.02em;color:var(--og-fg);text-wrap:balance;max-width:16ch} .og-word{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .02em .14em;margin:-.08em -.02em -.14em} .og-char{display:inline-block;will-change:transform} .og-title[data-og-animate] .og-char{transform:translateY(112%); animation:og-rise .8s ${EASE_OUT_EXPO} forwards;animation-delay:calc(var(--og-delay,0ms) + var(--og-i) * 12ms)} .og-title[data-og-leaving]{animation:og-leave .42s ease forwards} .og-title[data-og-leaving] .og-char{animation:og-exit .45s ${EASE_IN_OUT} forwards;animation-delay:calc(var(--og-i) * 8ms)} .og-overlay[data-og-opening] .og-meta,.og-overlay[data-og-opening] .og-scrim,.og-overlay[data-og-opening] .og-hint, .og-overlay[data-og-opening] .og-corner{opacity:0;pointer-events:none} .og-overlay[data-og-opening] .og-meta{transform:translateY(-12px)} .og-cursor{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden} .og-cursor-dot,.og-cursor-ring{position:absolute;left:0;top:0;transition:opacity .3s ease;will-change:transform} .og-cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--og-fg)} .og-cursor-ring{width:48px;height:48px;margin:-24px 0 0 -24px;display:grid;place-items:center} .og-cursor-ring::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:999px; transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--og-fg) 50%,transparent); transition:width .5s ${EASE_OUT_EXPO},height .5s ${EASE_OUT_EXPO},background .3s ease,border-color .3s ease} .og-cursor-ring[data-og-big]::before{width:78px;height:78px;background:color-mix(in srgb,var(--og-bg) 30%,transparent); border-color:color-mix(in srgb,var(--og-fg) 70%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .og-cursor-ring[data-og-magnet]::before{width:var(--og-magnet-w);height:var(--og-magnet-h);background:transparent} .og-cursor-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap; font:500 9.5px/1 var(--og-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--og-fg); animation:og-fade .35s ease both;transition:opacity .2s ease,left .5s ${EASE_OUT_EXPO}} .og-cursor-ring[data-og-big] .og-cursor-label{left:50%;transform:translate(-50%,-50%)} .og-root:has(.og-cursor-ring[data-og-big]) .og-cursor-dot{opacity:0} .og-cursor-ring[data-og-magnet] .og-cursor-label{opacity:0} .og-root[data-og-cursor-ui] .og-cursor-dot{opacity:0} .og-root[data-og-detail] .og-cursor{display:none} .og-detail{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:space-between; padding:var(--og-pad);opacity:var(--og-detail);pointer-events:none;outline:none;cursor:auto; user-select:text;-webkit-user-select:text;touch-action:auto} .og-detail[data-og-open]{pointer-events:auto} .og-detail,.og-detail *{cursor:auto} .og-detail a,.og-detail button{cursor:pointer} .og-detail-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background: linear-gradient(to top, color-mix(in srgb,var(--og-bg) 90%,transparent) 0%, color-mix(in srgb,var(--og-bg) 74%,transparent) 20%, color-mix(in srgb,var(--og-bg) 44%,transparent) 42%, color-mix(in srgb,var(--og-bg) 16%,transparent) 62%, color-mix(in srgb,var(--og-bg) 4%,transparent) 76%, transparent 86%), linear-gradient(to bottom,color-mix(in srgb,var(--og-bg) 50%,transparent) 0%,color-mix(in srgb,var(--og-bg) 18%,transparent) 12%,transparent 24%)} .og-detail-top{display:flex;justify-content:space-between;align-items:center;margin-top:-8px; font:500 11px/1 var(--og-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--og-fg)} .og-detail-count{font-variant-numeric:tabular-nums} .og-detail-close{all:unset;display:inline-flex;align-items:center;gap:12px;padding:10px 0;color:var(--og-fg)} .og-detail-close:focus-visible,.og-detail-visit:focus-visible{outline:2px solid var(--og-fg);outline-offset:4px;border-radius:2px} .og-detail-body{max-width:min(940px,100%);transform:translateY(calc((1 - var(--og-detail)) * 28px))} .og-detail-subtitle{margin:0 0 16px;font:500 12px/1 var(--og-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--og-muted)} .og-detail-title{margin:0;font-family:var(--og-font-display);font-weight:400;font-size:clamp(48px,9vw,136px);line-height:.94; letter-spacing:-.025em;color:var(--og-fg);text-wrap:balance} .og-detail-description{margin:24px 0 0;max-width:44ch;font-family:var(--og-font-display);font-size:clamp(18px,1.55vw,22px); line-height:1.4;color:color-mix(in srgb,var(--og-fg) 86%,transparent);text-wrap:pretty} .og-detail-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px} .og-detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .og-detail-tags li{padding:7px 12px 6px;border:1px solid color-mix(in srgb,var(--og-fg) 26%,transparent);border-radius:999px; font:500 10.5px/1 var(--og-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--og-fg)} .og-detail-visit{display:inline-flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid currentColor; font:500 11px/1 var(--og-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--og-fg);text-decoration:none} .og-detail-custom{position:relative;flex:1;display:flex;flex-direction:column} .og-root[data-og-detail],.og-root[data-og-detail] .og-detail *{cursor:auto} .og-fallback{--og-card-w:min(66vw,760px);position:absolute;inset:0;z-index:1;display:flex;align-items:center; gap:clamp(14px,2vw,28px);padding:0 calc(50% - var(--og-card-w) / 2) 14vh;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:auto} .og-fallback::-webkit-scrollbar{display:none} .og-fallback-card{flex:none;width:var(--og-card-w);aspect-ratio:16/10;margin:0;overflow:hidden;border-radius:14px; border:1px solid var(--og-card-border);background:var(--og-muted) center/cover no-repeat;scroll-snap-align:center;cursor:pointer; opacity:.55;transform:scale(.92);transition:opacity .5s ease,transform .7s ${EASE_OUT_EXPO}} .og-fallback-card[data-og-active]{opacity:1;transform:none} .og-fallback-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none} .og-fallback-open{position:absolute;inset:0;z-index:3;opacity:var(--og-open,0);pointer-events:none} .og-fallback-open img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:640px){.og-fallback{--og-card-w:82vw}} @keyframes og-rise{to{transform:translateY(0)}} @keyframes og-leave{60%{opacity:1}to{opacity:0}} @keyframes og-exit{from{transform:translateY(0)}to{transform:translateY(-112%)}} @keyframes og-fade{from{opacity:0}} @keyframes og-lift{from{opacity:0;transform:translateY(8px)}} @media (max-width:640px){ .og-root{--og-pad:18px} .og-meta{bottom:calc(var(--og-pad) + 38px);gap:12px} .og-titles{font-size:clamp(30px,10vw,44px)} .og-hint{display:none} .og-corner{gap:14px} } @media (hover:none),(pointer:coarse){ .og-cursor{display:none} .og-root[data-og-cursor],.og-root[data-og-cursor] *{cursor:auto} } @media (prefers-reduced-motion:reduce){ .og-root *,.og-root *::before,.og-root *::after{animation-duration:.001ms!important;animation-delay:0ms!important; transition-duration:.001ms!important} } `; 7a:T15a9, // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import type { CSSProperties, ReactNode, Ref } from "react"; // ── from package/src/types.ts ──────────────────────────────────────────────────────────────────────────────────────── /** One project in the gallery. */ export type OrbitItem = { id: string; title: string; subtitle?: string; description?: string; /** Poster image (required). Up to 2048 px on the long side is plenty. */ image: string; /** Optional muted loop, played on the active card only. Its first frame should match `image`. */ video?: string; href?: string; tags?: string[]; featured?: boolean; /** Glow colour. Extracted from the image (a 16 × 16 downsample) when omitted. */ accent?: string; /** Blur-up placeholder: a tiny data URI (24 px wide is enough) or a CSS colour. */ placeholder?: string; }; export type ThemeTokens = { background: string; foreground: string; muted: string; accent: string; gridLine: string; cardBorder: string; fontDisplay: string; fontMono: string; }; export type ThemeName = "dark" | "light" | "auto"; /** Your own tokens over one of the presets. `mode` picks the preset ("auto" follows the page); without it, the * preset follows the background you give (dark when there is none). */ export type ThemeOverrides = Partial<ThemeTokens> & { mode?: ThemeName }; export type LayoutName = "arc" | "grid" | "stack"; export type FloorMode = "grid" | "reflective" | "none"; export type EffectsPreset = "cinematic" | "balanced" | "off"; export type QualityMode = "auto" | "high" | "low"; /** What the wheel does over the stage: rotate on both axes, only on the horizontal one, or nothing. */ export type WheelMode = "all" | "horizontal" | "off"; export type OrbitLabels = { drag?: string; open?: string; close?: string; featured?: string; full?: string; visit?: string; view?: string; /** The carousel's accessible name. */ carousel?: string; }; /** Imperative handle, for buttons of your own or a scroll binding. */ export type OrbitGalleryHandle = { next: () => void; prev: () => void; goTo: (index: number) => void; open: (index?: number) => void; close: () => void; /** Adds velocity in cards per second (positive moves forward). */ nudge: (velocity: number) => void; }; export type OrbitGalleryProps = { items: OrbitItem[]; layout?: LayoutName; /** Arc radius in world units. */ radius?: number; /** Card bend, 0 (flat) to 1 (follows the arc). */ curvature?: number; cardAspect?: number; /** Angular gap between cards, in radians. */ gap?: number; /** Endless arc. Only the arc can be endless. */ infinite?: boolean; /** Seconds per card, or false. Pauses on hover, focus, any input and in hidden tabs. */ autoplay?: number | false; snap?: boolean; theme?: ThemeName | ThemeOverrides; floor?: FloorMode; effects?: EffectsPreset; quality?: QualityMode; /** The "Featured" set. When given, a Featured / Full toggle appears bottom-left. */ filter?: (item: OrbitItem) => boolean; initialIndex?: number; onSelect?: (item: OrbitItem, index: number) => void; onChange?: (index: number) => void; renderDetail?: (item: OrbitItem, close: () => void) => ReactNode; labels?: OrbitLabels; /** Top-left corner. */ brand?: ReactNode; /** Top-right corner. */ nav?: ReactNode; /** Bottom-right corner. */ cta?: ReactNode; wheel?: WheelMode; /** Page-scroll binding (see `fromLenis`): every delta it reports turns the arc like a wheel would. */ scrollSource?: ScrollSource; /** Remember Featured / Full in the URL hash (#featured, #full). */ persistFilter?: boolean; className?: string; style?: CSSProperties; ref?: Ref<OrbitGalleryHandle>; }; /** Anything that reports scroll deltas in pixels: Lenis through `fromLenis`, or your own. */ export type ScrollSource = { subscribe: (listener: (deltaPixels: number) => void) => () => void; }; /** Where a layout puts one card. Rotation is Euler XYZ in radians. */ export type CardTransform = { position: [number, number, number]; rotation: [number, number, number]; scale: [number, number, number]; /** How much of the arc's curvature the card follows, 0..1. */ bend: number; /** 0..1; a layout fades cards it has no room for. */ opacity: number; }; export type LayoutParams = { /** Carousel position in cards (fractional, unwrapped). */ position: number; /** Endless (arc only): positions wrap modulo `ring`. */ infinite: boolean; /** Number of slots the endless ring has (items × copies). Defaults to n. */ ring?: number; radius: number; gap: number; cardWidth: number; cardHeight: number; /** Visible size of the stage plane (z = 0) in world units, so a layout can fit the viewport. */ viewWidth: number; viewHeight: number; /** Highest and lowest visible y on the stage plane (the camera looks down a little, so they aren't ±height/2). */ viewTop?: number; viewBottom?: number; /** Cards must stay above this y (the floor). */ floorY?: number; }; export type LayoutFn = (i: number, n: number, params: LayoutParams, out?: CardTransform) => CardTransform; 7b:T37d1,"use client"; // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { lazy, Suspense, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react"; import { A11yList } from "@/components/orbit-gallery-a11y-list"; import { Cursor, type CursorBridge } from "@/components/orbit-gallery-cursor"; import { CssScroller } from "@/components/orbit-gallery-css-scroller"; import { DetailView } from "@/components/orbit-gallery-detail"; import { Overlay } from "@/components/orbit-gallery-overlay"; import { arcRingSlots } from "@/components/orbit-gallery-layouts"; import { useInertialDrag } from "@/components/orbit-gallery-input"; import { useOrbitGallery } from "@/components/orbit-gallery-hook"; import { ORBIT_GALLERY_CSS, fixedMode, overrides, themeTokens, themeVars, type ThemeMode } from "@/components/orbit-gallery-theme"; import type { OrbitGalleryProps, OrbitItem } from "@/components/orbit-gallery-types"; export { useOrbitGallery, type OrbitGalleryController, type UseOrbitGalleryOptions } from "@/components/orbit-gallery-hook"; export { useInertialDrag, fromLenis, type InertialDragOptions } from "@/components/orbit-gallery-input"; export { createOrbitStore, gsapTransition, PHYSICS, TRANSITION, type MotionPhase, type OrbitMode, type OrbitMotion, type OrbitState, type OrbitStore, type OrbitStoreConfig, type Picker, type TransitionDriver, type TransitionFactory, } from "@/components/orbit-gallery-store"; export { arcLayout, arcOffset, arcPitch, arcRingSlots, copyTransform, createTransform, gridLayout, gridShape, layouts, lerpTransform, stackLayout, } from "@/components/orbit-gallery-layouts"; export { darkTheme, lightTheme, themeTokens, themeVars } from "@/components/orbit-gallery-theme"; export type { CardTransform, EffectsPreset, FloorMode, LayoutFn, LayoutName, LayoutParams, OrbitGalleryHandle, OrbitGalleryProps, OrbitItem, OrbitLabels, QualityMode, ScrollSource, ThemeName, ThemeOverrides, ThemeTokens, WheelMode, } from "@/components/orbit-gallery-types"; // ── from package/src/OrbitGallery.tsx ──────────────────────────────────────────────────────────────────────────────── const Scene = lazy(() => import("@/components/orbit-gallery-scene")); /** The first title waits for the cards' intro, rising this long after the scene has drawn its first frame… */ const TITLE_AFTER_SCENE_MS = 850; /** …but never longer than this after mount, so a slow GPU never hides the title (it is the page's largest text). */ const TITLE_MAX_WAIT_MS = 1400; /** Without a WebGL intro (no WebGL, reduced motion) the title rises right away. */ const TITLE_NO_INTRO_MS = 120; const DEFAULT_LABELS = { drag: "Drag", open: "Open", close: "Close", featured: "Featured", full: "Full", visit: "Visit project", view: "View", carousel: "Projects", }; /** * OrbitGallery: project cards on a curved arc over a reflective floor. Drag, scroll or use the arrow keys to turn * it; click the front card to open it. */ export function OrbitGallery(props: OrbitGalleryProps) { const { items, layout = "arc", radius = 4.2, curvature = 0.6, cardAspect = 16 / 10, gap = 0.08, infinite, autoplay = false, snap = true, theme = "dark", floor = "reflective", effects = "balanced", quality = "auto", filter, initialIndex = 0, onSelect, onChange, labels: labelProps, renderDetail, brand, nav, cta, wheel = "all", scrollSource, persistFilter = true, className, style, ref, } = props; const labels = { ...DEFAULT_LABELS, ...labelProps }; const reducedMotion = usePrefersReducedMotion(); const webgl = useWebGL(); const gallery = useOrbitGallery({ items, filter, // The CSS fallback is a finite strip. infinite: webgl === false ? false : (infinite ?? layout === "arc"), snap, autoplay, initialIndex, layout, reducedMotion, onChange, onSelect, }); const { state } = gallery; useImperativeHandle( ref, () => ({ next: gallery.next, prev: gallery.prev, goTo: gallery.goTo, open: (index?: number) => gallery.open(index), close: gallery.close, nudge: gallery.nudge, }), [gallery], ); const rootRef = useRef<HTMLDivElement>(null); useInertialDrag(rootRef, gallery.store, { wheel, scrollSource, pointer: webgl !== false }); const focusVisible = useRef(false); const mode = useThemeMode(theme); const tokens = themeTokens(theme, mode); const fixed = fixedMode(theme); const cardWidth = cardAspect; const ringMin = arcRingSlots(radius, cardWidth, gap); const maxCopies = useMemo(() => copiesNeeded(items, filter, ringMin), [items, filter, ringMin]); // The first title rises with the cards' intro: when the scene draws its first frame, or after a ceiling. const mountedAt = useRef(0); const [revealDelay, setRevealDelay] = useState(TITLE_MAX_WAIT_MS); useEffect(() => { mountedAt.current = performance.now(); }, []); useEffect(() => { if (webgl === false || reducedMotion) setRevealDelay(TITLE_NO_INTRO_MS); }, [webgl, reducedMotion]); const onSceneReady = () => { const since = performance.now() - mountedAt.current; setRevealDelay((delay) => Math.min(delay, since + TITLE_AFTER_SCENE_MS)); }; // Featured / Full lives in the URL hash (#featured, #full): read once after mount, written on every change. // Guarded: a sandboxed frame may not allow history access, and nothing depends on it. const hasFilter = Boolean(filter); useEffect(() => { if (!hasFilter || !persistFilter) return; try { const hash = window.location.hash; if (hash === "#featured") gallery.store.setFiltered(true); else if (hash === "#full") gallery.store.setFiltered(false); } catch { // no access to location } // only on mount // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const filterWritten = useRef(false); useEffect(() => { if (!filterWritten.current) { filterWritten.current = true; return; } if (!hasFilter || !persistFilter) return; try { const url = new URL(window.location.href); url.hash = state.filtered ? "featured" : "full"; window.history.replaceState(window.history.state, "", url); } catch { // no access to history } }, [state.filtered, hasFilter, persistFilter]); const [accent, setAccent] = useState<string | null>(null); const bridge = useRef<CursorBridge>({ hover: false, x: 0, y: 0, speed: 0 }).current; const cursor = useFinePointer() && !reducedMotion; const [interacted, setInteracted] = useState(false); useEffect(() => { const root = rootRef.current; if (!root || interacted) return; const done = () => setInteracted(true); root.addEventListener("pointerdown", done, { once: true }); root.addEventListener("wheel", done, { once: true, passive: true }); root.addEventListener("keydown", done, { once: true }); return () => { root.removeEventListener("pointerdown", done); root.removeEventListener("wheel", done); root.removeEventListener("keydown", done); }; }, [interacted]); return ( <div ref={rootRef} className={`og-root${className ? ` ${className}` : ""}`} data-og-theme={fixed ? fixed : "auto"} data-og-dragging={state.dragging ? "" : undefined} data-og-webgl={webgl ? "" : undefined} data-og-detail={state.mode !== "browse" ? "" : undefined} data-og-cursor={cursor && webgl ? "" : undefined} // Fixed themes set every token inline; "auto" leaves the colours to the stylesheet (no flash before hydration) // and sets only the tokens you gave. style={{ ...themeVars(fixed ? tokens : overrides(theme)), ...style }} tabIndex={0} role="region" aria-roledescription="carousel" aria-label={labels.carousel} onFocus={(event) => { focusVisible.current = event.target === rootRef.current && rootRef.current.matches(":focus-visible"); }} onBlur={() => { focusVisible.current = false; }} > <style href="orbit-gallery" precedence="default"> {ORBIT_GALLERY_CSS} </style> <A11yList items={items} state={state} store={gallery.store} label={labels.carousel} onFocusChange={(focused) => { focusVisible.current = focused; }} /> {webgl === false && <CssScroller items={items} state={state} store={gallery.store} reducedMotion={reducedMotion} />} {webgl === true && ( <Suspense fallback={null}> <Scene store={gallery.store} cards={{ items, radius, curvature, gap, cardWidth, cardHeight: 1, maxCopies, ringMin, tokens, dark: mode === "dark", reducedMotion, glow: mode === "dark" ? 0.9 : 0.6, }} floor={floor} effects={reducedMotion ? "off" : effects} quality={quality} focusVisible={focusVisible} bridge={bridge} onAccent={setAccent} onReady={onSceneReady} /> </Suspense> )} <Overlay items={items} state={state} accent={accent} revealDelay={revealDelay} brand={brand} nav={nav} cta={cta} labels={labels} onToggleFilter={(featured) => gallery.store.setFiltered(featured)} showHint={!interacted} /> {state.selected >= 0 && items[state.selected] && ( <DetailView item={items[state.selected]!} index={Math.max(0, state.visible.indexOf(state.selected))} total={state.visible.length} state={state} motion={gallery.store.motion} labels={labels} renderDetail={renderDetail} onClose={gallery.store.close} returnFocus={rootRef} /> )} {cursor && webgl && <Cursor rootRef={rootRef} state={state} bridge={bridge} labels={labels} />} </div> ); } /** Copies per item an endless ring needs in either filter state, so the wrap point always stays out of view. */ function copiesNeeded(items: OrbitItem[], filter: ((item: OrbitItem) => boolean) | undefined, ringMin: number) { const counts = [items.length]; if (filter) { const featured = items.filter(filter).length; if (featured > 0) counts.push(featured); } return Math.max(1, ...counts.map((n) => (n > 1 ? Math.ceil(ringMin / n) : 1))); } const reducedMotionQuery = "(prefers-reduced-motion: reduce)"; /** prefers-reduced-motion, false on the server and in the first client render. */ export function usePrefersReducedMotion() { return useSyncExternalStore( (onChange) => { const query = window.matchMedia(reducedMotionQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }, () => window.matchMedia(reducedMotionQuery).matches, () => false, ); } /** * The theme mode for "auto": the page's `.dark` or `.light` class on <html> when it has one, else the system * preference. Fixed themes return their own mode. "dark" on the server. */ export function useThemeMode(theme: OrbitGalleryProps["theme"]): ThemeMode { const fixed = fixedMode(theme); const auto = useSyncExternalStore( (onChange) => { const query = window.matchMedia("(prefers-color-scheme: dark)"); query.addEventListener("change", onChange); const observer = new MutationObserver(onChange); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] }); return () => { query.removeEventListener("change", onChange); observer.disconnect(); }; }, () => { const root = document.documentElement; if (root.classList.contains("dark")) return "dark"; if (root.classList.contains("light")) return "light"; return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; }, () => "dark" as const, ); return fixed ?? auto; } /** A mouse or trackpad (the custom cursor is for those only). False on the server. */ function useFinePointer() { return useSyncExternalStore( (onChange) => { const query = window.matchMedia("(hover: hover) and (pointer: fine)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }, () => window.matchMedia("(hover: hover) and (pointer: fine)").matches, () => false, ); } function probeWebGL() { try { const gl = document.createElement("canvas").getContext("webgl2"); gl?.getExtension("WEBGL_lose_context")?.loseContext(); return Boolean(gl); } catch { return false; } } /** Whether WebGL 2 is available: null until mounted (the server and the first render draw no canvas). */ function useWebGL() { const [supported, setSupported] = useState<boolean | null>(null); useEffect(() => { setSupported(probeWebGL()); }, []); return supported; } // ── from package/src/index.ts ──────────────────────────────────────────────────────────────────────────────────────── 66:["$","$L68",null,{"files":[{"path":"components/orbit-gallery-a11y-list.tsx","content":"$69","type":"registry:component"},{"path":"components/orbit-gallery-camera-rig.tsx","content":"$6a","type":"registry:component"},{"path":"components/orbit-gallery-card-material.ts","content":"$6b","type":"registry:component"},{"path":"components/orbit-gallery-cards.tsx","content":"$6c","type":"registry:component"},{"path":"components/orbit-gallery-css-scroller.tsx","content":"$6d","type":"registry:component"},{"path":"components/orbit-gallery-cursor.tsx","content":"$6e","type":"registry:component"},{"path":"components/orbit-gallery-detail.tsx","content":"$6f","type":"registry:component"},{"path":"components/orbit-gallery-effects.tsx","content":"$70","type":"registry:component"},{"path":"components/orbit-gallery-floor.tsx","content":"$71","type":"registry:component"},{"path":"components/orbit-gallery-hook.ts","content":"$72","type":"registry:component"},{"path":"components/orbit-gallery-input.ts","content":"$73","type":"registry:component"},{"path":"components/orbit-gallery-layouts.ts","content":"$74","type":"registry:component"},{"path":"components/orbit-gallery-overlay.tsx","content":"$75","type":"registry:component"},{"path":"components/orbit-gallery-scene.tsx","content":"$76","type":"registry:component"},{"path":"components/orbit-gallery-store.ts","content":"$77","type":"registry:component"},{"path":"components/orbit-gallery-textures.ts","content":"$78","type":"registry:component"},{"path":"components/orbit-gallery-theme.ts","content":"$79","type":"registry:component"},{"path":"components/orbit-gallery-types.ts","content":"$7a","type":"registry:component"},{"path":"components/orbit-gallery.tsx","content":"$7b","type":"registry:component"}],"className":"h-[70svh] min-h-80"}] </article></body></html>

67:I[707087,["/_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"],"RegistryDependencies"] 68: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"] 63:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"postprocessing"}] 64:["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}] 65:["$","$L67",null,{"namespace":"@upfork","registryDependencies":[]}] 69:T123f,"use client"; // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { useEffect, useRef, useState, type MouseEvent } from "react"; import type { OrbitState, OrbitStore } from "@/components/orbit-gallery-store"; import type { OrbitItem } from "@/components/orbit-gallery-types"; // ── from package/src/dom/A11yList.tsx ──────────────────────────────────────────────────────────────────────────────── /** The live region announces the active project once the carousel has stayed on it this long (ms). */ const ANNOUNCE_AFTER_MS = 350; /** * The gallery as plain HTML: a list of links, one per project, with its title, subtitle and description. It is what * search engines index and what screen readers read; it is visually hidden, since the stage shows the same things. * * Only the active project's link is in the tab order (roving tabindex): Tab from the gallery lands on it, the arrow * keys move the carousel (and the link with it), Enter opens it, and the next Tab leaves the gallery. Focusing a link * brings its card to the front; the active card draws the focus ring. A polite live region announces each new * project once the carousel settles on it. */ export function A11yList({ items, state, store, label, onFocusChange, }: { items: OrbitItem[]; state: OrbitState; store: OrbitStore; label: string; /** Whether keyboard focus is (visibly) on one of the links: the scene draws the ring on the active card then. */ onFocusChange: (focused: boolean) => void; }) { const list = useRef(null); const [announcement, setAnnouncement] = useState(""); const slot = state.visible.indexOf(state.index); const active = items[state.index]; // Announce the project the carousel settles on (not every one it passes). useEffect(() => { if (!active || !state.ready) return; const timer = setTimeout(() => { // A focused link is read out by itself; announcing it again would say everything twice. if (list.current?.contains(document.activeElement)) return; setAnnouncement(`${active.title}${active.subtitle ? `, ${active.subtitle}` : ""}. ${slot + 1} of ${state.visible.length}.`); }, ANNOUNCE_AFTER_MS); return () => clearTimeout(timer); }, [active, slot, state.visible.length, state.ready]); // When a link has focus and the active project changes (arrow keys), focus follows to the new active link. useEffect(() => { const el = list.current; if (!el || !el.contains(document.activeElement)) return; el.querySelector(`a[data-og-item="${state.index}"]`)?.focus({ preventScroll: true }); }, [state.index]); const onClick = (event: MouseEvent, index: number) => { // A plain click (Enter on the link) opens the project here; a modified click keeps the link's own behaviour. if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return; event.preventDefault(); if (!state.visible.includes(index)) store.setFiltered(false); store.open(index); }; return ( <>

onClick(event, index)} onFocus={(event) => { onFocusChange(event.currentTarget.matches(":focus-visible")); if (!state.visible.includes(index)) store.setFiltered(false); if (index !== state.index) store.goTo(index); }} onBlur={() => onFocusChange(false)} > {item.title} {item.subtitle && , {item.subtitle}} {item.description && . {item.description}} {item.tags && item.tags.length > 0 && ({item.tags.join(", ")})}

{announcement}

); } 6a:Tfea, // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { useFrame, useThree } from "@react-three/fiber"; import { useRef } from "react"; import type { PerspectiveCamera } from "three"; import type { SceneShared } from "@/components/orbit-gallery-cards"; import type { OrbitStore } from "@/components/orbit-gallery-store"; import { damp } from "@/components/orbit-gallery-layouts"; // ── from package/src/Rig/CameraRig.tsx ─────────────────────────────────────────────────────────────────────────────── /** Field of view (degrees), the brief's 35. */ export const FOV = 35; /** A fast drag widens the view to this many degrees (a subtle dolly-out), easing back on release. */ const FOV_FAST = 38; /** Distance from the camera to the active card on a landscape screen: the card fills about a third of the width. */ const BASE_DISTANCE = 5.2; /** On portrait screens the camera backs off until the active card takes this share of the width. */ const PORTRAIT_SHARE = 0.76; /** The camera sits this far above the cards' centre line… */ const HEIGHT = 0.42; /** …looking at a point this far below it, so the floor shows and the arc sits in the upper half, clear of the title. */ const LOOK_Y = -0.12; /** Pointer parallax: up to this much camera movement (world units)… */ const PARALLAX_MOVE = 0.08; /** …and this much turn (radians, 1.5°). */ const PARALLAX_TURN = (1.5 * Math.PI) / 180; const PARALLAX_LAMBDA = 3.2; /** After this long without input (seconds), the camera starts to breathe… */ const IDLE_AFTER = 3; /** …a slow sway with this period (seconds)… */ const BREATH_PERIOD = 9; /** …of this size (world units). */ const BREATH_X = 0.05; const BREATH_Y = 0.025; /** Opening a card moves the camera this share of the way toward the arc. */ const DOLLY = 0.22; /** * Frames the stage for any aspect ratio and keeps it alive: pointer parallax, an idle sway, a slight widening of * the view on fast drags, and a dolly toward the arc while a card opens. Reads the store; never writes to it. */ export function CameraRig({ store, shared, cardWidth, reducedMotion }: { store: OrbitStore; shared: SceneShared; cardWidth: number; reducedMotion: boolean }) { const camera = useThree((s) => s.camera) as PerspectiveCamera; const size = useThree((s) => s.size); const rig = useRef({ x: 0, y: 0, breath: 0, fov: FOV }); useFrame((_, rawDt) => { const dt = Math.min(rawDt, 0.1); const m = store.motion; const r = rig.current; const aspect = size.width / Math.max(1, size.height); const tanHalf = Math.tan((FOV * Math.PI) / 360); const distance = Math.max(BASE_DISTANCE, cardWidth / (PORTRAIT_SHARE * 2 * tanHalf * aspect)); const follow = m.pointerInside && !reducedMotion ? 1 - m.open : 0; r.x = damp(r.x, m.pointerX * follow, PARALLAX_LAMBDA, dt); r.y = damp(r.y, m.pointerY * follow, PARALLAX_LAMBDA, dt); const idle = !reducedMotion && m.clock - m.lastInput > IDLE_AFTER && m.open === 0; r.breath = damp(r.breath, idle ? 1 : 0, 0.8, dt); const phase = (m.clock / BREATH_PERIOD) * Math.PI * 2; const bx = Math.sin(phase) * BREATH_X * r.breath; const by = Math.sin(phase * 2 + 1) * BREATH_Y * r.breath; r.fov = damp(r.fov, reducedMotion ? FOV : FOV + (FOV_FAST - FOV) * shared.speedNorm, 4, dt); const z = distance * (1 - DOLLY * m.open); camera.position.set(r.x * PARALLAX_MOVE + bx, HEIGHT + r.y * PARALLAX_MOVE * 0.6 + by, z); const turnX = Math.tan(r.x * PARALLAX_TURN) * distance; const turnY = Math.tan(r.y * PARALLAX_TURN) * distance * 0.6; camera.lookAt(turnX + bx * 0.5, LOOK_Y * (1 - m.open) + turnY, 0); if (Math.abs(camera.fov - r.fov) > 1e-4) { camera.fov = r.fov; camera.updateProjectionMatrix(); } }, -1); return null; } 6b:T2bfb, // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { AdditiveBlending, Color, ShaderMaterial, Texture, UniformsLib, UniformsUtils, Vector2 } from "three"; // ── from package/src/Cards/CardMaterial.ts ─────────────────────────────────────────────────────────────────────────── /** Tuned values for the cards. Each one is a starting point from the brief, adjusted by eye where noted. */ export const CARD = { /** Plane segments: enough for a smooth bend and the wind ripple. */ SEGMENTS_X: 48, SEGMENTS_Y: 32, /** Corner radius as a share of the card height (brief: 0.04; 0.05 reads softer at small sizes). */ CORNER: 0.05, /** How far the picture slides toward the pointer while hovered, in UV. */ PARALLAX: 0.015, /** The picture is drawn this much larger than the card, so parallax and RGB split never show an edge. */ OVERSCAN: 1.045, /** Largest RGB split, in UV, reached at full speed. */ SPLIT_MAX: 0.004, /** Largest wind ripple, in world units, reached at full speed. */ WIND_MAX: 0.02, /** One hover light sweep takes this long (seconds), eased out. */ SWEEP_SECONDS: 0.9, /** Strength of the sweep's band of light. */ SWEEP_STRENGTH: 0.22, } as const; const vertexShader = /* glsl */ ` uniform float uBend; uniform float uWind; uniform float uWindPhase; varying vec2 vUv; #include #include void main() { vUv = uv; vec3 p = position; // Bend round a vertical cylinder of radius 1 / uBend whose axis is behind the card: the edges curve away from the // camera, like a page of the arc itself. Arc length along x is kept, so the card doesn't shrink as it bends. if (abs(uBend) > 1e-5) { float r = 1.0 / uBend; float a = p.x * uBend; p.x = r * sin(a); p.z = r * (cos(a) - 1.0); } // Wind: a travelling ripple across the card, its amplitude set by the carousel's speed. p.z += sin(position.x * 3.4 - uWindPhase) * uWind * (0.55 + 0.45 * uv.y); vec4 mvPosition = modelViewMatrix * vec4(p, 1.0); gl_Position = projectionMatrix * mvPosition; #include } `; const fragmentShader = /* glsl */ ` uniform sampler2D uMap; uniform vec2 uMapScale; uniform sampler2D uMap2; uniform vec2 uMap2Scale; uniform float uMix; uniform float uMap2Video; uniform vec2 uSize; uniform float uRadius; uniform vec3 uBorderColor; uniform float uBorderAlpha; uniform float uOpacity; uniform float uBrightness; uniform vec3 uDim; uniform vec2 uParallax; uniform float uSplit; uniform float uSweep; uniform float uSweepStrength; uniform float uFocus; uniform vec3 uFocusColor; uniform float uDefocus; varying vec2 vUv; #include #include float roundBox(vec2 p, vec2 b, float r) { vec2 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; } // The picture, cover-fitted and overscanned, with an optional RGB split along the motion. // uDefocus is a mip bias: the cinematic preset's depth of field, done in the card itself (no extra passes). vec3 picture(sampler2D map, vec2 uv, vec2 scale) { vec2 st = (uv - 0.5) * scale + 0.5; vec3 c = texture2D(map, st, uDefocus).rgb; if (uSplit != 0.0) { vec2 o = vec2(uSplit, 0.0); c.r = texture2D(map, st + o, uDefocus).r; c.b = texture2D(map, st - o, uDefocus).b; } return c; } void main() { vec2 local = (vUv - 0.5) * uSize; vec2 pixel = fwidth(local); float px = max(max(pixel.x, pixel.y), 1e-6); // Rounded rectangle, inset half a pixel so its anti-aliased edge sits inside the geometry. // Out of focus, the edge softens along with the picture. float edge = px * (1.0 + uDefocus * 3.0); float d = roundBox(local, uSize * 0.5 - edge * 0.5, uRadius); float alpha = clamp(0.5 - d / edge, 0.0, 1.0); if (alpha <= 0.0) discard; vec2 uv = vUv + uParallax; vec3 color = picture(uMap, uv, uMapScale); if (uMix > 0.001) { vec3 next = picture(uMap2, uv, uMap2Scale); // three.js uploads video frames without sRGB decoding (its own materials decode them in the shader), so a video // in uMap2 is decoded here; pictures arrive already linear. if (uMap2Video > 0.5) next = sRGBTransferEOTF(vec4(next, 1.0)).rgb; color = mix(color, next, uMix); } // Hover sweep: a soft diagonal band of light crossing once. if (uSweepStrength > 0.0) { float s = vUv.x + (1.0 - vUv.y) * 0.4; float band = exp(-pow((s - mix(-0.35, 1.75, uSweep)) / 0.13, 2.0)); color += band * uSweepStrength; } color = mix(uDim, color, uBrightness); // 1 px hairline just inside the edge, then the focus ring (2 px, a pixel further in). The hairline is mixed in // perceptual (gamma) space, like CSS would, so its 12 % reads as 12 % and not as a bright line. float inside = -d / px; float hairline = 1.0 - smoothstep(1.0, 1.8, inside); vec3 g = pow(max(color, 0.0), vec3(1.0 / 2.2)); g = mix(g, pow(uBorderColor, vec3(1.0 / 2.2)), hairline * uBorderAlpha); color = pow(g, vec3(2.2)); if (uFocus > 0.0) { float ring = smoothstep(1.2, 2.0, inside) * (1.0 - smoothstep(3.6, 4.4, inside)); color = mix(color, uFocusColor, ring * uFocus); } gl_FragColor = vec4(color, alpha * uOpacity); #include #include } `; export type CardUniforms = { uMap: { value: Texture | null }; uMapScale: { value: Vector2 }; uMap2: { value: Texture | null }; uMap2Scale: { value: Vector2 }; uMix: { value: number }; uMap2Video: { value: number }; uSize: { value: Vector2 }; uRadius: { value: number }; uBorderColor: { value: Color }; uBorderAlpha: { value: number }; uOpacity: { value: number }; uBrightness: { value: number }; uDim: { value: Color }; uParallax: { value: Vector2 }; uSplit: { value: number }; uSweep: { value: number }; uSweepStrength: { value: number }; uFocus: { value: number }; uFocusColor: { value: Color }; uDefocus: { value: number }; uBend: { value: number }; uWind: { value: number }; uWindPhase: { value: number }; }; /** * One card's material. Every card gets its own instance with its own uniforms, but they all share one GPU program: * three.js caches programs by their source, so a clone costs a uniform object, not a compile. That is cheaper than * one shared material re-filled in onBeforeRender: three uploads a material's uniforms whenever it switches * materials anyway, and a shared one would also need `uniformsNeedUpdate` (a full re-upload) for every card. */ export function createCardMaterial(): ShaderMaterial & { uniforms: CardUniforms } { const uniforms = UniformsUtils.merge([ UniformsLib.fog, { uMap: { value: null }, uMapScale: { value: new Vector2(1, 1) }, uMap2: { value: null }, uMap2Scale: { value: new Vector2(1, 1) }, uMix: { value: 0 }, uMap2Video: { value: 0 }, uSize: { value: new Vector2(1.6, 1) }, uRadius: { value: CARD.CORNER }, uBorderColor: { value: new Color(1, 1, 1) }, uBorderAlpha: { value: 0.12 }, uOpacity: { value: 1 }, uBrightness: { value: 1 }, uDim: { value: new Color(0, 0, 0) }, uParallax: { value: new Vector2() }, uSplit: { value: 0 }, uSweep: { value: 0 }, uSweepStrength: { value: 0 }, uFocus: { value: 0 }, uFocusColor: { value: new Color(1, 1, 1) }, uDefocus: { value: 0 }, uBend: { value: 0 }, uWind: { value: 0 }, uWindPhase: { value: 0 }, }, ]); const material = new ShaderMaterial({ uniforms, vertexShader, fragmentShader, transparent: true, depthWrite: true, fog: true, toneMapped: false, }); return material as ShaderMaterial & { uniforms: CardUniforms }; } /** * Cover-fit: the UV scale that makes a picture of `imageAspect` cover a card of `cardAspect` without stretching, * overscanned a little so parallax never reaches its edge. */ export function coverScale(imageAspect: number, cardAspect: number, out: Vector2, overscan: number = CARD.OVERSCAN) { if (!(imageAspect > 0)) return out.set(1 / overscan, 1 / overscan); if (imageAspect > cardAspect) out.set(cardAspect / imageAspect, 1); else out.set(1, imageAspect / cardAspect); return out.multiplyScalar(1 / overscan); } const glowVertexShader = /* glsl */ ` uniform float uBend; varying vec2 vUv; void main() { vUv = uv; vec3 p = position; if (abs(uBend) > 1e-5) { float r = 1.0 / uBend; float a = p.x * uBend; p.x = r * sin(a); p.z = r * (cos(a) - 1.0); } gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0); } `; const glowFragmentShader = /* glsl */ ` uniform vec2 uSize; uniform vec2 uCard; uniform float uRadius; uniform vec3 uColor; uniform float uIntensity; varying vec2 vUv; float roundBox(vec2 p, vec2 b, float r) { vec2 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; } void main() { vec2 local = (vUv - 0.5) * uSize; float d = roundBox(local, uCard * 0.5, uRadius); // A faint, wide halo and a soft rim close to the edge, both reaching zero before the plane's own edge, so no box // ever shows. Only the rim's peak goes above 1 (the bloom threshold) at full intensity. float outside = max(d, 0.0); float halo = exp(-outside * 10.0) * 0.1 + exp(-outside * 42.0) * 0.32; float edgeFade = 1.0 - smoothstep(0.55, 1.0, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)) * 2.0); float inner = smoothstep(-0.05, 0.0, d); gl_FragColor = vec4(uColor * halo * edgeFade * inner * uIntensity, 1.0); } `; export type GlowUniforms = { uSize: { value: Vector2 }; uCard: { value: Vector2 }; uRadius: { value: number }; uColor: { value: Color }; uIntensity: { value: number }; uBend: { value: number }; }; /** How far the glow plane reaches past the card on each side (world units). */ export const GLOW_MARGIN = 0.5; /** * The active card's rim glow: additive, drawn behind the card in HDR (intensity above 1), so the bloom pass, whose * threshold is 1, picks up the glow and nothing else. Photos never exceed 1, which is what makes the bloom selective * without rendering the selection twice. */ export function createGlowMaterial(): ShaderMaterial & { uniforms: GlowUniforms } { const material = new ShaderMaterial({ uniforms: { uSize: { value: new Vector2(1.6 + GLOW_MARGIN * 2, 1 + GLOW_MARGIN * 2) }, uCard: { value: new Vector2(1.6, 1) }, uRadius: { value: CARD.CORNER }, uColor: { value: new Color(1, 1, 1) }, uIntensity: { value: 0 }, uBend: { value: 0 }, }, vertexShader: glowVertexShader, fragmentShader: glowFragmentShader, transparent: true, depthWrite: false, blending: AdditiveBlending, toneMapped: false, }); return material as ShaderMaterial & { uniforms: GlowUniforms }; } 6c:T799e, // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { useFrame, useThree } from "@react-three/fiber"; import { useEffect, useMemo, useRef, useSyncExternalStore } from "react"; import { Color, Euler, Matrix4, Mesh, PlaneGeometry, Quaternion, Ray, Vector2, Vector3, type PerspectiveCamera, type Texture } from "three"; import type { OrbitStore } from "@/components/orbit-gallery-store"; import { arcOffset, copyTransform, createTransform, layouts, lerpTransform, clamp, damp, easeOutExpo, smoothstep, wrapSigned, FLOOR_Y } from "@/components/orbit-gallery-layouts"; import { parseColor } from "@/components/orbit-gallery-theme"; import type { CardTransform, LayoutName, LayoutParams, OrbitItem, ThemeTokens } from "@/components/orbit-gallery-types"; import { CARD, coverScale, createCardMaterial, createGlowMaterial, GLOW_MARGIN } from "@/components/orbit-gallery-card-material"; import { CardVideo, placeholderTexture, type TextureCache, type TextureEntry } from "@/components/orbit-gallery-textures"; // ── from package/src/Cards/Card.tsx ────────────────────────────────────────────────────────────────────────────────── /** Scene-wide values the cards, the camera rig, the floor and the effects share; written by the cards each frame. */ export type SceneShared = { /** Carousel speed in cards per second, measured from the position (signed, smoothed): drags count too. */ speed: number; /** |speed| mapped to 0..1. */ speedNorm: number; /** World position of the active card (for the key light and the depth of field). */ activePosition: Vector3; /** Accent colour of the active card. */ activeAccent: Color; /** Distance from the camera to the active card. */ focusDistance: number; /** The stage has keyboard focus (focus-visible): draw the focus ring on the active card. */ focusVisible: boolean; /** The card (item and copy) under the pointer, set by the scene's hover test. */ hoveredKey: string | null; }; export type CardsConfig = { items: OrbitItem[]; radius: number; curvature: number; gap: number; cardWidth: number; cardHeight: number; /** Copies per item an endless ring may need (decided once for both filter states). */ maxCopies: number; /** Slots an endless ring needs so its wrap point stays out of view. */ ringMin: number; tokens: ThemeTokens; dark: boolean; reducedMotion: boolean; /** Load every picture right away (otherwise only the cards near the front, the rest after the intro). */ eager: boolean; /** Bloom picks up glows above 1: how bright the active card's rim glow is. */ glow: number; /** The cinematic preset's depth of field: cards away from the active one go out of focus. */ defocus: boolean; }; /** Speed (cards per second) at which the speed effects are at full strength. */ const FAST_SPEED = 7; /** How quickly a card glides to a new place after a filter change (per second). */ const SLOT_LAMBDA = 6.5; /** How quickly a card folds away or unfolds (per second): about 0.5 s. */ const FOLD_LAMBDA = 9; /** A layout morph: each card takes this long… */ const MORPH_SECONDS = 0.75; /** …starting this much later per card away from the front, so the change sweeps outward (about 1 s in all). */ const MORPH_STAGGER = 0.035; /** Hover tilt toward the pointer, in radians: 6° about x, 8° about y. */ const TILT_X = (6 * Math.PI) / 180; const TILT_Y = (8 * Math.PI) / 180; /** Direct neighbours of the hovered card get this share of its tilt. */ const NEIGHBOUR_TILT = 0.25; const TILT_LAMBDA = 8; /** The active card: scaled up this much… */ const ACTIVE_SCALE = 0.06; /** …and lifted this much. */ const ACTIVE_LIFT = 0.05; /** Brightness of the active card, its direct neighbours and the rest. */ const BRIGHT_ACTIVE = 1; const BRIGHT_NEIGHBOUR = 0.75; const BRIGHT_OTHER = 0.55; /** Share of the dimming the light theme applies (see the brightness levels above). */ const LIGHT_DIM_SHARE = 0.45; /** In the intro, cards come from this far back… */ const INTRO_DEPTH = 7; /** …each taking this long… */ const INTRO_CARD_SECONDS = 0.95; /** …the front one first, then outward by this much per card. */ const INTRO_STAGGER = 0.085; /** Total intro length (seconds), the brief's 1.6 s. */ export const INTRO_SECONDS = 1.6; /** Opened, the card sits this far in front of the camera, scaled to cover the viewport. */ const OPEN_DISTANCE = 2; /** The other cards drift this far back while a card opens, as they fade. */ const OPEN_RECEDE = 0.8; /** A card's video element is created (and starts buffering) this close to the front. */ const VIDEO_PRELOAD_RANGE = 1.6; /** Depth of field in the cards (cinematic): mip bias reached two cards from the front, and where it starts. */ const DEFOCUS_MAX = 2.6; const DEFOCUS_FROM = 0.35; /** Cards this close to the front load first; the rest wait until the intro has played. */ const EAGER_RANGE = 1.5; type Runtime = { key: string; item: number; copy: number; mesh: Mesh | null; glow: Mesh | null; material: ReturnType; glowMaterial: ReturnType; slot: number; initialized: boolean; shiftSeen: number; presence: number; offset: number; tiltX: number; tiltY: number; parallaxX: number; parallaxY: number; sweepStart: number; wasHovered: boolean; glowColor: string; morphFrom: CardTransform; morphing: boolean; morphDelay: number; brightness: number; focus: number; videoMix: number; video: CardVideo | null; poster: TextureEntry | null; posterApplied: boolean; posterRequested: boolean; placeholder: Texture | null; placeholderAspect: number; visible: boolean; }; export type CardsHandle = { /** The card under a point given in normalized device coordinates, with the point within it (-1..1). */ pick: (ndcX: number, ndcY: number) => { item: number; key: string; u: number; v: number } | null; /** A card's centre in normalized device coordinates. */ screenOf: (key: string) => { x: number; y: number } | null; }; const scratch = { a: createTransform(), b: createTransform(), t: createTransform(), q: new Quaternion(), q2: new Quaternion(), e: new Euler(), v: new Vector3(), v2: new Vector3(), s: new Vector3(), m: new Matrix4(), ray: new Ray(), dir: new Vector3(), scale: new Vector2(), }; export function Cards({ store, config, cache, shared, handle, }: { store: OrbitStore; config: CardsConfig; cache: TextureCache; shared: SceneShared; handle: { current: CardsHandle | null }; }) { const state = useSyncExternalStore(store.subscribe, store.getState, store.getState); const camera = useThree((s) => s.camera) as PerspectiveCamera; const size = useThree((s) => s.size); const runtimes = useRef(new Map()); const frame = useRef({ lastPosition: NaN, layout: state.layout as LayoutName, morphStart: -1, lazy: false, introStarted: -1 }); const geometry = useMemo(() => new PlaneGeometry(config.cardWidth, config.cardHeight, CARD.SEGMENTS_X, CARD.SEGMENTS_Y), [config.cardWidth, config.cardHeight]); const glowGeometry = useMemo( () => new PlaneGeometry(config.cardWidth + GLOW_MARGIN * 2, config.cardHeight + GLOW_MARGIN * 2, 24, 1), [config.cardWidth, config.cardHeight], ); useEffect(() => () => geometry.dispose(), [geometry]); useEffect(() => () => glowGeometry.dispose(), [glowGeometry]); const keys = useMemo(() => { const list: { key: string; item: number; copy: number }[] = []; config.items.forEach((item, index) => { for (let copy = 0; copy < config.maxCopies; copy++) list.push({ key: `${item.id}:${copy}`, item: index, copy }); }); return list; }, [config.items, config.maxCopies]); // Picking: the scene asks which card is under the pointer. Each card is tested as its flat rectangle in its own // space (the bend moves the edges by a few hundredths at most). useEffect(() => { handle.current = { pick(ndcX, ndcY) { scratch.ray.origin.setFromMatrixPosition(camera.matrixWorld); scratch.ray.direction.set(ndcX, ndcY, 0.5).unproject(camera).sub(scratch.ray.origin).normalize(); let best: { item: number; key: string; u: number; v: number; distance: number } | null = null; for (const rt of runtimes.current.values()) { if (!rt.mesh || !rt.visible || rt.presence < 0.5 || rt.material.uniforms.uOpacity.value < 0.3) continue; scratch.m.copy(rt.mesh.matrixWorld).invert(); const origin = scratch.v.copy(scratch.ray.origin).applyMatrix4(scratch.m); const direction = scratch.v2.copy(scratch.ray.direction).transformDirection(scratch.m); // transformDirection normalizes; a scaled matrix changes length, so recompute t in local units const end = scratch.dir.copy(scratch.ray.origin).add(scratch.ray.direction).applyMatrix4(scratch.m); direction.copy(end).sub(origin); if (Math.abs(direction.z) < 1e-6) continue; const t = -origin.z / direction.z; if (t <= 0) continue; const x = origin.x + direction.x * t; const y = origin.y + direction.y * t; if (Math.abs(x) > config.cardWidth / 2 || Math.abs(y) > config.cardHeight / 2) continue; if (!best || t < best.distance) { best = { item: rt.item, key: rt.key, u: (x / config.cardWidth) * 2, v: (y / config.cardHeight) * 2, distance: t }; } } return best ? { item: best.item, key: best.key, u: best.u, v: best.v } : null; }, screenOf(key) { const rt = runtimes.current.get(key); if (!rt?.mesh) return null; const p = scratch.v.setFromMatrixPosition(rt.mesh.matrixWorld).project(camera); return { x: p.x, y: p.y }; }, }; return () => { handle.current = null; }; }, [camera, config.cardWidth, config.cardHeight, handle]); useFrame((three, rawDt) => { const dt = Math.min(rawDt, 0.1); const m = store.motion; const s = store.getState(); const f = frame.current; const clock = three.clock.elapsedTime; // Speed from the position itself, so drags (which set the position directly) drive the effects too. if (Number.isNaN(f.lastPosition)) f.lastPosition = m.position; const instant = dt > 0 ? (m.position - f.lastPosition) / dt : 0; f.lastPosition = m.position; shared.speed = damp(shared.speed, clamp(instant, -30, 30), 10, dt); shared.speedNorm = config.reducedMotion ? 0 : clamp(Math.abs(shared.speed) / FAST_SPEED, 0, 1); if (s.layout !== f.layout) { // Morph from wherever each card is now, so a change mid-morph never jumps. for (const rt of runtimes.current.values()) { rt.morphing = rt.visible; rt.morphDelay = Math.min(Math.abs(rt.offset), 10) * MORPH_STAGGER; } f.morphStart = clock; f.layout = s.layout; } if (!f.lazy && (m.intro >= 1 || config.eager)) f.lazy = true; const visibleSlot = new Map(); s.visible.forEach((item, slot) => visibleSlot.set(item, slot)); const count = s.visible.length; const endless = store.isEndless(); const copies = endless ? Math.min(config.maxCopies, Math.max(1, Math.ceil(config.ringMin / Math.max(1, count)))) : 1; const ring = count * copies; const layoutFn = layouts[s.layout]; const view = viewSize(camera, size.width / Math.max(1, size.height)); const band = viewBand(camera); const params: LayoutParams = { position: m.position, infinite: endless, ring, radius: config.radius, gap: config.gap, cardWidth: config.cardWidth, cardHeight: config.cardHeight, viewWidth: view.width, viewHeight: view.height, viewTop: band.top, viewBottom: band.bottom, floorY: FLOOR_Y, }; // Where the open card goes: in front of the camera, flat, covering the viewport. const openPose = openTransform(camera, size.width / Math.max(1, size.height), config); const open = m.open; const selected = s.selected; const hoveredKey = s.hovered >= 0 && !s.dragging && s.mode === "browse" ? shared.hoveredKey : null; const hoveredRuntime = hoveredKey ? runtimes.current.get(hoveredKey) : undefined; const hoveredSlot = hoveredRuntime ? hoveredRuntime.offset : Number.NaN; const introClock = m.intro * INTRO_SECONDS; for (const rt of runtimes.current.values()) { if (!rt.mesh || !rt.glow) continue; const vi = visibleSlot.get(rt.item); const present = vi !== undefined && rt.copy < copies; const target = present ? vi + rt.copy * count : rt.slot; // Follow position remaps (filter changes) so nothing jumps, then glide to the new slot. if (rt.shiftSeen !== m.slotShift) { rt.slot += m.slotShift - rt.shiftSeen; rt.shiftSeen = m.slotShift; } if (!rt.initialized || (present && rt.presence < 0.02)) { rt.slot = target; rt.initialized = true; } else if (present) { const diff = endless ? wrapSigned(target - rt.slot, ring) : target - rt.slot; rt.slot += diff * (1 - Math.exp(-SLOT_LAMBDA * dt)); } rt.presence = damp(rt.presence, present ? 1 : 0, FOLD_LAMBDA, dt); if (config.reducedMotion) rt.presence = present ? 1 : 0; if (rt.presence < 0.002 && !present) { rt.visible = rt.mesh.visible = false; continue; } const offset = s.layout === "arc" ? arcOffset(rt.slot, ring, params) : rt.slot - m.position; rt.offset = offset; // Layout: the live target, morphed from the pose the card had when the layout changed. const live = layoutAt(layoutFn, rt.slot, s.layout === "arc" ? ring : count, params, scratch.a); let pose = live; if (rt.morphing) { const t = clamp((clock - f.morphStart - rt.morphDelay) / MORPH_SECONDS, 0, 1); const eased = t * t * (3 - 2 * t); pose = lerpTransform(rt.morphFrom, live, config.reducedMotion ? 1 : eased, scratch.b); if (t >= 1) rt.morphing = false; } else { // Remember the latest pose: the next layout change morphs from here. copyTransform(live, rt.morphFrom); } const tr = copyTransform(pose, scratch.t); // Emphasis on the active card: a little bigger, a little higher. const activeness = clamp(1 - Math.abs(offset), 0, 1); const emphasis = activeness * activeness * (3 - 2 * activeness); tr.scale[0] *= 1 + ACTIVE_SCALE * emphasis; tr.scale[1] *= 1 + ACTIVE_SCALE * emphasis; tr.position[1] += ACTIVE_LIFT * emphasis; // Intro: from deep in the fog, the front card first. let intro = 1; if (m.intro < 1 && !config.reducedMotion) { intro = easeOutExpo(clamp((introClock - 0.08 - Math.abs(offset) * INTRO_STAGGER) / INTRO_CARD_SECONDS, 0, 1)); tr.position[2] -= (1 - intro) * INTRO_DEPTH; tr.position[1] -= (1 - intro) * 0.35; const k = 0.82 + 0.18 * intro; tr.scale[0] *= k; tr.scale[1] *= k; } // Hover: tilt toward the pointer, a quarter of it for the direct neighbours. const isHovered = rt.key === hoveredKey; let tiltShare = 0; if (isHovered) tiltShare = 1; else if (hoveredKey && Math.abs(Math.abs(offset - hoveredSlot) - 1) < 0.35) tiltShare = NEIGHBOUR_TILT; const reduce = config.reducedMotion ? 0 : 1; rt.tiltX = damp(rt.tiltX, -m.hoverV * TILT_X * tiltShare * reduce, TILT_LAMBDA, dt); rt.tiltY = damp(rt.tiltY, m.hoverU * TILT_Y * tiltShare * reduce, TILT_LAMBDA, dt); rt.parallaxX = damp(rt.parallaxX, isHovered ? -m.hoverU * CARD.PARALLAX * reduce : 0, TILT_LAMBDA, dt); rt.parallaxY = damp(rt.parallaxY, isHovered ? -m.hoverV * CARD.PARALLAX * reduce : 0, TILT_LAMBDA, dt); if (isHovered && !rt.wasHovered) rt.sweepStart = clock; rt.wasHovered = isHovered; // Compose: layout rotation, then the tilt in the card's own frame. scratch.e.set(tr.rotation[0], tr.rotation[1], tr.rotation[2]); scratch.q.setFromEuler(scratch.e); scratch.e.set(rt.tiltX, rt.tiltY, 0); scratch.q2.setFromEuler(scratch.e); scratch.q.multiply(scratch.q2); // Fold (filter): scaleX → 0 while turning 90° about y. const fold = rt.presence * rt.presence * (3 - 2 * rt.presence); if (fold < 0.999) { scratch.e.set(0, (1 - fold) * (Math.PI / 2) * (offset >= 0 ? 1 : -1), 0); scratch.q2.setFromEuler(scratch.e); scratch.q.multiply(scratch.q2); } // The copy at the front is the one that opens (on a ring with repeats, that need not be copy 0). const isSelected = rt.item === selected && Math.abs(offset) < 0.6; const mesh = rt.mesh; mesh.position.set(tr.position[0], tr.position[1], tr.position[2]); mesh.quaternion.copy(scratch.q); mesh.scale.set(tr.scale[0] * Math.max(fold, 0.0001), tr.scale[1], tr.scale[2]); let opacity = tr.opacity * intro; let bend = (config.curvature / config.radius) * tr.bend; let radius = CARD.CORNER * config.cardHeight; if (open > 0) { if (isSelected) { // The shared-element transition: fly to the camera, un-bend, square the corners, fill the viewport. mesh.position.lerp(openPose.position, open); mesh.quaternion.slerp(openPose.quaternion, open); mesh.scale.lerp(openPose.scale, open); bend *= 1 - open; radius *= 1 - open; } else { opacity *= 1 - smoothstep(0, 0.6, open); mesh.position.z -= OPEN_RECEDE * open; } } rt.visible = opacity > 0.002; mesh.visible = rt.visible; if (!rt.visible) continue; // Brightness: by distance from the front on the arc; the active card stays full in other layouts. let bright: number; if (s.layout === "arc") { const d = Math.abs(offset); bright = BRIGHT_ACTIVE - (BRIGHT_ACTIVE - BRIGHT_NEIGHBOUR) * smoothstep(0, 1, d) - (BRIGHT_NEIGHBOUR - BRIGHT_OTHER) * smoothstep(1, 2, d); } else { bright = BRIGHT_ACTIVE - (BRIGHT_ACTIVE - 0.72) * smoothstep(0, 0.6, Math.abs(offset)); } // On paper, dimming means fading toward the paper: half as much keeps the pictures from looking washed out. if (!config.dark) bright = 1 - (1 - bright) * LIGHT_DIM_SHARE; if (isSelected) bright = bright + (1 - bright) * open; rt.brightness = bright; // Picture: placeholder until the poster arrives, then a crossfade to the video while active. const u = rt.material.uniforms; const item = config.items[rt.item]!; if (!rt.posterRequested && (f.lazy || Math.abs(offset) <= EAGER_RANGE)) { rt.posterRequested = true; rt.poster = cache.request(item.image, Math.abs(offset)); } else if (rt.poster && rt.poster.status === "queued") { cache.prioritize(item.image, Math.abs(offset)); } if (rt.poster && rt.poster.status === "ready" && rt.poster.texture && !rt.posterApplied) { rt.posterApplied = true; u.uMap2.value = rt.poster.texture; u.uMap2Video.value = 0; coverScale(rt.poster.aspect, config.cardWidth / config.cardHeight, u.uMap2Scale.value); rt.videoMix = 0; u.uMix.value = 0.0001; } if (rt.posterApplied && rt.poster?.texture) { // Blur-up: placeholder (uMap) → poster (uMap2); once complete, the poster becomes the base for the video. if (u.uMap.value !== rt.poster.texture) { u.uMix.value = config.reducedMotion ? 1 : Math.min(1, u.uMix.value + dt / 0.6); if (u.uMix.value >= 1) { u.uMap.value = rt.poster.texture; u.uMapScale.value.copy(u.uMap2Scale.value); u.uMix.value = 0; } } else if (item.video) { const wantVideo = activeness > 0.5 && rt.presence > 0.9 && m.intro >= 1; // Made a card early (it starts buffering), so the swap is quick once the card arrives at the front. const nearFront = Math.abs(offset) < VIDEO_PRELOAD_RANGE && m.intro >= 1; if ((wantVideo || nearFront) && !rt.video && typeof document !== "undefined") rt.video = new CardVideo(item.video); if (rt.video) { if (wantVideo) rt.video.play(); const ready = rt.video.ready && wantVideo; rt.videoMix = config.reducedMotion ? (ready ? 1 : 0) : damp(rt.videoMix, ready ? 1 : 0, 6, dt); if (rt.videoMix > 0.001) { u.uMap2.value = rt.video.texture; u.uMap2Video.value = 1; coverScale(rt.video.aspect, config.cardWidth / config.cardHeight, u.uMap2Scale.value); } u.uMix.value = rt.videoMix; if (!wantVideo && rt.videoMix < 0.01) rt.video.pause(); } } } else if (rt.placeholder && u.uMap.value !== rt.placeholder) { u.uMap.value = rt.placeholder; coverScale(rt.placeholderAspect || config.cardWidth / config.cardHeight, config.cardWidth / config.cardHeight, u.uMapScale.value); } u.uOpacity.value = opacity; u.uBrightness.value = rt.brightness; u.uBend.value = bend; u.uRadius.value = radius; u.uParallax.value.set(rt.parallaxX, rt.parallaxY); const sign = Math.sign(shared.speed); u.uSplit.value = isSelected && open > 0 ? 0 : sign * shared.speedNorm * CARD.SPLIT_MAX; u.uWind.value = shared.speedNorm * CARD.WIND_MAX * (1 - open); u.uWindPhase.value = clock * 7 * (sign || 1); const sweepT = (clock - rt.sweepStart) / CARD.SWEEP_SECONDS; u.uSweep.value = easeOutExpo(clamp(sweepT, 0, 1)); u.uSweepStrength.value = sweepT >= 0 && sweepT < 1 && !config.reducedMotion ? CARD.SWEEP_STRENGTH * (1 - sweepT * 0.4) : 0; rt.focus = damp(rt.focus, shared.focusVisible && activeness > 0.5 && s.mode === "browse" ? 1 : 0, 12, dt); u.uFocus.value = rt.focus; u.uDefocus.value = config.defocus && !isSelected ? DEFOCUS_MAX * smoothstep(DEFOCUS_FROM, 1.8, Math.abs(offset)) : 0; // Rim glow of the active card, in its accent colour. const glowU = rt.glowMaterial.uniforms; const accent = item.accent ?? rt.poster?.accent ?? config.tokens.accent; if (accent !== rt.glowColor) { glowU.uColor.value.set(accent); rt.glowColor = accent; } glowU.uBend.value = bend; glowU.uRadius.value = radius; const glowStrength = emphasis * intro * (1 - open) * fold * config.glow; glowU.uIntensity.value = glowStrength; rt.glow.visible = glowStrength > 0.002; if (activeness > 0.5) { shared.activePosition.copy(mesh.position); shared.activeAccent.copy(glowU.uColor.value); shared.focusDistance = camera.position.distanceTo(mesh.position); } } // Pixels between two neighbouring cards at the front: the drag distance that moves one card. const ppc = pixelsPerCard(camera, size, layoutFn, params, s.layout === "arc" ? ring : count, m.position); if (ppc) store.setPixelsPerCard(ppc); }); return ( {keys.map(({ key, item, copy }) => ( ))} ); } /** A layout evaluated at a fractional slot: grid cells are discrete, so blend the two cells either side. */ function layoutAt(fn: (typeof layouts)[LayoutName], slot: number, n: number, params: LayoutParams, out: CardTransform) { if (fn === layouts.arc || fn === layouts.stack) return fn(slot, n, params, out); const lo = Math.floor(slot); const t = slot - lo; if (t < 1e-4) return fn(lo, n, params, out); const a = fn(lo, n, params, createTransform()); const b = fn(lo + 1, n, params, createTransform()); return lerpTransform(a, b, t, out); } /** World size of the view at the stage plane (z = 0). */ function viewSize(camera: PerspectiveCamera, aspect: number) { const distance = Math.max(0.1, camera.position.z); const height = 2 * distance * Math.tan((camera.fov * Math.PI) / 360); return { width: height * aspect, height }; } const bandScratch = { origin: new Vector3(), dir: new Vector3() }; /** Highest and lowest visible y where the view meets the stage plane (z = 0). */ function viewBand(camera: PerspectiveCamera) { const at = (ndcY: number) => { bandScratch.origin.setFromMatrixPosition(camera.matrixWorld); bandScratch.dir.set(0, ndcY, 0.5).unproject(camera).sub(bandScratch.origin); const t = -bandScratch.origin.z / (bandScratch.dir.z || -1e-6); return bandScratch.origin.y + bandScratch.dir.y * t; }; return { top: at(1), bottom: at(-1) }; } const openPoseScratch = { position: new Vector3(), quaternion: new Quaternion(), scale: new Vector3(), forward: new Vector3() }; function openTransform(camera: PerspectiveCamera, aspect: number, config: CardsConfig) { const pose = openPoseScratch; camera.getWorldDirection(pose.forward); pose.position.copy(camera.position).addScaledVector(pose.forward, OPEN_DISTANCE); pose.quaternion.copy(camera.quaternion); const height = 2 * OPEN_DISTANCE * Math.tan((camera.fov * Math.PI) / 360); const width = height * aspect; // Cover the viewport (a hair over, so no edge ever shows). const s = Math.max(width / config.cardWidth, height / config.cardHeight) * 1.004; pose.scale.set(s, s, 1); return pose; } const ppcScratch = { a: new Vector3(), b: new Vector3(), ta: createTransform(), tb: createTransform() }; function pixelsPerCard( camera: PerspectiveCamera, size: { width: number; height: number }, fn: (typeof layouts)[LayoutName], params: LayoutParams, n: number, position: number, ) { const base = Math.round(position); const a = fn(base, n, { ...params, position: base }, ppcScratch.ta); const b = fn(base + 1, n, { ...params, position: base }, ppcScratch.tb); ppcScratch.a.set(a.position[0], a.position[1], a.position[2]).project(camera); ppcScratch.b.set(b.position[0], b.position[1], b.position[2]).project(camera); const dx = ((ppcScratch.b.x - ppcScratch.a.x) / 2) * size.width; const dy = ((ppcScratch.b.y - ppcScratch.a.y) / 2) * size.height; const px = Math.hypot(dx, dy); return px > 20 ? px : 0; } function CardMesh({ id, item, copy, data, geometry, glowGeometry, runtimes, config, cache, }: { id: string; item: number; copy: number; data: OrbitItem; geometry: PlaneGeometry; glowGeometry: PlaneGeometry; runtimes: Map; config: CardsConfig; cache: TextureCache; }) { const runtime = useMemo( () => ({ key: id, item, copy, mesh: null, glow: null, material: createCardMaterial(), glowMaterial: createGlowMaterial(), slot: 0, initialized: false, shiftSeen: 0, presence: 0, offset: 0, tiltX: 0, tiltY: 0, parallaxX: 0, parallaxY: 0, sweepStart: -10, wasHovered: false, glowColor: "", morphFrom: createTransform(), morphing: false, morphDelay: 0, brightness: 1, focus: 0, videoMix: 0, video: null, poster: null, posterApplied: false, posterRequested: false, placeholder: null, placeholderAspect: 0, visible: false, }), // A card's GPU resources live as long as the card itself. // eslint-disable-next-line react-hooks/exhaustive-deps [id], ); // Theme-dependent uniforms. useEffect(() => { const u = runtime.material.uniforms; const border = parseColor(config.tokens.cardBorder); u.uBorderColor.value.setRGB(border.r, border.g, border.b, "srgb"); u.uBorderAlpha.value = border.a; u.uDim.value.set(config.dark ? "#000000" : config.tokens.background); u.uFocusColor.value.set(config.tokens.foreground); u.uSize.value.set(config.cardWidth, config.cardHeight); const g = runtime.glowMaterial.uniforms; g.uCard.value.set(config.cardWidth, config.cardHeight); g.uSize.value.set(config.cardWidth + GLOW_MARGIN * 2, config.cardHeight + GLOW_MARGIN * 2); }, [runtime, config.tokens, config.dark, config.cardWidth, config.cardHeight]); // Placeholder for the blur-up, then the poster through the shared cache (released on unmount). useEffect(() => { let cancelled = false; cache.retain(data.image); placeholderTexture(data.placeholder, data.accent ?? config.tokens.muted).then(({ texture, aspect }) => { if (cancelled) { texture.dispose(); return; } runtime.placeholder = texture; runtime.placeholderAspect = aspect; }); return () => { cancelled = true; cache.release(data.image); runtime.placeholder?.dispose(); runtime.placeholder = null; runtime.poster = null; runtime.posterApplied = runtime.posterRequested = false; runtime.material.uniforms.uMap.value = null; runtime.material.uniforms.uMap2.value = null; }; // config.tokens.muted only matters before the first load // eslint-disable-next-line react-hooks/exhaustive-deps }, [cache, data.image, data.placeholder, data.accent, runtime]); useEffect(() => { runtimes.set(id, runtime); return () => { runtimes.delete(id); }; }, [id, runtime, runtimes]); useEffect( () => () => { runtime.video?.dispose(); runtime.video = null; runtime.material.dispose(); runtime.glowMaterial.dispose(); }, [runtime], ); return ( { runtime.mesh = mesh; }} geometry={geometry} material={runtime.material} frustumCulled={false} > { runtime.glow = mesh; }} geometry={glowGeometry} material={runtime.glowMaterial} position={[0, 0, -0.02]} renderOrder={-1} frustumCulled={false} /> ); } 6d:T148f,"use client"; // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { useEffect, useRef, type CSSProperties } from "react"; import type { OrbitState, OrbitStore } from "@/components/orbit-gallery-store"; import type { OrbitItem } from "@/components/orbit-gallery-types"; // ── from package/src/fallback/CssScroller.tsx ──────────────────────────────────────────────────────────────────────── /** After the last scroll event, a scroll counts as finished after this long (ms), where `scrollend` isn't supported. */ const SCROLL_SETTLE_MS = 160; /** * Without WebGL, the same gallery as a horizontal scroll-snap strip: the cards in a row, the active one in the * middle, the same overlay, keys, filter and detail view. Native scrolling (touch, trackpad, shift + wheel) drives * it, and the store follows; keys and the filter move the store, and the strip scrolls to follow. */ export function CssScroller({ items, state, store, reducedMotion, }: { items: OrbitItem[]; state: OrbitState; store: OrbitStore; reducedMotion: boolean; }) { const strip = useRef(null); const open = useRef(null); const userScrolling = useRef(false); // The store still needs its clock: springs (keys, autoplay) and the open transition read from it. useEffect(() => { let frame = 0; let last = performance.now(); const tick = (now: number) => { frame = requestAnimationFrame(tick); store.step((now - last) / 1000); last = now; open.current?.style.setProperty("--og-open", store.motion.open.toFixed(4)); }; frame = requestAnimationFrame(tick); store.setReady(); return () => cancelAnimationFrame(frame); }, [store]); // The user's own scrolling moves the store (no animation of its own: the strip is already moving). useEffect(() => { const el = strip.current; if (!el) return; let settle: ReturnType | undefined; const start = () => { userScrolling.current = true; }; const end = () => { userScrolling.current = false; }; const onScroll = () => { if (!userScrolling.current) return; store.place(nearestSlot(el)); clearTimeout(settle); settle = setTimeout(end, SCROLL_SETTLE_MS * 4); }; el.addEventListener("pointerdown", start); el.addEventListener("touchstart", start, { passive: true }); el.addEventListener("wheel", start, { passive: true }); el.addEventListener("scroll", onScroll, { passive: true }); el.addEventListener("scrollend", end); return () => { clearTimeout(settle); el.removeEventListener("pointerdown", start); el.removeEventListener("touchstart", start); el.removeEventListener("wheel", start); el.removeEventListener("scroll", onScroll); el.removeEventListener("scrollend", end); }; }, [store]); // Keys, the filter and autoplay move the store: scroll to its card. useEffect(() => { const el = strip.current; if (!el || userScrolling.current) return; const card = el.querySelector(`[data-og-item="${state.index}"]`); if (!card) return; const left = card.offsetLeft - (el.clientWidth - card.offsetWidth) / 2; if (Math.abs(el.scrollLeft - left) > 2) el.scrollTo({ left, behavior: reducedMotion ? "auto" : "smooth" }); }, [state.index, state.visible, reducedMotion]); const selected = state.selected >= 0 ? items[state.selected] : undefined; return ( <>

{state.visible.map((index) => { const item = items[index]!; return (

); })}

{selected && (

)} ); } /** The slot whose card is nearest the middle of the strip. */ function nearestSlot(el: HTMLElement) { const middle = el.scrollLeft + el.clientWidth / 2; let best = 0; let bestDistance = Infinity; el.querySelectorAll("[data-og-item]").forEach((card, slot) => { const distance = Math.abs(card.offsetLeft + card.offsetWidth / 2 - middle); if (distance < bestDistance) { bestDistance = distance; best = slot; } }); return best; } 6e:T1619,"use client"; // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { useEffect, useRef, type RefObject } from "react"; import type { OrbitState } from "@/components/orbit-gallery-store"; // ── from package/src/dom/Cursor.tsx ────────────────────────────────────────────────────────────────────────────────── /** How tightly the dot follows the pointer, and how loosely the ring trails it (per second). */ const DOT_LAMBDA = 40; const RING_LAMBDA = 13; /** Over a control in a corner, the ring is pulled this share of the way to the control's centre… */ const MAGNET_PULL = 0.4; /** …and over a card, this share toward the card's centre. */ const CARD_PULL = 0.1; /** While dragging fast, the ring stretches up to this much along the motion. */ const STRETCH = 0.35; /** Where the hovered card's centre is on screen, written by the scene each frame (pixels in the stage). */ export type CursorBridge = { hover: boolean; x: number; y: number; speed: number }; /** * A dot and a trailing ring that carries a label: "Drag" on the stage, "Open" over the front card, "View" over the * others. The ring is drawn to the controls in the corners and, a little, to the card under it. Only for a mouse: * hidden on touch screens, under reduced motion and over the detail view, where the system cursor comes back. */ export function Cursor({ rootRef, state, bridge, labels, }: { rootRef: RefObject; state: OrbitState; bridge: CursorBridge; labels: { drag: string; open: string; view: string }; }) { const dot = useRef(null); const ring = useRef(null); useEffect(() => { const root = rootRef.current; if (!root) return; let px = -100; let py = -100; let dx = px; let dy = py; let rx = px; let ry = py; let shown = false; let magnet: Element | null = null; let last = performance.now(); let frame = 0; const onMove = (event: PointerEvent) => { if (event.pointerType !== "mouse") return; const rect = root.getBoundingClientRect(); px = event.clientX - rect.left; py = event.clientY - rect.top; if (!shown) { dx = rx = px; dy = ry = py; } shown = true; const target = event.target instanceof Element ? event.target : null; magnet = target?.closest("[data-og-magnetic], .og-corner a, .og-corner button") ?? null; root.toggleAttribute("data-og-cursor-ui", magnet !== null || target?.closest("[data-og-ui]") !== null); }; const onLeave = () => { shown = false; }; const tick = (now: number) => { frame = requestAnimationFrame(tick); const dt = Math.min(0.05, (now - last) / 1000); last = now; const rect = root.getBoundingClientRect(); let tx = px; let ty = py; let width = 0; let height = 0; if (magnet) { const r = magnet.getBoundingClientRect(); const cx = r.left + r.width / 2 - rect.left; const cy = r.top + r.height / 2 - rect.top; tx = px + (cx - px) * MAGNET_PULL; ty = py + (cy - py) * MAGNET_PULL; width = r.width; height = r.height; } else if (bridge.hover) { tx = px + (bridge.x - px) * CARD_PULL; ty = py + (bridge.y - py) * CARD_PULL; } dx += (px - dx) * (1 - Math.exp(-DOT_LAMBDA * dt)); dy += (py - dy) * (1 - Math.exp(-DOT_LAMBDA * dt)); rx += (tx - rx) * (1 - Math.exp(-RING_LAMBDA * dt)); ry += (ty - ry) * (1 - Math.exp(-RING_LAMBDA * dt)); const stretch = 1 + Math.min(1, Math.abs(bridge.speed) / 8) * STRETCH; if (dot.current) { dot.current.style.transform = `translate3d(${dx}px, ${dy}px, 0)`; dot.current.style.opacity = shown ? "" : "0"; } if (ring.current) { ring.current.style.transform = `translate3d(${rx}px, ${ry}px, 0) scale(${stretch}, ${1 / Math.sqrt(stretch)})`; ring.current.style.opacity = shown ? "" : "0"; ring.current.style.setProperty("--og-magnet-w", magnet ? `${Math.max(28, width + 18)}px` : ""); ring.current.style.setProperty("--og-magnet-h", magnet ? `${Math.max(28, height + 14)}px` : ""); ring.current.toggleAttribute("data-og-magnet", magnet !== null); } }; root.addEventListener("pointermove", onMove); root.addEventListener("pointerleave", onLeave); frame = requestAnimationFrame(tick); return () => { cancelAnimationFrame(frame); root.removeEventListener("pointermove", onMove); root.removeEventListener("pointerleave", onLeave); root.removeAttribute("data-og-cursor-ui"); }; }, [rootRef, bridge]); const label = state.mode !== "browse" ? "" : state.dragging ? labels.drag : state.hovered < 0 ? labels.drag : state.hovered === state.index ? labels.open : labels.view; const big = state.mode === "browse" && state.hovered >= 0 && !state.dragging; return (

{label}

); } 6f:T161f,"use client"; // OrbitGallery for UpFork (made by scripts/registry.mjs from package/src; edit the source, not this file). import { useEffect, useRef, type CSSProperties, type KeyboardEvent, type ReactNode, type RefObject } from "react"; import type { OrbitMotion, OrbitState } from "@/components/orbit-gallery-store"; import type { OrbitItem } from "@/components/orbit-gallery-types"; // ── from package/src/dom/DetailView.tsx ────────────────────────────────────────────────────────────────────────────── export type DetailLabels = { close: string; visit: string }; /** * The open project, over the card that has flown to fill the viewport. Its opacity follows the store's transition * value frame by frame, so it fades in at the end of the dolly and out at the start of the way back, wherever a * reversal happens. A modal dialog: focus moves into it, Tab stays in it, Escape closes it, and focus goes back to * the gallery after. */ export function DetailView({ item, index, total, state, motion, labels, renderDetail, onClose, returnFocus, }: { item: OrbitItem; index: number; total: number; state: OrbitState; motion: OrbitMotion; labels: DetailLabels; renderDetail?: ((item: OrbitItem, close: () => void) => ReactNode) | undefined; onClose: () => void; returnFocus: RefObject; }) { const root = useRef(null); const closeButton = useRef(null); const titleId = `og-detail-${item.id}`; const open = state.mode === "open" || state.mode === "opening"; // Opacity from the transition value, every frame while anything is moving. useEffect(() => { let frame = 0; const tick = () => { frame = requestAnimationFrame(tick); const el = root.current; if (el) el.style.setProperty("--og-detail", motion.detail.toFixed(4)); }; tick(); return () => cancelAnimationFrame(frame); }, [motion]); // Focus in on open, back to the gallery on close. useEffect(() => { if (state.mode === "open") { const target = root.current?.querySelector("[data-og-autofocus]") ?? closeButton.current ?? root.current; target?.focus({ preventScroll: true }); } }, [state.mode]); useEffect(() => { const back = returnFocus.current; const dialog = root.current; return () => { const active = document.activeElement; if (back && (active === null || active === document.body || dialog?.contains(active))) back.focus({ preventScroll: true }); }; }, [returnFocus]); const onKeyDown = (event: KeyboardEvent) => { if (event.key !== "Tab" || !root.current) return; const focusable = [...root.current.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')].filter( (el) => el.offsetParent !== null, ); if (focusable.length === 0) return; const first = focusable[0]!; const last = focusable[focusable.length - 1]!; if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); } }; return (