63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T860,"use client"; import { forwardRef } from "react"; import { contrastInk } from "./lighting"; export type PillState = "needs-size" | "ready" | "adding" | "added" | "error" | "another"; export type AddToBagPillProps = { state: PillState; labels: Record; /** The shoe's colour, and the text colour that passes contrast on it. */ color: string; ink: string; onClick: () => void; }; /** * One fixed size, whatever it says. Nothing around it moves. Its sweep is a transform only, its text swaps inside a * fixed-height mask, and its outline is an SVG stroke rather than a masked ring. */ export const AddToBagPill = forwardRef(function AddToBagPill({ state, labels, color, ink, onClick }, ref) { const busy = state === "adding"; return ( ); }); 65:T1551,"use client"; import { useEffect, useRef } from "react"; import type { BagLine, FloodlitLabels } from "./types"; export type BagDrawerProps = { open: boolean; lines: BagLine[]; labels: FloodlitLabels; formatPrice: (amount: number, currency: string) => string; onClose: () => void; onChange: (lines: BagLine[]) => void; onCheckout?: () => void; dir?: "ltr" | "rtl"; }; /** * The bag belongs to the room: dark glass at night, pale by day, never a white slab on a dark room. It slides with * an eased transform. The world behind dims and softens in the shader, not with a blur over the page. */ export function BagDrawer({ open, lines, labels, formatPrice, onClose, onChange, onCheckout, dir }: BagDrawerProps) { const panel = useRef(null); const closeButton = useRef(null); const returnTo = useRef(null); useEffect(() => { if (open) { returnTo.current = document.activeElement as HTMLElement | null; closeButton.current?.focus({ preventScroll: true }); return () => { returnTo.current?.focus?.({ preventScroll: true }); }; } return undefined; }, [open]); function trap(e: React.KeyboardEvent) { if (e.key !== "Tab" || !panel.current) return; const items = panel.current.querySelectorAll('button:not([disabled]), a[href], [tabindex="0"]'); if (!items.length) return; const first = items[0]; const last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } const currency = lines[0]?.currency ?? "USD"; const subtotal = lines.reduce((sum, l) => sum + l.price * l.qty, 0); const setQty = (key: string, qty: number) => { onChange(qty <= 0 ? lines.filter((l) => l.key !== key) : lines.map((l) => (l.key === key ? { ...l, qty } : l))); }; return (

); } 66:T1c73,// One camera for the whole room. Every shelf's view comes from this one pose, which is what makes it one place. import type { Slot, WallLayout } from "./layout"; import { SHOE_Z } from "./layout"; export type Pose = { x: number; y: number; z: number; /** Radians. Kept small: a photograph is a flat card. */ pitch: number; yaw: number; /** Lens shift in clip units: moves the picture without turning the camera, so the shoe stays head-on. */ shiftX: number; shiftY: number; }; export function focalLength(width: number): number { return Math.min(1700, Math.max(900, width * 0.9)); } /** Below this width the wall is taller than the window, and ordinary page scrolling carries the camera down it. */ export const TALL_WIDTH = 700; /** Too narrow for a panel beside the shoe, or a tablet held upright: the shoe goes above and the panel below it. */ export function isStacked(width: number, height: number): boolean { return width < TALL_WIDTH || (width < 1100 && height > width * 1.1); } /** * At rest the shoes' plane is 1:1 with CSS pixels, so a poster laid out by CSS alone lands exactly where the room * draws the same shoe. The wall behind is a little smaller, the slab's edge a little larger, as they should be. */ export function restPose(layout: WallLayout, width: number, height: number, scrollY = 0, top = 0): Pose { const f = focalLength(width); if (width < TALL_WIDTH) { return { x: width / 2, y: scrollY + height / 2, z: f + SHOE_Z, pitch: 0, yaw: 0, shiftX: 0, shiftY: 0 }; } // A short window steps back: the layout never changes by height. The host's header keeps its own strip on top. const room = Math.max(1, height - top); const stepBack = Math.max(1, layout.contentHeight / room); // The camera's eye sits level with the middle of the shelves, so the rows above it are seen from below // and the rows below it from above. A lens shift keeps the page itself where it belongs. const first = layout.slots[0]?.slab.y ?? 0; const last = layout.slots[layout.slots.length - 1]?.slab.y ?? 0; const eye = (first + last) / 2; const pageCentre = layout.contentHeight / 2; const screenEye = top + room / 2 + (eye - pageCentre) / stepBack; const shiftY = -((screenEye / height) * 2 - 1); return { x: width / 2, y: eye, z: f * stepBack + SHOE_Z, pitch: 0, yaw: 0, shiftX: 0, shiftY }; } /** The share of the view the panel keeps for itself, on the side the shoe is not. */ export const PANEL_SHARE = 0.34; /** Where the sheet starts when stacked: half the window, or only what its content needs on a tall one. */ export function sheetTop(height: number): number { return Math.max(height * 0.5, height - 440); } export type FocusFrame = { pose: Pose; /** Screen x (0..1) where the panel's calm zone begins. */ panelLeft: number; /** Screen shares where a neighbour on the panel's side starts to fade and where it is gone. */ panelFade: [number, number]; }; /** * Framing from the shoe's real size, not a fixed zoom. Large enough to fill the view, never cut off, * somewhat left of centre with room for the panel. The camera stays directly in front of the shoe and a * lens shift moves it left, so the shoe is seen head-on, whatever the window's shape. */ export function focusFrame(slot: Slot, width: number, height: number, rtl = false, top = 0): FocusFrame { const f = focalLength(width); const { card } = slot; if (isStacked(width, height)) { // The shoe in the upper part, the panel as a sheet below. Neighbours may show at the sides. // Clear of the host's header and the row with the back button, and above the walking buttons. const visible = card.h * 0.9; // The slab's thickness and its front edge count too: the buttons sit under the slab, not on it. const under = 26; const ceiling = Math.max(height * 0.1, top + 52); const floor = sheetTop(height) - 62; const scale = Math.min((width * 0.9) / card.w, Math.max(height * 0.2, floor - ceiling) / (visible + under)); const spare = Math.max(0, floor - ceiling - (visible + under) * scale); const baseY = slot.slab.y; const screenY = ceiling + spare * 0.5 + visible * scale; const z = SHOE_Z + f / scale; const y = baseY - (visible * scale * 0.5) / scale; const screenCamY = screenY - (baseY - y) * scale; return { pose: { x: card.x + card.w / 2, y, z, pitch: 0, yaw: 0, shiftX: 0, shiftY: -((screenCamY / height) * 2 - 1) }, panelLeft: 1, panelFade: [2, 3], }; } const panel = Math.min(Math.max(340, width * PANEL_SHARE), width * 0.5); const roomW = width - panel; const visibleH = card.h * 0.9; // Not so large that the neighbours leave: you never leave the room. const scale = Math.min((roomW * 0.8) / card.w, (height * 0.78) / visibleH); const z = SHOE_Z + f / scale; const centreX = card.x + card.w / 2; const baseY = slot.slab.y; const shoeH = visibleH * scale; // Baseline a little below the middle: the slab and the wall under it stay in view. const screenY = height * 0.5 + shoeH * 0.46; const screenX = (rtl ? panel + roomW / 2 : roomW / 2) + (rtl ? 1 : -1) * Math.max(0, roomW * 0.02); // The camera's height stays just above the shoe's middle, so its angle to the shoe is near zero. const y = baseY - shoeH * 0.46 / scale - 6; const shiftX = (screenX / width) * 2 - 1; const screenYofCamera = screenY - (baseY - y) * scale; const shiftY = -((screenYofCamera / height) * 2 - 1); return { pose: { x: centreX, y, z, pitch: 0, yaw: 0, shiftX, shiftY }, panelLeft: rtl ? panel / width : roomW / width, // Right after this shoe's own slab: a neighbour half faded further out reads as a smudge, not a shoe. panelFade: rtl ? [(screenX - (card.w / 2) * scale) / width - 0.012, (screenX - (card.w / 2) * scale) / width - 0.05] : [(screenX + (card.w / 2) * scale) / width + 0.012, (screenX + (card.w / 2) * scale) / width + 0.05], }; } export type Mat4 = Float32Array; export function viewProjection(pose: Pose, width: number, height: number, jitterX = 0, jitterY = 0): Mat4 { const f = focalLength(width); const cy = Math.cos(pose.yaw); const sy = Math.sin(pose.yaw); const cp = Math.cos(pose.pitch); const sp = Math.sin(pose.pitch); // Rotation: yaw about y, then pitch about x. Columns of the view rotation. const r00 = cy, r01 = 0, r02 = sy; const r10 = sp * sy, r11 = cp, r12 = -sp * cy; const r20 = -cp * sy, r21 = sp, r22 = cp * cy; const tx = -(r00 * pose.x + r01 * pose.y + r02 * pose.z); const ty = -(r10 * pose.x + r11 * pose.y + r12 * pose.z); const tz = -(r20 * pose.x + r21 * pose.y + r22 * pose.z); const fx = (2 * f) / width; const fy = (2 * f) / height; const sx = pose.shiftX + jitterX; const syy = pose.shiftY + jitterY; // clip.x = fx * vx + sx * (-vz); clip.y = -fy * vy + sy * (-vz); clip.w = -vz. World y points down. const m = new Float32Array(16); m[0] = fx * r00 - sx * r20; m[4] = fx * r01 - sx * r21; m[8] = fx * r02 - sx * r22; m[12] = fx * tx - sx * tz; m[1] = -fy * r10 - syy * r20; m[5] = -fy * r11 - syy * r21; m[9] = -fy * r12 - syy * r22; m[13] = -fy * ty - syy * tz; m[2] = 0; m[6] = 0; m[10] = 0; m[14] = 0; m[3] = -r20; m[7] = -r21; m[11] = -r22; m[15] = -tz; return m; } 67:T1773,// What the page talks to. Every call is fire and forget, so the room can live on this thread or in a worker, and the // page never needs to know which. A bundle that cannot find the worker's file, as in a single-file preview, or a browser // that cannot draw in one, gets the room on this thread instead; that code loads only then. import type { RoomAssets } from "./engine"; import type { HostEvent, HostInit, HostMethod } from "./host"; import type { WallLayout } from "./layout"; export type RoomEvents = { onReady: () => void; onFail: () => void; onLost: () => void; onRestored: () => void; onPanelClear: () => void; /** Walking back, nearly home. */ onHome: () => void; }; export type RoomInit = { assets: RoomAssets; reduced: boolean; torch: boolean; rtl: boolean; detailTop: number; day: number; small: boolean; /** False keeps the room on the page's own thread, for a host whose rules forbid workers. */ worker: boolean; }; export type RoomClient = { setLayout: (layout: WallLayout, width: number, height: number, dpr: number) => void; setTheme: (day: number) => void; hover: (index: number) => void; open: (index: number, instant?: boolean) => void; close: () => void; pointer: (x: number, y: number) => void; pointerLeft: () => void; setScroll: (y: number) => void; pulse: (index: number) => void; setBag: (open: boolean) => void; closerLook: (zoom: number, u?: number, v?: number, omega?: number) => void; preload: (index: number) => void; }; const absolute = (url: string) => new URL(url, location.href).href; /** A worker resolves a relative address against its own file, not the page. */ function absoluteAssets(assets: RoomAssets): RoomAssets { return { ...assets, shoes: assets.shoes.map((s) => ({ ...s, src: absolute(s.src), large: s.large ? absolute(s.large) : undefined, shadow: { ...s.shadow, file: s.shadow.file ? absolute(s.shadow.file) : "" } })), wall: { albedo: absolute(assets.wall.albedo), normal: absolute(assets.wall.normal), detail: absolute(assets.wall.detail) }, noise: absolute(assets.noise), }; } export function startRoom(canvas: HTMLCanvasElement, init: RoomInit, events: RoomEvents): RoomClient { const hostInit: HostInit = { ...init, assets: absoluteAssets(init.assets) }; let send: ((method: HostMethod, args: unknown[]) => void) | null = null; let waiting: [HostMethod, unknown[]][] = []; const call = (method: HostMethod, ...args: unknown[]) => { if (send) send(method, args); else waiting.push([method, args]); }; const connect = (next: (method: HostMethod, args: unknown[]) => void) => { send = next; for (const [method, args] of waiting) next(method, args); waiting = []; }; const onEvent = (event: HostEvent) => { if (event.type === "ready") events.onReady(); else if (event.type === "fail") events.onFail(); else if (event.type === "lost") events.onLost(); else if (event.type === "restored") events.onRestored(); else if (event.type === "panelClear") events.onPanelClear(); else if (event.type === "home") events.onHome(); }; const onThisThread = async () => { try { const { createHost } = await import("./host"); const host = createHost(canvas, hostInit, onEvent, "main"); connect((method, args) => host.call(method, args)); } catch { events.onFail(); } }; const canHandOver = init.worker && typeof Worker === "function" && "transferControlToOffscreen" in HTMLCanvasElement.prototype && typeof import.meta.url === "string"; if (!canHandOver) { void onThisThread(); } else { let worker: Worker | null = null; let handed = false; const giveUp = () => { clearTimeout(timer); worker?.terminate(); worker = null; void onThisThread(); }; // A worker that never answers, its file missing or blocked, counts as no worker. const timer = setTimeout(giveUp, 4000); try { worker = new Worker(new URL("./room.worker.ts", import.meta.url), { type: "module", name: "floodlit" }); worker.onerror = (e) => { e.preventDefault(); if (handed) events.onFail(); else giveUp(); }; worker.onmessage = ({ data }) => { if (data.type === "hello") { if (!data.ok) { giveUp(); return; } clearTimeout(timer); handed = true; const w = worker as Worker; const offscreen = canvas.transferControlToOffscreen(); w.postMessage({ type: "init", canvas: offscreen, init: hostInit }, [offscreen]); connect((method, args) => w.postMessage({ type: "call", method, args })); } else { onEvent(data as HostEvent); } }; } catch { giveUp(); } } const onVisibility = () => call("setVisible", document.visibilityState !== "hidden"); document.addEventListener("visibilitychange", onVisibility); onVisibility(); // Pointer moves come faster than frames, and only the latest one matters. let pointerAt: [number, number] | null = null; let pointerFrame = 0; return { setLayout: (layout, width, height, dpr) => call("setLayout", layout, width, height, dpr), setTheme: (day) => call("setTheme", day), hover: (index) => call("hover", index), open: (index, instant) => call("open", index, instant), close: () => call("close"), pointer: (x, y) => { pointerAt = [x, y]; if (pointerFrame) return; pointerFrame = requestAnimationFrame(() => { pointerFrame = 0; if (pointerAt) call("pointer", pointerAt[0], pointerAt[1]); }); }, pointerLeft: () => { pointerAt = null; call("pointerLeft"); }, setScroll: (y) => call("setScroll", y), pulse: (index) => call("pulse", index), setBag: (open) => call("setBag", open), closerLook: (zoom, u, v, omega) => call("closerLook", zoom, u, v, omega), preload: (index) => call("preload", index), }; } 68:T8362,// The room's renderer: raw WebGL2, no 3D library. It touches no DOM, so it can run in a worker on an // OffscreenCanvas. It draws only when told to. import type { Pose } from "./camera"; import { viewProjection } from "./camera"; import type { WallLayout } from "./layout"; import { SHOE_Z, SLAB } from "./layout"; import type { Lighting } from "./lighting"; import { hexToLinear } from "./lighting"; import * as shaders from "./gl/shaders"; const MAX_SHOES = 16; const SHADOW_SIZE = 256; export type RoomShoe = { id: string; aspect: number; baseline: number; ledColor: string; src: string; large?: string; shadow: { file: string; pad: number; rects: number[][] }; }; export type RoomAssets = { /** Right to left: the shoes face the other way. */ flip?: boolean; shoes: RoomShoe[]; wall: { albedo: string; normal: string; detail: string }; noise: string; }; export type ShoeState = { /** 0..1: how far the larger picture has faded in. */ largeMix?: number; level: number; exposure: number; mipBias: number; fade: number; /** 0..1: how much this shelf gives way to the panel's calm zone. */ panelAmount: number; }; export type RoomState = { lighting: Lighting; pose: Pose; shoes: ShoeState[]; /** Screen share where a neighbour starts to fade and where it is gone. It keeps the panel's zone calm. */ panelFade: [number, number]; /** Ambient and key scale: in focus the strip becomes the key. */ ambientScale: number; keyScale: number; /** Close up the wall's maps are enlarged, so their relief is kept gentle. */ reliefScale: number; /** Mip bias on the wall's colour and relief maps. */ mapBias: number; /** Close up the fine detail tile takes over from the enlarged maps. */ detailScale: number; /** The bag is open: 1 is untouched, lower is dimmer, for the whole world, in linear light. */ worldDim: number; /** World position of the torch, and its strength. Strength 0 means off. */ torch: { x: number; y: number; power: number }; }; type Program = { program: WebGLProgram; u: Record }; function compile(gl: WebGL2RenderingContext, type: number, source: string, name: string): WebGLShader { const shader = gl.createShader(type)!; gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw new Error(`${name}: ${gl.getShaderInfoLog(shader)}`); } return shader; } function link(gl: WebGL2RenderingContext, vert: string, frag: string, name: string): Program { const program = gl.createProgram()!; gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, vert, `${name}.vert`)); gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, frag, `${name}.frag`)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw new Error(`${name}: ${gl.getProgramInfoLog(program)}`); } const u: Record = {}; const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS) as number; for (let i = 0; i < count; i++) { const info = gl.getActiveUniform(program, i)!; const key = info.name.replace(/\[0\]$/, ""); const loc = gl.getUniformLocation(program, info.name); if (loc) u[key] = loc; } return { program, u }; } // A unit box. Each face has its own vertices, because each has its own normal. function boxFaces(): { data: Float32Array; ranges: Record } { const faces: Record = { front: { n: [0, 0, 1], v: [[0, 0, 1], [1, 0, 1], [1, 1, 1], [0, 1, 1]] }, top: { n: [0, -1, 0], v: [[0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1]] }, bottom: { n: [0, 1, 0], v: [[0, 1, 1], [1, 1, 1], [1, 1, 0], [0, 1, 0]] }, left: { n: [-1, 0, 0], v: [[0, 0, 0], [0, 0, 1], [0, 1, 1], [0, 1, 0]] }, right: { n: [1, 0, 0], v: [[1, 0, 1], [1, 0, 0], [1, 1, 0], [1, 1, 1]] }, }; const out: number[] = []; const ranges: Record = {}; let first = 0; for (const [name, face] of Object.entries(faces)) { const uv = [[0, 0], [1, 0], [1, 1], [0, 1]]; for (const i of [0, 1, 2, 0, 2, 3]) out.push(...face.v[i], ...face.n, ...uv[i]); ranges[name] = [first, 6]; first += 6; } return { data: new Float32Array(out), ranges }; } const HALTON_16 = Array.from({ length: 16 }, (_, i) => { const h = (n: number, b: number) => { let f = 1; let r = 0; while (n > 0) { f /= b; r += f * (n % b); n = Math.floor(n / b); } return r; }; return [h(i + 1, 2) - 0.5, h(i + 1, 3) - 0.5]; }); export type Engine = ReturnType; export function createEngine(canvas: HTMLCanvasElement | OffscreenCanvas) { const gl = canvas.getContext("webgl2", { alpha: false, antialias: false, depth: false, stencil: false, premultipliedAlpha: true, powerPreference: "high-performance", preserveDrawingBuffer: false, }) as WebGL2RenderingContext | null; if (!gl) throw new Error("no webgl2"); if (!gl.getExtension("EXT_color_buffer_float") && !gl.getExtension("EXT_color_buffer_half_float")) { throw new Error("no float render target"); } // From the prototype: after a restored context this is the same object, already wrapped once. const realDraw = WebGL2RenderingContext.prototype.drawArrays.bind(gl); gl.drawArrays = (mode: number, first: number, count: number) => { drawCalls++; totalDraws++; realDraw(mode, first, count); }; const aniso = gl.getExtension("EXT_texture_filter_anisotropic"); const maxAniso = aniso ? Math.min(8, gl.getParameter(aniso.MAX_TEXTURE_MAX_ANISOTROPY_EXT) as number) : 1; const programs = { wall: link(gl, shaders.worldVert, shaders.wallFrag, "wall"), shoe: link(gl, shaders.worldVert, shaders.shoeFrag, "shoe"), slab: link(gl, shaders.worldVert, shaders.slabFrag, "slab"), bracket: link(gl, shaders.worldVert, shaders.bracketFrag, "bracket"), present: link(gl, shaders.fullscreenVert, shaders.presentFrag, "present"), accumulate: link(gl, shaders.fullscreenVert, shaders.accumulateFrag, "accumulate"), }; const box = boxFaces(); const quad = new Float32Array([ 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1, ]); const makeVao = (data: Float32Array) => { const vao = gl.createVertexArray()!; gl.bindVertexArray(vao); const buffer = gl.createBuffer()!; gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 32, 0); gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 32, 12); gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 32, 24); return vao; }; const quadVao = makeVao(quad); const boxVao = makeVao(box.data); const emptyVao = gl.createVertexArray()!; gl.bindVertexArray(null); const textures = { albedo: gl.createTexture()!, normal: gl.createTexture()!, detail: gl.createTexture()!, noise: gl.createTexture()!, shadows: gl.createTexture()!, }; const shoeTextures: WebGLTexture[] = []; // Larger pictures, for the shoe in focus and those next to it. Decoded off to one side, uploaded a step per frame. type Large = { texture: WebGLTexture | null; bitmap: ImageBitmap | null; ready: boolean; bytes: number }; const larges = new Map(); let baseBytes = 0; let totalDraws = 0; let shoes: RoomShoe[] = []; let flip = 0; const failedShoes = new Set(); let leds: (readonly [number, number, number])[] = []; async function loadBitmap(url: string, options: ImageBitmapOptions): Promise { const response = await fetch(url); if (!response.ok) throw new Error(`${url}: ${response.status}`); return createImageBitmap(await response.blob(), options); } function dataTexture(texture: WebGLTexture, bitmap: ImageBitmap, wrap: number, mips: boolean) { gl!.bindTexture(gl!.TEXTURE_2D, texture); gl!.pixelStorei(gl!.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl!.NONE); gl!.pixelStorei(gl!.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); gl!.texImage2D(gl!.TEXTURE_2D, 0, gl!.RGBA8, gl!.RGBA, gl!.UNSIGNED_BYTE, bitmap); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_WRAP_S, wrap); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_WRAP_T, wrap); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MAG_FILTER, mips ? gl!.LINEAR : gl!.NEAREST); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MIN_FILTER, mips ? gl!.LINEAR_MIPMAP_LINEAR : gl!.NEAREST); if (mips) { gl!.generateMipmap(gl!.TEXTURE_2D); if (aniso) gl!.texParameterf(gl!.TEXTURE_2D, aniso.TEXTURE_MAX_ANISOTROPY_EXT, maxAniso); } bitmap.close(); } function shoeTexture(index: number, bitmap: ImageBitmap) { baseBytes += Math.round(bitmap.width * bitmap.height * 4 * 1.34); const texture = shoeTextures[index] ?? (shoeTextures[index] = gl!.createTexture()!); gl!.bindTexture(gl!.TEXTURE_2D, texture); gl!.pixelStorei(gl!.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl!.NONE); gl!.pixelStorei(gl!.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); gl!.texImage2D(gl!.TEXTURE_2D, 0, gl!.RGBA8, gl!.RGBA, gl!.UNSIGNED_BYTE, bitmap); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_WRAP_S, gl!.CLAMP_TO_EDGE); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_WRAP_T, gl!.CLAMP_TO_EDGE); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MAG_FILTER, gl!.LINEAR); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MIN_FILTER, gl!.LINEAR_MIPMAP_LINEAR); gl!.generateMipmap(gl!.TEXTURE_2D); if (aniso) gl!.texParameterf(gl!.TEXTURE_2D, aniso.TEXTURE_MAX_ANISOTROPY_EXT, maxAniso); bitmap.close(); } function emptyShoe(index: number) { const texture = shoeTextures[index] ?? (shoeTextures[index] = gl!.createTexture()!); gl!.bindTexture(gl!.TEXTURE_2D, texture); gl!.texImage2D(gl!.TEXTURE_2D, 0, gl!.RGBA8, 1, 1, 0, gl!.RGBA, gl!.UNSIGNED_BYTE, new Uint8Array(4)); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MIN_FILTER, gl!.LINEAR); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MAG_FILTER, gl!.LINEAR); } async function loadShadow(layer: number, shoe: RoomShoe) { const response = await fetch(shoe.shadow.file); const blob = await response.blob(); const levels = shoe.shadow.rects.length; for (let level = 0; level < levels; level++) { const [x, y, w, h] = shoe.shadow.rects[level]; const size = SHADOW_SIZE >> level; const bitmap = await createImageBitmap(blob, x, y, w, h, { resizeWidth: size, resizeHeight: size, resizeQuality: "high", premultiplyAlpha: "none", colorSpaceConversion: "none", }); gl!.bindTexture(gl!.TEXTURE_2D_ARRAY, textures.shadows); gl!.texSubImage3D(gl!.TEXTURE_2D_ARRAY, level, 0, 0, layer, size, size, 1, gl!.RGBA, gl!.UNSIGNED_BYTE, bitmap); bitmap.close(); } } async function load(assets: RoomAssets) { shoes = assets.shoes; leds = shoes.map((s) => hexToLinear(s.ledColor)); flip = assets.flip ? 1 : 0; const raw: ImageBitmapOptions = { premultiplyAlpha: "none", colorSpaceConversion: "none" }; const [albedo, normal, detail, noise] = await Promise.all([ loadBitmap(assets.wall.albedo, raw), loadBitmap(assets.wall.normal, raw), loadBitmap(assets.wall.detail, raw), loadBitmap(assets.noise, raw), ]); dataTexture(textures.albedo, albedo, gl!.MIRRORED_REPEAT, true); dataTexture(textures.normal, normal, gl!.MIRRORED_REPEAT, true); dataTexture(textures.detail, detail, gl!.REPEAT, true); dataTexture(textures.noise, noise, gl!.REPEAT, false); gl!.bindTexture(gl!.TEXTURE_2D_ARRAY, textures.shadows); gl!.texStorage3D(gl!.TEXTURE_2D_ARRAY, 5, gl!.RGBA8, SHADOW_SIZE, SHADOW_SIZE, Math.max(1, shoes.length)); gl!.texParameteri(gl!.TEXTURE_2D_ARRAY, gl!.TEXTURE_MIN_FILTER, gl!.LINEAR_MIPMAP_LINEAR); gl!.texParameteri(gl!.TEXTURE_2D_ARRAY, gl!.TEXTURE_MAG_FILTER, gl!.LINEAR); gl!.texParameteri(gl!.TEXTURE_2D_ARRAY, gl!.TEXTURE_WRAP_S, gl!.CLAMP_TO_EDGE); gl!.texParameteri(gl!.TEXTURE_2D_ARRAY, gl!.TEXTURE_WRAP_T, gl!.CLAMP_TO_EDGE); gl!.texParameteri(gl!.TEXTURE_2D_ARRAY, gl!.TEXTURE_MAX_LEVEL, 4); // One picture failing must not take the others with it: its slab and caption stay, and its link still works. await Promise.all( shoes.map(async (shoe, i) => { emptyShoe(i); try { const bitmap = await loadBitmap(shoe.src, { premultiplyAlpha: "premultiply", colorSpaceConversion: "none" }); shoeTexture(i, bitmap); await loadShadow(i, shoe); } catch { failedShoes.add(i); } }), ); } async function useLarge(index: number) { const url = shoes[index]?.large; if (!url || failedShoes.has(index)) return; try { shoeTexture(index, await loadBitmap(url, { premultiplyAlpha: "premultiply", colorSpaceConversion: "none" })); } catch { // The smaller picture stays. The walk never waits for this one. } } /** Fetch and decode a larger picture. Nothing touches the GPU yet, so this can never make a frame late. */ async function requestLarge(index: number): Promise { const url = shoes[index]?.large; if (!url || url === shoes[index].src || failedShoes.has(index) || larges.has(index)) return false; const entry: Large = { texture: null, bitmap: null, ready: false, bytes: 0 }; larges.set(index, entry); try { const bitmap = await loadBitmap(url, { premultiplyAlpha: "premultiply", colorSpaceConversion: "none" }); // Let go while it was on its way. if (larges.get(index) !== entry) { bitmap.close(); return false; } entry.bitmap = bitmap; return true; } catch { larges.delete(index); // the smaller picture stays, and the walk never waited for this one return false; } } /** One step of one upload: the picture in one frame, its smaller levels in the next. True if there was work. */ function pumpUpload(): boolean { for (const entry of larges.values()) { if (entry.ready || !entry.bitmap) continue; const g = gl!; if (!entry.texture) { const texture = g.createTexture()!; g.bindTexture(g.TEXTURE_2D, texture); const { width, height } = entry.bitmap; const levels = Math.floor(Math.log2(Math.max(width, height))) + 1; g.texStorage2D(g.TEXTURE_2D, levels, g.RGBA8, width, height); g.pixelStorei(g.UNPACK_COLORSPACE_CONVERSION_WEBGL, g.NONE); g.pixelStorei(g.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); g.texSubImage2D(g.TEXTURE_2D, 0, 0, 0, g.RGBA, g.UNSIGNED_BYTE, entry.bitmap); g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE); g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.CLAMP_TO_EDGE); g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MAG_FILTER, g.LINEAR); g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.LINEAR_MIPMAP_LINEAR); if (aniso) g.texParameterf(g.TEXTURE_2D, aniso.TEXTURE_MAX_ANISOTROPY_EXT, maxAniso); entry.texture = texture; entry.bytes = Math.round(width * height * 4 * 1.34); return true; } g.bindTexture(g.TEXTURE_2D, entry.texture); g.generateMipmap(g.TEXTURE_2D); entry.bitmap.close(); entry.bitmap = null; entry.ready = true; return true; } return false; } const largeReady = (index: number) => larges.get(index)?.ready ?? false; /** Keep only these. The rest go back to the smaller picture. */ function keepLarge(keep: (index: number) => boolean) { for (const [index, entry] of larges) { if (keep(index)) continue; entry.bitmap?.close(); if (entry.texture) gl!.deleteTexture(entry.texture); larges.delete(index); } } // Render targets, rebuilt only when the size changes. let targetW = 0; let targetH = 0; let sceneFbo: WebGLFramebuffer | null = null; let sceneTex: WebGLTexture | null = null; let msaaFbo: WebGLFramebuffer | null = null; let msaaRb: WebGLRenderbuffer | null = null; let accumFbo: WebGLFramebuffer | null = null; let accumTex: WebGLTexture | null = null; let samples = 0; let drawCalls = 0; function floatTarget(w: number, h: number): { fbo: WebGLFramebuffer; tex: WebGLTexture } { const tex = gl!.createTexture()!; gl!.bindTexture(gl!.TEXTURE_2D, tex); gl!.texStorage2D(gl!.TEXTURE_2D, 1, gl!.RGBA16F, w, h); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MIN_FILTER, gl!.NEAREST); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_MAG_FILTER, gl!.NEAREST); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_WRAP_S, gl!.CLAMP_TO_EDGE); gl!.texParameteri(gl!.TEXTURE_2D, gl!.TEXTURE_WRAP_T, gl!.CLAMP_TO_EDGE); const fbo = gl!.createFramebuffer()!; gl!.bindFramebuffer(gl!.FRAMEBUFFER, fbo); gl!.framebufferTexture2D(gl!.FRAMEBUFFER, gl!.COLOR_ATTACHMENT0, gl!.TEXTURE_2D, tex, 0); return { fbo, tex }; } function resize(w: number, h: number, wantSamples: number) { if (w === targetW && h === targetH && wantSamples === samples) return; if (sceneTex) gl!.deleteTexture(sceneTex); if (accumTex) gl!.deleteTexture(accumTex); if (sceneFbo) gl!.deleteFramebuffer(sceneFbo); if (accumFbo) gl!.deleteFramebuffer(accumFbo); if (msaaFbo) gl!.deleteFramebuffer(msaaFbo); if (msaaRb) gl!.deleteRenderbuffer(msaaRb); msaaFbo = null; msaaRb = null; canvas.width = w; canvas.height = h; const scene = floatTarget(w, h); sceneFbo = scene.fbo; sceneTex = scene.tex; const accum = floatTarget(w, h); accumFbo = accum.fbo; accumTex = accum.tex; samples = wantSamples; if (samples > 0) { msaaRb = gl!.createRenderbuffer()!; gl!.bindRenderbuffer(gl!.RENDERBUFFER, msaaRb); gl!.renderbufferStorageMultisample(gl!.RENDERBUFFER, samples, gl!.RGBA16F, w, h); msaaFbo = gl!.createFramebuffer()!; gl!.bindFramebuffer(gl!.FRAMEBUFFER, msaaFbo); gl!.framebufferRenderbuffer(gl!.FRAMEBUFFER, gl!.COLOR_ATTACHMENT0, gl!.RENDERBUFFER, msaaRb); } targetW = w; targetH = h; } function bind2D(unit: number, texture: WebGLTexture) { gl!.activeTexture(gl!.TEXTURE0 + unit); gl!.bindTexture(gl!.TEXTURE_2D, texture); } function drawScene(layout: WallLayout, cssW: number, cssH: number, state: RoomState, jx: number, jy: number) { const g = gl!; const L = state.lighting; const vp = viewProjection(state.pose, cssW, cssH, (jx * 2) / targetW, (jy * 2) / targetH); const keyPos: [number, number, number] = [cssW * L.keyXShare, layout.contentHeight * L.keyHeightShare, L.keyZ]; const keyPower = L.keyPower * state.keyScale; const ambient: [number, number, number] = [ L.ambient[0] * state.ambientScale, L.ambient[1] * state.ambientScale, L.ambient[2] * state.ambientScale, ]; const n = Math.min(layout.slots.length, MAX_SHOES); // The wall. g.disable(g.BLEND); { const p = programs.wall; g.useProgram(p.program); g.bindVertexArray(quadVao); g.uniformMatrix4fv(p.u.uViewProj, false, vp); const span = 40000; g.uniform3f(p.u.uOrigin, cssW / 2 - span / 2, layout.contentHeight / 2 - span / 2, 0); g.uniform3f(p.u.uScale, span, span, 1); bind2D(0, textures.albedo); bind2D(1, textures.normal); bind2D(2, textures.detail); g.activeTexture(g.TEXTURE3); g.bindTexture(g.TEXTURE_2D_ARRAY, textures.shadows); g.uniform1i(p.u.uAlbedo, 0); g.uniform1i(p.u.uNormal, 1); g.uniform1i(p.u.uDetail, 2); g.uniform1i(p.u.uShadows, 3); const wallSpan = 2300; g.uniform2f(p.u.uWallScale, 1 / wallSpan, 1 / wallSpan); g.uniform2f(p.u.uWallOffset, 0.07, 0.11); g.uniform1f(p.u.uDetailScale, 1 / 170); g.uniform1f(p.u.uContrast, L.contrast); g.uniform1f(p.u.uChroma, L.chroma); g.uniform1f(p.u.uMapBias, state.mapBias); g.uniform1f(p.u.uRelief, L.relief * state.reliefScale); g.uniform1f(p.u.uDetailRelief, L.detailRelief * state.detailScale); g.uniform3fv(p.u.uWallBase, L.wallBase as unknown as number[]); g.uniform3fv(p.u.uAmbient, ambient); g.uniform3fv(p.u.uKeyPos, keyPos); g.uniform3fv(p.u.uKeyColor, L.keyColor as unknown as number[]); g.uniform1f(p.u.uKeyPower, keyPower); g.uniform1f(p.u.uKeyShadow, L.keyShadow); g.uniform1f(p.u.uSlabShadow, L.slabShadow); g.uniform1f(p.u.uStripPower, L.stripPower); g.uniform1f(p.u.uShoeZ, SHOE_Z); g.uniform2f(p.u.uRoom, cssW / 2, cssW / 2); g.uniform3f(p.u.uTorchPos, state.torch.x, state.torch.y, L.torchZ); g.uniform3f(p.u.uTorchColor, 1.0, 0.96, 0.9); g.uniform1f(p.u.uTorchPower, state.torch.power); g.uniform2f(p.u.uPanelFade, state.panelFade[0], state.panelFade[1]); g.uniform2f(p.u.uViewport, targetW, targetH); g.uniform1f(p.u.uFlip, flip); g.uniform1i(p.u.uCount, n); const rects = new Float32Array(n * 4); const bases = new Float32Array(n * 3); const strips = new Float32Array(n * 4); const ledA = new Float32Array(n * 4); const slabs = new Float32Array(n * 3); for (let i = 0; i < n; i++) { const s = layout.slots[i]; const padShare = shoes[i].shadow.pad / (1 - 2 * shoes[i].shadow.pad); const pad = s.card.w * padShare; rects.set([s.card.x - pad, s.card.y - pad, s.card.x + s.card.w + pad, s.card.y + s.card.h + pad], i * 4); bases.set([s.slab.y, s.card.h, state.shoes[i]?.panelAmount ?? 0], i * 3); strips.set([s.strip.x0, s.strip.x1, s.strip.y, s.strip.z], i * 4); ledA.set([leds[i][0], leds[i][1], leds[i][2], state.shoes[i]?.level ?? 0], i * 4); slabs.set([s.slab.x0, s.slab.x1, s.slab.y], i * 3); } g.uniform4fv(p.u.uShoeRect, rects); g.uniform3fv(p.u.uShoeBase, bases); g.uniform4fv(p.u.uStrip, strips); g.uniform4fv(p.u.uLed, ledA); g.uniform3fv(p.u.uSlab, slabs); g.drawArrays(g.TRIANGLES, 0, 6); } // Each shelf, far parts first. const cam = state.pose; for (let i = 0; i < n; i++) { const slot = layout.slots[i]; const st = state.shoes[i] ?? { level: 0, exposure: L.shoeExposure, mipBias: 0, fade: 1, panelAmount: 0 }; const led = leds[i]; const min: [number, number, number] = [slot.slab.x0, slot.slab.y, SLAB.zBack]; const max: [number, number, number] = [slot.slab.x1, slot.slab.y + SLAB.thick, SLAB.zBack + SLAB.depth]; // Brackets, under the slab. g.enable(g.BLEND); g.blendFunc(g.ONE, g.ONE_MINUS_SRC_ALPHA); { const p = programs.bracket; g.useProgram(p.program); g.bindVertexArray(boxVao); g.uniformMatrix4fv(p.u.uViewProj, false, vp); g.uniform3fv(p.u.uKeyPos, keyPos); g.uniform3fv(p.u.uKeyColor, L.keyColor as unknown as number[]); g.uniform1f(p.u.uKeyPower, keyPower); g.uniform3fv(p.u.uAmbient, ambient); g.uniform3fv(p.u.uSteel, L.steel as unknown as number[]); g.uniform3fv(p.u.uLedColor, led as unknown as number[]); g.uniform1f(p.u.uLedLevel, st.level); g.uniform1f(p.u.uStripPower, L.stripPower); g.uniform3f(p.u.uStripPoint, (slot.strip.x0 + slot.strip.x1) / 2, slot.strip.y, slot.strip.z); g.uniform2f(p.u.uPanelFade, state.panelFade[0], state.panelFade[1]); g.uniform1f(p.u.uPanelAmount, st.panelAmount); g.uniform2f(p.u.uViewport, targetW, targetH); const w = slot.slab.x1 - slot.slab.x0; for (const share of [0.2, 0.8]) { g.uniform3f(p.u.uOrigin, slot.slab.x0 + w * share - 3, slot.slab.y + SLAB.thick, 0); g.uniform3f(p.u.uScale, 6, 3, 20); for (const face of ["top", "bottom", "left", "right", "front"]) { const [first, count] = box.ranges[face]; g.drawArrays(g.TRIANGLES, first, count); } } } const slabP = programs.slab; g.useProgram(slabP.program); g.bindVertexArray(boxVao); g.uniformMatrix4fv(slabP.u.uViewProj, false, vp); g.uniform3f(slabP.u.uCamera, cam.x, cam.y, cam.z); g.uniform3fv(slabP.u.uBoxMin, min); g.uniform3fv(slabP.u.uBoxMax, max); g.uniform2f(slabP.u.uStripX, slot.strip.x0, slot.strip.x1); g.uniform3fv(slabP.u.uLedColor, led as unknown as number[]); g.uniform1f(slabP.u.uLedLevel, st.level); g.uniform3fv(slabP.u.uKeyPos, keyPos); g.uniform3fv(slabP.u.uKeyColor, L.keyColor as unknown as number[]); g.uniform1f(slabP.u.uKeyPower, keyPower); g.uniform3fv(slabP.u.uAmbient, ambient); g.uniform3fv(slabP.u.uBodyTint, L.bodyTint as unknown as number[]); g.uniform1f(slabP.u.uBodyAlpha, L.bodyAlpha); g.uniform1f(slabP.u.uRimGain, L.rimGain); g.uniform1f(slabP.u.uStripGain, L.stripGain); g.uniform1f(slabP.u.uStripIdle, L.stripIdle); bind2D(0, shoeTextures[i]); g.uniform1i(slabP.u.uShoe, 0); g.uniform4f(slabP.u.uShoeRect, slot.card.x, slot.card.y, slot.card.x + slot.card.w, slot.card.y + slot.card.h); g.uniform1f(slabP.u.uShoeZ, SHOE_Z); g.uniform1f(slabP.u.uBaselineY, slot.slab.y); g.uniform2f(slabP.u.uContact, slot.contact[0], slot.contact[1]); g.uniform1f(slabP.u.uContactGain, L.contactGain); g.uniform1f(slabP.u.uReflectGain, L.reflectGain * (st.exposure / Math.max(L.shoeExposure, 0.01))); g.uniform2f(slabP.u.uPanelFade, state.panelFade[0], state.panelFade[1]); g.uniform1f(slabP.u.uPanelAmount, st.panelAmount); g.uniform1f(slabP.u.uFlip, flip); g.uniform2f(slabP.u.uViewport, targetW, targetH); const size: [number, number, number] = [max[0] - min[0], max[1] - min[1], max[2] - min[2]]; const face = (name: string, zFrom = min[2], zTo = max[2]) => { g.uniform3f(slabP.u.uOrigin, min[0], min[1], zFrom); g.uniform3f(slabP.u.uScale, size[0], size[1], zTo - zFrom); const [first, count] = box.ranges[name]; g.drawArrays(g.TRIANGLES, first, count); }; const camAbove = cam.y < slot.slab.y; const camBelowFloor = cam.y > max[1]; // Far faces of the slab, before the shoe. if (!camBelowFloor) face("bottom"); face("top", min[2], SHOE_Z); if (cam.x > min[0]) face("left"); if (cam.x < max[0]) face("right"); // The shoe. { const p = programs.shoe; g.useProgram(p.program); g.bindVertexArray(quadVao); g.uniformMatrix4fv(p.u.uViewProj, false, vp); g.uniform3f(p.u.uOrigin, slot.card.x, slot.card.y, SHOE_Z); g.uniform3f(p.u.uScale, slot.card.w, slot.card.h, 1); bind2D(0, shoeTextures[i]); g.uniform1i(p.u.uShoe, 0); const large = larges.get(i); const largeMix = large?.ready ? (st.largeMix ?? 0) : 0; if (largeMix > 0) bind2D(1, large!.texture!); g.uniform1i(p.u.uShoeLarge, 1); g.uniform1f(p.u.uLargeMix, largeMix); g.uniform1f(p.u.uMipBias, st.mipBias); g.uniform1f(p.u.uExposure, st.exposure); g.uniform3fv(p.u.uLedColor, led as unknown as number[]); g.uniform1f(p.u.uLedLevel, st.level); g.uniform1f(p.u.uSoleCatch, L.soleCatch); g.uniform1f(p.u.uBaseline, shoes[i].baseline); g.uniform2f(p.u.uPanelFade, state.panelFade[0], state.panelFade[1]); g.uniform1f(p.u.uPanelAmount, st.panelAmount); g.uniform1f(p.u.uFadeAll, st.fade); g.uniform1f(p.u.uFlip, flip); g.uniform2f(p.u.uViewport, targetW, targetH); g.drawArrays(g.TRIANGLES, 0, 6); } // Near faces of the slab, over the shoe. g.useProgram(slabP.program); g.bindVertexArray(boxVao); face("top", SHOE_Z, max[2]); if (camBelowFloor) face("bottom"); if (cam.x < min[0]) face("left"); if (cam.x > max[0]) face("right"); face("front"); void camAbove; } g.disable(g.BLEND); } function renderFrame(layout: WallLayout, cssW: number, cssH: number, state: RoomState, jx: number, jy: number) { const g = gl!; g.viewport(0, 0, targetW, targetH); if (samples > 0 && msaaFbo) { g.bindFramebuffer(g.FRAMEBUFFER, msaaFbo); drawScene(layout, cssW, cssH, state, jx, jy); g.bindFramebuffer(g.READ_FRAMEBUFFER, msaaFbo); g.bindFramebuffer(g.DRAW_FRAMEBUFFER, sceneFbo); g.blitFramebuffer(0, 0, targetW, targetH, 0, 0, targetW, targetH, g.COLOR_BUFFER_BIT, g.NEAREST); } else { g.bindFramebuffer(g.FRAMEBUFFER, sceneFbo); drawScene(layout, cssW, cssH, state, jx, jy); } } let worldDim = 1; function present(source: WebGLTexture) { const g = gl!; g.bindFramebuffer(g.FRAMEBUFFER, null); g.viewport(0, 0, targetW, targetH); g.disable(g.BLEND); const p = programs.present; g.useProgram(p.program); g.bindVertexArray(emptyVao); bind2D(0, source); bind2D(1, textures.noise); g.uniform1i(p.u.uScene, 0); g.uniform1i(p.u.uNoise, 1); g.uniform1f(p.u.uDither, 1.0); g.uniform1f(p.u.uWorldDim, worldDim); g.drawArrays(g.TRIANGLES, 0, 3); } let small = false; function samplesFor(w: number, h: number): number { const limit = gl!.getParameter(gl!.MAX_SAMPLES) as number; const pixels = w * h; // Past 5 MP the pixels themselves do the work while moving, and a still is averaged anyway. const want = small ? 2 : pixels <= 2_600_000 ? 4 : pixels <= 5_000_000 ? 2 : 0; return Math.min(limit, want); } /** * One frame of motion, or one step of a still. A still is built one jittered frame at a time across animation * frames, so it never makes a long frame. Its first frame has no jitter and is the same picture as a moving * frame, so nothing shifts at the moment the camera stops. Pass stillIndex -1 while moving. */ function frame(layout: WallLayout, cssW: number, cssH: number, dpr: number, state: RoomState, stillIndex: number) { const g = gl!; const w = Math.round(cssW * dpr); const h = Math.round(cssH * dpr); resize(w, h, samplesFor(w, h)); drawCalls = 0; worldDim = state.worldDim; if (stillIndex < 0) { renderFrame(layout, cssW, cssH, state, 0, 0); present(sceneTex!); return drawCalls; } const [jx, jy] = stillIndex === 0 ? [0, 0] : HALTON_16[(stillIndex - 1) % 16]; renderFrame(layout, cssW, cssH, state, jx, jy); g.bindFramebuffer(g.FRAMEBUFFER, accumFbo); g.viewport(0, 0, targetW, targetH); const p = programs.accumulate; g.useProgram(p.program); g.bindVertexArray(emptyVao); bind2D(0, sceneTex!); g.uniform1i(p.u.uFrame, 0); g.uniform1f(p.u.uWeight, 1 / (stillIndex + 1)); if (stillIndex === 0) { g.disable(g.BLEND); } else { g.enable(g.BLEND); g.blendFunc(g.SRC_ALPHA, g.ONE_MINUS_SRC_ALPHA); } g.drawArrays(g.TRIANGLES, 0, 3); g.disable(g.BLEND); present(accumTex!); return drawCalls; } /** One still: frames jittered below a pixel, averaged in linear light, then shown. Then nothing draws. */ function renderStill(layout: WallLayout, cssW: number, cssH: number, dpr: number, state: RoomState, frames = 16) { const g = gl!; resize(Math.round(cssW * dpr), Math.round(cssH * dpr), 0); worldDim = state.worldDim; for (let i = 0; i < frames; i++) { const [jx, jy] = HALTON_16[i % 16]; renderFrame(layout, cssW, cssH, state, jx, jy); g.bindFramebuffer(g.FRAMEBUFFER, accumFbo); g.viewport(0, 0, targetW, targetH); const p = programs.accumulate; g.useProgram(p.program); g.bindVertexArray(emptyVao); bind2D(0, sceneTex!); g.uniform1i(p.u.uFrame, 0); g.uniform1f(p.u.uWeight, 1 / (i + 1)); if (i === 0) { g.disable(g.BLEND); } else { g.enable(g.BLEND); g.blendFunc(g.SRC_ALPHA, g.ONE_MINUS_SRC_ALPHA); } g.drawArrays(g.TRIANGLES, 0, 3); } g.disable(g.BLEND); present(accumTex!); g.finish(); } function stats() { let largeBytes = 0; let largeCount = 0; for (const entry of larges.values()) { largeBytes += entry.bytes; if (entry.ready) largeCount++; } const pixels = targetW * targetH; const wall = 1024 * 1024 * 4 * 1.34 * 2 + 512 * 512 * 4 * 1.34 + SHADOW_SIZE * SHADOW_SIZE * 4 * 1.34 * Math.max(1, shoes.length); const targets = pixels * 8 * 2 + pixels * 8 * samples + pixels * 4; return { draws: totalDraws, samples, width: targetW, height: targetH, larges: largeCount, largeBytes, baseBytes, wallBytes: Math.round(wall), targetBytes: targets, textureBytes: Math.round(baseBytes + largeBytes + wall), allBytes: Math.round(baseBytes + largeBytes + wall + targets) }; } function info() { const dbg = gl!.getExtension("WEBGL_debug_renderer_info"); return { renderer: dbg ? (gl!.getParameter(dbg.UNMASKED_RENDERER_WEBGL) as string) : "unknown", maxSamples: gl!.getParameter(gl!.MAX_SAMPLES) as number, aniso: maxAniso, error: gl!.getError(), }; } return { load, useLarge, requestLarge, pumpUpload, largeReady, keepLarge, renderStill, frame, info, stats, setSmall(value: boolean) { small = value; }, }; } 69:T6a40,/* Floodlit. Plain CSS, all tokens under --fl-. Installed files load no fonts: they read the two font tokens. */ .fl-root { --fl-font-display: var(--font-floodlit-display, "Archivo Variable", "Archivo", ui-sans-serif, system-ui, sans-serif); --fl-font-text: var(--font-floodlit-text, "Archivo Variable", "Archivo", ui-sans-serif, system-ui, sans-serif); --fl-wall: #141316; --fl-ink: #f3f1ec; --fl-muted: #c8c5bf; --fl-line: rgb(243 241 236 / 0.46); --fl-tile: rgb(243 241 236 / 0.08); --fl-glass: rgb(22 21 25 / 0.94); --fl-sheet: #18171b; --fl-glass-edge: rgb(243 241 236 / 0.14); --fl-ease: cubic-bezier(0.22, 0.8, 0.24, 1); container: fl / inline-size; position: relative; width: 100%; background: var(--fl-wall); color: var(--fl-ink); font-family: var(--fl-font-text); isolation: isolate; transition: background-color 0.7s ease, color 0.7s ease; } /* The same maths as layout.ts, in CSS, so the server's markup lands exactly where the room will draw. A container cannot query itself (L-WN64), so everything hangs off .fl-body, its child. */ .fl-body { --cols: var(--n-lg); --rows: var(--rows-lg); --edge: max(16px, 4cqw); --gap: max(10px, 1.2cqw); --w: min(calc((100cqw - 2 * var(--edge) - var(--gap) * (var(--cols) - 1)) / var(--cols)), 340px); --left: calc((100cqw - (var(--w) * var(--cols) + var(--gap) * (var(--cols) - 1))) / 2); --head: max(96px, calc(var(--w) * 0.62)); --pitch: calc(var(--w) * 1.24 + 8px); --first: calc(var(--head) + var(--w) * 0.62); --H: calc(var(--first) + (var(--rows) - 1) * var(--pitch) + 8px + var(--w) * 0.34); position: relative; height: 100svh; min-height: 520px; overflow: clip; } .fl-slot { --col: var(--c-lg); --row: var(--r-lg); --off: var(--o-lg); } @container fl (max-width: 1099.98px) { .fl-body { --cols: var(--n-md); --rows: var(--rows-md); } .fl-slot { --col: var(--c-md); --row: var(--r-md); --off: var(--o-md); } } @container fl (max-width: 699.98px) { .fl-body { --cols: var(--n-sm); --rows: var(--rows-sm); height: auto; min-height: 100svh; } .fl-slot { --col: var(--c-sm); --row: var(--r-sm); --off: var(--o-sm); } } @media (scripting: none) { .fl-body { height: auto; min-height: max(var(--H), 100svh); } } .fl-stick { position: absolute; inset: 0; } @container fl (max-width: 699.98px) { .fl-stick { position: sticky; inset: auto; top: 0; height: 100svh; margin-bottom: -100svh; } } /* Above the shoes' links while a dialog is open. */ .fl-body[data-focus] .fl-stick, .fl-body[data-bag] .fl-stick { z-index: 4; } @media (prefers-color-scheme: light) { html:not(.dark) .fl-root[data-fl-theme="auto"] { --fl-wall: #dedad1; --fl-ink: #17161a; --fl-muted: #34322f; --fl-line: rgb(23 22 26 / 0.6); --fl-tile: rgb(23 22 26 / 0.07); --fl-glass: rgb(233 229 221 / 0.95); --fl-sheet: #e9e5dd; --fl-glass-edge: rgb(23 22 26 / 0.14); } } html.light .fl-root[data-fl-theme="auto"], .fl-root[data-fl-theme="day"] { --fl-wall: #dedad1; --fl-ink: #17161a; --fl-muted: #34322f; --fl-line: rgb(23 22 26 / 0.6); --fl-tile: rgb(23 22 26 / 0.07); --fl-glass: rgb(233 229 221 / 0.95); --fl-sheet: #e9e5dd; --fl-glass-edge: rgb(23 22 26 / 0.14); } .fl-root *, .fl-root *::before, .fl-root *::after { box-sizing: border-box; } .fl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.3s ease; } .fl-body[data-gl="ready"] .fl-canvas { opacity: 1; } /* The heading, the links and the captions step away as the camera walks in. */ .fl-plane { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--fl-detail-top, 0px) + (100% - var(--fl-detail-top, 0px) - var(--H)) / 2); height: var(--H); transform: scale(calc(1 / var(--fl-step, 1))); transition: opacity 0.22s ease; pointer-events: none; } .fl-body[data-focus] .fl-plane, .fl-body[data-return] .fl-plane { opacity: 0; } @container fl (max-width: 699.98px) { .fl-plane { position: relative; top: 0; margin-top: var(--fl-detail-top, 0px); transform: none; } .fl-caption { flex-direction: column; gap: 1px; } } @media (scripting: none) { .fl-plane { position: relative; top: 0; margin-top: var(--fl-detail-top, 0px); transform: none; } } .fl-heading { position: absolute; z-index: 2; inset-inline-start: max(var(--edge), var(--left)); top: calc(var(--head) * 0.1); } .fl-eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--fl-muted); } .fl-h1 { margin: 0; font-family: var(--fl-font-display); font-weight: 620; font-stretch: 112%; font-size: clamp(28px, 3.1cqw, 58px); line-height: 1.08; letter-spacing: -0.018em; } .fl-wall { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; } .fl-link { color: inherit; text-decoration: none; outline: none; } .fl-card { position: absolute; display: block; left: calc(var(--left) + (var(--col) + var(--off)) * (var(--w) + var(--gap))); top: calc(var(--first) + var(--row) * var(--pitch) - var(--w) / var(--aspect) * var(--baseline)); width: var(--w); height: calc(var(--w) / var(--aspect)); pointer-events: auto; cursor: pointer; } .fl-shelf { position: absolute; left: calc(var(--left) + (var(--col) + var(--off)) * (var(--w) + var(--gap)) + var(--w) * 0.015); top: calc(var(--first) + var(--row) * var(--pitch)); width: calc(var(--w) * 0.97); height: 8px; border-radius: 1px; background: var(--fl-tile); border: 1px solid var(--fl-line); transition: opacity 0.3s ease, box-shadow 0.18s ease; } .fl-body[data-gl="ready"] .fl-shelf { opacity: 0; } .fl-body[data-gl="none"] .fl-link:hover .fl-shelf, .fl-body[data-gl="none"] .fl-link:focus-visible .fl-shelf { background: var(--led); box-shadow: 0 8px 26px var(--led); } .fl-poster { display: block; width: 100%; height: 100%; object-fit: contain; /* With scripts off a failed picture can still only show its name, never as broken text over the wall. */ color: transparent; transition: opacity 0.3s ease; } .fl-poster[data-error] { visibility: hidden; } .fl-body[data-gl="ready"] .fl-poster { opacity: 0.001; } [dir="rtl"] .fl-poster { transform: scaleX(-1); } .fl-caption { position: absolute; /* The slab's front edge stands forward of the shoes' plane, so it lands a little further from the middle: about 12.6 px at the row's ends, at any width where the focal length follows the width. */ --p: calc((var(--col) + var(--off) + 0.5) / var(--cols) * 2 - 1); left: calc(var(--left) + (var(--col) + var(--off)) * (var(--w) + var(--gap)) + var(--w) * 0.015 + var(--p) * 12.6px + 2px); top: calc(var(--first) + var(--row) * var(--pitch) + 8px + 14px); width: calc(var(--w) * 0.97 - 4px); display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--fl-muted); font-variant-numeric: tabular-nums; pointer-events: auto; cursor: pointer; transition: color 0.18s ease; } .fl-link:hover .fl-caption, .fl-link:focus-visible .fl-caption { color: var(--fl-ink); } .fl-link:focus-visible .fl-caption { outline: 2px solid var(--fl-ink); outline-offset: 4px; border-radius: 3px; } .fl-caption-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 14px; color: var(--fl-muted); pointer-events: none; } .fl-hint-touch { display: none; } @media (scripting: none) { .fl-hint { display: none; } } @media (pointer: coarse) { .fl-hint-fine { display: none; } .fl-hint-touch { display: inline; } } /* Focus: title on one side, buying on the other. The path is clear before any of it enters. */ .fl-focus { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .fl-stage-top { position: absolute; top: calc(var(--fl-detail-top, 0px) + clamp(12px, 3vh, 28px)); inset-inline-start: max(16px, 4%); inset-inline-end: calc(var(--fl-panel-w, 34%) + 24px); pointer-events: none; } .fl-rise, .fl-back { opacity: 0.001; transform: var(--fl-from, translate3d(0, 10px, 0)); transition: opacity 0.16s ease, transform 0.16s ease; } .fl-focus[data-show] .fl-rise, .fl-focus[data-show] .fl-back { opacity: 1; transform: none; transition: opacity 0.32s ease calc(var(--i, 0) * 60ms), transform 0.42s var(--fl-ease) calc(var(--i, 0) * 60ms); } /* Walking along, the words slide in the direction of travel. */ .fl-focus[data-along] .fl-panel, .fl-focus[data-along] .fl-title { --fl-from: translate3d(calc(14px * var(--fl-travel, 1)), 0, 0); } /* When the bag opens the page steps back with the room, so nothing shows through the glass. */ .fl-focus { transition: opacity 0.32s ease; } .fl-body[data-bag] .fl-focus { opacity: 0.32; } .fl-body[data-bag] .fl-panel { opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .fl-panel { transition: opacity 0.2s ease; } .fl-back { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; margin-inline-start: -8px; border: 0; border-radius: 22px; background: transparent; color: var(--fl-ink); font: 500 15px/1 var(--fl-font-text); cursor: pointer; } .fl-back:hover { background: var(--fl-tile); } .fl-back svg, .fl-icon-button svg, .fl-stepper svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fl-title { margin: 6px 0 0; font-family: var(--fl-font-display); font-weight: 640; font-stretch: 118%; line-height: 1.02; letter-spacing: -0.02em; white-space: nowrap; } .fl-title[data-wrap] { white-space: normal; line-height: 1.08; letter-spacing: -0.01em; } .fl-title-mark { display: inline-block; width: 0.34em; height: 0.08em; margin-inline-end: 0.22em; vertical-align: 0.26em; border-radius: 9em; background: var(--fl-led); } .fl-stage-foot { position: absolute; bottom: clamp(10px, 3vh, 26px); inset-inline-start: max(16px, 4%); inset-inline-end: calc(var(--fl-panel-w, 34%) + 24px); display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: auto; } .fl-icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--fl-line); border-radius: 50%; background: transparent; color: var(--fl-ink); cursor: pointer; transition: background-color 0.15s ease; } .fl-icon-button:hover { background: var(--fl-tile); } [dir="rtl"] .fl-stage-foot .fl-icon-button svg { transform: scaleX(-1); } .fl-views { display: flex; gap: 4px; } .fl-views-gap { flex: 1; } .fl-view { min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: transparent; color: var(--fl-muted); font: 500 14px/1 var(--fl-font-text); cursor: pointer; } .fl-view[aria-pressed="true"] { color: var(--fl-ink); background: var(--fl-tile); } .fl-panel { position: absolute; top: var(--fl-detail-top, 0px); bottom: 0; inset-inline-end: 0; width: var(--fl-panel-w, 34%); padding-block: clamp(14px, 4vh, 44px) clamp(14px, 3vh, 28px); padding-inline: 28px max(16px, 3.4%, calc(var(--fl-panel-w, 34%) - 508px)); display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow-y: auto; pointer-events: auto; } .fl-series { margin: 0; font-size: 14px; font-weight: 500; color: var(--fl-muted); } .fl-price { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; font-variant-numeric: tabular-nums; } .fl-price s { font-size: 0.68em; font-weight: 500; color: var(--fl-muted); } .fl-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fl-muted); } .fl-size-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; min-height: 28px; font-size: 14px; font-weight: 600; } .fl-your-size { font-style: normal; font-weight: 500; color: var(--fl-muted); } .fl-units { display: inline-flex; gap: 2px; } .fl-units button { min-width: 36px; min-height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--fl-muted); font: 500 13px/1 var(--fl-font-text); cursor: pointer; } .fl-units button[aria-pressed="true"] { color: var(--fl-ink); background: var(--fl-tile); } .fl-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .fl-tile { position: relative; min-height: 42px; padding: 0 2px; border: 1px solid var(--fl-line); border-radius: 8px; background: var(--fl-tile); color: var(--fl-ink); font: 500 14px/1 var(--fl-font-text); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .fl-tile:hover:not([data-out]):not([data-on]) { border-color: var(--fl-ink); } /* The ring is the room's own ink: a shoe's colour may be close to the wall behind it. */ .fl-tile[data-on] { background: var(--fl-led); border-color: var(--fl-ink); box-shadow: inset 0 0 0 1px var(--fl-ink); color: var(--fl-led-ink); font-weight: 650; } .fl-tile[data-out] { color: var(--fl-muted); background: transparent; cursor: not-allowed; } .fl-tile-strike { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--fl-muted); stroke-width: 1; pointer-events: none; } .fl-tile:focus-visible, .fl-back:focus-visible, .fl-icon-button:focus-visible, .fl-view:focus-visible, .fl-units button:focus-visible, .fl-pill:focus-visible, .fl-text-button:focus-visible, .fl-checkout:focus-visible, .fl-stepper button:focus-visible, .fl-details summary:focus-visible { outline: 2px solid var(--fl-ink); outline-offset: 2px; } /* The pill. Fixed size. The sweep is a transform, and the text swaps in a fixed-height mask. */ .fl-pill { position: relative; display: block; width: 100%; height: 56px; margin-top: 8px; padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: transparent; color: var(--fl-ink); font: 600 15px/1 var(--fl-font-text); cursor: pointer; transform: translateZ(0); } /* The svg is pulled in by half the stroke, so the whole line stays inside the button at any width. */ .fl-pill-line { position: absolute; inset: 0.75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); overflow: visible; fill: none; stroke: var(--fl-line); stroke-width: 1.5; } .fl-pill-sweep { position: absolute; inset: 0; background: var(--fl-pill-fill); transform: translate3d(-104%, 0, 0); border-radius: 28px; /* A soft leading edge: no visible band. */ mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); } .fl-pill[data-state="ready"], .fl-pill[data-state="another"] { background: var(--fl-ink); color: var(--fl-wall); } .fl-pill[data-state="ready"] .fl-pill-line, .fl-pill[data-state="another"] .fl-pill-line { stroke: transparent; } /* The text must read on the shoe's colour, on what that colour sweeps over, and so on every blend between the two. */ .fl-pill[data-state="adding"] { background: var(--fl-pill-base); color: var(--fl-pill-ink); transition: background-color 0.14s linear, color 0.14s linear; } .fl-pill[data-state="adding"] .fl-pill-sweep { transform: translate3d(8%, 0, 0); transition: transform 0.56s cubic-bezier(0.3, 0.1, 0.2, 1); } .fl-pill[data-state="added"] { background: var(--fl-pill-fill); color: var(--fl-pill-ink); } .fl-pill[data-state="error"] .fl-pill-line { stroke: #e0623f; } .fl-pill-text { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; height: 56px; } .fl-pill-label { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.16s ease, transform 0.22s var(--fl-ease); } .fl-pill-label[data-show] { opacity: 1; transform: none; } .fl-pill-icon { position: absolute; inset-inline-end: 18px; top: 18px; width: 20px; height: 20px; } .fl-pill-icon svg path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fl-pill-plus { transition: opacity 0.14s ease; } .fl-pill-check { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.36s var(--fl-ease) 0.05s; } .fl-pill[data-state="added"] .fl-pill-plus, .fl-pill[data-state="adding"] .fl-pill-plus, .fl-pill[data-state="needs-size"] .fl-pill-plus, .fl-pill[data-state="error"] .fl-pill-plus { opacity: 0; } .fl-pill[data-state="added"] .fl-pill-check { stroke-dashoffset: 0; } .fl-reserved { min-height: 34px; margin: 6px 0 0; font-size: 14px; line-height: 1.4; display: flex; align-items: center; color: var(--fl-muted); } .fl-reserved[data-kind="error"] { color: var(--fl-ink); } .fl-text-button { min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--fl-ink); font: 500 14px/1 var(--fl-font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .fl-details { font-size: 14px; line-height: 1.5; color: var(--fl-muted); } .fl-details summary { min-height: 32px; display: flex; align-items: center; font-weight: 500; color: var(--fl-ink); cursor: pointer; list-style: none; } .fl-details summary::-webkit-details-marker { display: none; } .fl-details summary::after { content: "+"; margin-inline-start: 8px; color: var(--fl-muted); } .fl-details[open] summary::after { content: "\2212"; } .fl-details p { margin: 0 0 6px; } /* The bag: glass in the room, not a slab on it. */ .fl-bag { position: absolute; inset: 0; z-index: 6; visibility: hidden; transition: visibility 0s linear 0.32s; pointer-events: none; } .fl-bag[data-open] { visibility: visible; transition-delay: 0s; pointer-events: auto; } .fl-bag-backdrop { position: absolute; inset: 0; } .fl-bag-panel { position: absolute; top: var(--fl-detail-top, 0px); bottom: 0; inset-inline-end: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--fl-glass); border-inline-start: 1px solid var(--fl-glass-edge); backdrop-filter: saturate(1.2); transform: translate3d(104%, 0, 0); transition: transform 0.32s cubic-bezier(0.5, 0, 0.75, 0.3); will-change: transform; } [dir="rtl"] .fl-bag-panel { transform: translate3d(-104%, 0, 0); } .fl-bag[data-open] .fl-bag-panel { transform: none; transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.24, 1); } .fl-bag-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--fl-glass-edge); } .fl-bag-title { margin: 0; font-family: var(--fl-font-display); font-size: 22px; font-weight: 620; font-stretch: 112%; } .fl-bag-lines { flex: 1; min-height: 0; margin: 0; padding: 8px 20px; overflow-y: auto; list-style: none; } .fl-bag-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--fl-glass-edge); } .fl-bag-thumb { position: relative; display: block; align-self: start; padding-bottom: 6px; } .fl-bag-thumb::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 3px; border-radius: 2px; background: var(--fl-line-led); box-shadow: 0 2px 8px var(--fl-line-led); } .fl-bag-thumb img { display: block; width: 100%; height: auto; } .fl-bag-name { margin: 0; font-size: 15px; font-weight: 600; } .fl-bag-size { margin: 2px 0 8px; font-size: 14px; color: var(--fl-muted); } .fl-bag-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .fl-bag-price { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .fl-stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--fl-line); border-radius: 21px; } .fl-stepper button { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--fl-ink); cursor: pointer; } .fl-stepper span { min-width: 24px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; } .fl-bag-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 15px; } .fl-bag-empty p { margin: 0; } .fl-bag-foot { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--fl-glass-edge); } .fl-bag-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 15px; font-variant-numeric: tabular-nums; } .fl-bag-subtotal strong { font-size: 19px; font-weight: 650; } .fl-checkout { width: 100%; height: 52px; border: 0; border-radius: 26px; background: var(--fl-ink); color: var(--fl-wall); font: 600 15px/1 var(--fl-font-text); cursor: pointer; } .fl-bag-demo { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--fl-muted); } .fl-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* No WebGL, or a lost context: the poster wall stays, and buying still works with a plain slide-in. */ .fl-flat { position: absolute; inset-inline-start: 0; top: var(--fl-detail-top, 0px); bottom: 0; inset-inline-end: var(--fl-panel-w, 34%); container-type: size; display: grid; place-items: center; animation: fl-slide 0.32s var(--fl-ease) both; } .fl-flat-frame { position: relative; width: min(78cqw, calc(62cqh * var(--aspect))); aspect-ratio: var(--aspect); } .fl-flat img { display: block; width: 100%; height: 100%; } [dir="rtl"] .fl-flat img { transform: scaleX(-1); } .fl-flat-shelf { position: absolute; left: 1.5%; right: 1.5%; top: calc(var(--baseline) * 100%); height: 8px; border-radius: 2px; background: var(--fl-led); box-shadow: 0 10px 34px var(--fl-led); } .fl-body[data-gl="none"] .fl-plane, .fl-body[data-gl="none"] .fl-canvas { transition: none; } @keyframes fl-slide { from { opacity: 0; transform: translate3d(calc(18px * var(--fl-travel, 1)), 0, 0); } } /* Stacked, on a phone or a tablet held upright: the shoe above, the panel as a sheet below, the button held above the safe area. The sheet is solid: anything see-through here shows the next row of shoes. */ .fl-body[data-stack] .fl-stage-top { display: flex; align-items: center; gap: 4px; inset-inline: var(--edge); top: calc(var(--fl-detail-top, 0px) + 4px); } .fl-body[data-stack] .fl-back { flex: none; width: 44px; padding: 0; margin: 0; justify-content: center; } .fl-body[data-stack] .fl-back-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fl-body[data-stack] .fl-title { margin: 0; min-width: 0; } .fl-body[data-stack] .fl-stage-foot { top: calc(max(50%, 100% - 440px) - 50px); bottom: auto; inset-inline: var(--edge); gap: 6px; } .fl-body[data-stack] .fl-views { gap: 2px; min-width: 0; } .fl-body[data-stack] .fl-view { padding: 0 clamp(5px, 2cqw, 14px); } .fl-body[data-stack] .fl-panel { top: max(50%, calc(100% - 440px)); bottom: 0; width: 100%; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--fl-line) transparent; justify-content: flex-start; padding: 16px var(--edge) 0; background: var(--fl-sheet); border-top: 1px solid var(--fl-glass-edge); border-radius: 18px 18px 0 0; transition: opacity 0.3s ease, transform 0.42s var(--fl-ease); } /* The sheet comes up with what is on it: an empty dark block must never wait under a camera that is still walking. Walking along, it stays, and only its words change. */ .fl-body[data-stack] .fl-focus:not([data-show]):not([data-along]) .fl-panel { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.16s ease, transform 0.16s ease; } .fl-body[data-stack] .fl-buy { position: sticky; bottom: 0; margin-top: auto; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fl-sheet) 14px); order: 9; } .fl-body[data-stack] .fl-reserved { min-height: 24px; } .fl-body[data-stack] .fl-flat { inset: calc(var(--fl-detail-top, 0px) + 48px) 0 auto; height: calc(max(50%, 100% - 440px) - var(--fl-detail-top, 0px) - 100px); } /* A short phone keeps what buying needs on one sheet. */ @media (max-height: 700px) { .fl-body[data-stack] .fl-desc { display: none; } .fl-body[data-stack] .fl-panel { gap: 6px; padding-top: 10px; } .fl-body[data-stack] .fl-tile { min-height: 40px; } .fl-body[data-stack] .fl-pill { margin-top: 2px; } .fl-body[data-stack] .fl-reserved { min-height: 18px; margin-top: 2px; } } /* In focus the room's gestures are its own: a drag down steps back, sideways walks along. Left to the browser, a drag down on a page that cannot scroll is a pull-to-refresh, and a swipe may end in a touchcancel. */ .fl-body[data-focus] .fl-canvas { touch-action: none; } @container fl (max-width: 699.98px) { .fl-body:not([data-focus]) .fl-canvas { touch-action: pan-y; } .fl-bag-panel { width: 100%; } .fl-plane { margin-bottom: 52px; } .fl-hint { top: 100%; bottom: auto; padding-top: 22px; } } /* Reduced motion: nothing travels. Things simply appear or fade. */ @media (prefers-reduced-motion: reduce) { .fl-rise, .fl-back { transform: none; } .fl-focus[data-show] .fl-rise, .fl-focus[data-show] .fl-back { transition: opacity 0.16s linear; } .fl-body[data-stack] .fl-panel, .fl-body[data-stack] .fl-focus:not([data-show]):not([data-along]) .fl-panel { transform: none; transition: opacity 0.16s linear; } .fl-flat { animation: none; } .fl-bag-panel, [dir="rtl"] .fl-bag-panel { transform: none; opacity: 0; transition: opacity 0.18s linear; } .fl-bag[data-open] .fl-bag-panel { opacity: 1; transition: opacity 0.18s linear; } .fl-pill-sweep { display: none; } .fl-pill[data-state="adding"] { background: var(--fl-pill-fill); } .fl-pill-check, .fl-pill-label { transition: none; } } /* At full width there is no room left to see through the bag: solid, or the view under it shows as a ghost. */ .fl-body[data-stack] .fl-bag-panel { background: var(--fl-sheet); border-inline-start: 0; } @container fl (max-width: 699.98px) { .fl-bag-panel { background: var(--fl-sheet); border-inline-start: 0; } } 6a:T9b82,"use client"; import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import { AddToBagPill, type PillState } from "./add-to-bag-pill"; import { BagDrawer } from "./bag-drawer"; import { focalLength, focusFrame, isStacked, TALL_WIDTH } from "./camera"; import { startRoom, type RoomClient } from "./client"; import { columnsFor, layoutWall, SHOE_Z, type WallLayout } from "./layout"; import { contrastInk } from "./lighting"; import { sizeLabel, SizeTiles, type SizeUnit } from "./size-tiles"; import type { BagLine, FloodlitLabels, FloodlitProps, Shoe, ShoeSize } from "./types"; import "./floodlit.css"; const WARM = "#FFB27A"; const DEFAULT_LABELS: FloodlitLabels = { room: "The shoe wall", backToWall: "Back to the wall", hint: "Point at a shelf to light it. Click to walk up.", hintTouch: "Tap a pair to walk up.", chooseSize: "Choose your size", addToBag: "Add to bag", adding: "Adding", inBag: "In your bag", addAnother: "Add another", couldNotAdd: "Couldn't add. Try again", viewBag: "View bag", size: "Size", soldOut: "sold out", onlyLeft: (n) => `Only ${n} left`, yourSize: "Your size", chooseSizeFirst: "Choose a size first.", materialsAndFit: "Materials and fit", previous: "Previous pair", next: "Next pair", nowViewing: (name) => `Now viewing ${name}`, addedLive: (name) => `${name} is in your bag`, zoomIn: "Look closer", zoomOut: "Step back from the shoe", yourBag: "Your bag", bagEmpty: "Your bag is empty.", backToRoom: "Back to the room", subtotal: "Subtotal", checkout: "Checkout", remove: "Remove", closeBag: "Close the bag", increase: "One more", decrease: "One less", demoLine: null, }; const defaultFormat = (() => { const cache = new Map(); return (amount: number, currency: string) => { let f = cache.get(currency); if (!f) { f = new Intl.NumberFormat(undefined, { style: "currency", currency, maximumFractionDigits: amount % 1 ? 2 : 0 }); cache.set(currency, f); } return f.format(amount); }; })(); /** Where a shoe goes at each breakpoint, as CSS variables, so the server's markup places it with no script at all. */ function slotVars(index: number, count: number, rtl: boolean): Record { const out: Record = {}; const at: [string, number][] = [["lg", 1100], ["md", 700], ["sm", 320]]; for (const [name, width] of at) { const cols = columnsFor(width, count); const rows = Math.ceil(count / cols); const row = Math.floor(index / cols); const inRow = row === rows - 1 ? count - cols * (rows - 1) : cols; const col = index - row * cols; out[`--c-${name}`] = rtl ? inRow - 1 - col : col; out[`--r-${name}`] = row; out[`--o-${name}`] = (cols - inRow) / 2; } return out; } /** A shelf's rectangle on screen, through the framing of the shoe in focus. */ function rectThrough(layout: WallLayout, focusIndex: number, index: number, W: number, H: number, rtl: boolean, top: number) { const frame = focusFrame(layout.slots[focusIndex], W, H, rtl, top); const k = focalLength(W) / (frame.pose.z - SHOE_Z); const slot = layout.slots[index]; const sx = (x: number) => W / 2 + (x - frame.pose.x) * k + (frame.pose.shiftX * W) / 2; const sy = (y: number) => H / 2 + (y - frame.pose.y) * k - (frame.pose.shiftY * H) / 2; return { x0: sx(slot.card.x), y0: sy(slot.card.y), x1: sx(slot.card.x + slot.card.w), y1: sy(slot.slab.y + 18), panelLeft: frame.panelLeft * W }; } /** Calls `then` after `ms` of the page being visible: hidden, the clock stops and starts again on return. */ function whileVisible(ms: number, then: () => void): () => void { let timer: ReturnType | undefined; const arm = () => { clearTimeout(timer); if (document.visibilityState !== "hidden") timer = setTimeout(then, ms); }; arm(); document.addEventListener("visibilitychange", arm); return () => { clearTimeout(timer); document.removeEventListener("visibilitychange", arm); }; } function hostIsDark(): boolean { const html = document.documentElement.classList; if (html.contains("dark")) return true; if (html.contains("light")) return false; return window.matchMedia("(prefers-color-scheme: dark)").matches; } export function Floodlit(props: FloodlitProps) { const { shoes, wall, theme = "dark", ledMode = "shoe", ledColor, syncUrl, heading, eyebrow, detailTop = 0, onOpenChange, onAddToBag, onCheckout, dir = "ltr", className } = props; const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...props.labels }), [props.labels]); const formatPrice = props.formatPrice ?? defaultFormat; const urlParam = typeof syncUrl === "object" ? syncUrl.param : "shoe"; const rtl = dir === "rtl"; const bodyRef = useRef(null); const stickRef = useRef(null); const planeRef = useRef(null); const canvasRef = useRef(null); const focusRef = useRef(null); const roomRef = useRef(null); const linkRefs = useRef<(HTMLAnchorElement | null)[]>([]); const tilesRef = useRef(null); const titleRef = useRef(null); const firstInPanel = useRef(null); const addToken = useRef(0); const addedTimer = useRef | null>(null); const addingNow = useRef(false); const returnFocusTo = useRef(-1); const touchStart = useRef<{ x: number; y: number; t: number } | null>(null); const reducedRef = useRef(false); const [size, setSize] = useState({ w: 0, h: 0 }); const [gl, setGl] = useState<"waiting" | "ready" | "none">("waiting"); const [focusIndex, setFocusIndex] = useState(-1); const [panelShown, setPanelShown] = useState(false); // Walking back to the wall: its words wait until the camera is nearly home, or they float over the wrong shoes. const [returning, setReturning] = useState(false); const [travel, setTravel] = useState(1); const [along, setAlong] = useState(false); const [unit, setUnit] = useState("eu"); const [remembered, setRemembered] = useState(null); const [chosen, setChosen] = useState(null); const [pill, setPill] = useState("needs-size"); const [reserved, setReserved] = useState<{ kind: "none" | "hint" | "added" | "error" | "stock"; text?: string }>({ kind: "none" }); const [tilePulse, setTilePulse] = useState(0); const [live, setLive] = useState(""); const [zoomed, setZoomed] = useState(false); const [view, setView] = useState(0); const [bagInternal, setBagInternal] = useState([]); const [bagOpenInternal, setBagOpenInternal] = useState(false); const [titleSize, setTitleSize] = useState(56); const [titleWrap, setTitleWrap] = useState(false); const [isDark, setIsDark] = useState(theme === "auto" ? null : theme === "dark"); const bag = props.bag ?? bagInternal; const bagOpen = props.bagOpen ?? bagOpenInternal; const onBagChange = props.onBagChange; const onBagOpenChange = props.onBagOpenChange; const setBag = useCallback( (lines: BagLine[]) => { setBagInternal(lines); onBagChange?.(lines); }, [onBagChange], ); const setBagOpen = useCallback( (open: boolean) => { setBagOpenInternal(open); onBagOpenChange?.(open); }, [onBagOpenChange], ); const shapes = useMemo(() => shoes.map((s) => ({ aspect: s.photo.width / s.photo.height, baseline: s.photo.baseline, contact: s.photo.contact })), [shoes]); const colours = useMemo(() => shoes.map((s) => (ledMode === "brand" && ledColor ? ledColor : s.ledColor ?? WARM)), [shoes, ledMode, ledColor]); const layout = useMemo(() => (size.w ? layoutWall(size.w, shapes, rtl) : null), [size.w, shapes, rtl]); const tall = size.w > 0 && size.w < TALL_WIDTH; const stacked = size.w > 0 && isStacked(size.w, size.h); const focused: Shoe | null = focusIndex >= 0 ? shoes[focusIndex] : null; const focusedColour = focusIndex >= 0 ? colours[focusIndex] : WARM; const focusedInk = focused?.ledInk && ledMode === "shoe" ? focused.ledInk : contrastInk(focusedColour); const box = useMemo(() => (layout && focusIndex >= 0 && size.h ? rectThrough(layout, focusIndex, focusIndex, size.w, size.h, rtl, detailTop) : null), [layout, focusIndex, size.w, size.h, rtl, detailTop]); const stepBack = useMemo(() => { if (!layout || !size.h || tall) return 1; return Math.max(1, layout.contentHeight / Math.max(1, size.h - detailTop)); }, [layout, size.h, tall, detailTop]); // Size from the component's own box, never the window. The stage is the window's height on a phone. useLayoutEffect(() => { const el = stickRef.current; if (!el) return; const measure = () => { const rect = el.getBoundingClientRect(); const w = Math.round(rect.width); const h = Math.round(rect.height); setSize((s) => (s.w === w && s.h === h ? s : { w, h })); }; measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, []); // A picture that failed before the page woke up never fired React's onError (L-KBV5). useEffect(() => { bodyRef.current?.querySelectorAll(".fl-poster").forEach((img) => { if (img.complete && img.naturalWidth === 0) img.dataset.error = ""; }); }, []); // Theme: fixed, or following the host's `dark` or `light` class, then the system. useLayoutEffect(() => { if (theme !== "auto") { setIsDark(theme === "dark"); return; } const read = () => setIsDark(hostIsDark()); read(); const observer = new MutationObserver(read); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const system = window.matchMedia("(prefers-color-scheme: dark)"); system.addEventListener("change", read); return () => { observer.disconnect(); system.removeEventListener("change", read); }; }, [theme]); useEffect(() => { if (isDark !== null) roomRef.current?.setTheme(isDark ? 0 : 1); }, [isDark]); // The room. One per canvas. Cleanup keeps the context, so StrictMode's second run finds it alive. If the context // is lost the poster wall comes back and the whole buying path still works; the room restarts when it can. const started = useRef(false); useEffect(() => { const canvas = canvasRef.current; if (!canvas || started.current) return; started.current = true; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; reducedRef.current = reduced; // A phone reads the picture its poster already fetched, so nothing downloads twice. const small = canvas.getBoundingClientRect().width < TALL_WIDTH; const posters = bodyRef.current?.querySelectorAll(".fl-poster"); roomRef.current = startRoom(canvas, { reduced, rtl, detailTop, small, worker: props.worker ?? true, torch: window.matchMedia("(pointer: fine)").matches, day: (theme === "auto" ? hostIsDark() : theme === "dark") ? 0 : 1, assets: { flip: rtl, shoes: shoes.map((s, i) => ({ id: s.id, aspect: s.photo.width / s.photo.height, baseline: s.photo.baseline, ledColor: colours[i], src: posters?.[i]?.currentSrc || s.photo.src, large: small ? s.photo.src : s.photo.large, shadow: s.photo.shadow ?? { file: "", pad: 0.22, rects: [] }, })), wall: { albedo: wall?.albedo ?? "https://upfork.dev/assets/dcc8156cb8d98aac649da7e917d431a4/wall/painted-plaster-albedo.webp", normal: wall?.normal ?? "https://upfork.dev/assets/dcc8156cb8d98aac649da7e917d431a4/wall/painted-plaster-normal.webp", detail: wall?.detail ?? "https://upfork.dev/assets/dcc8156cb8d98aac649da7e917d431a4/wall/painted-plaster-detail.webp" }, noise: wall?.noise ?? "https://upfork.dev/assets/dcc8156cb8d98aac649da7e917d431a4/wall/blue-noise.png", }, }, { onReady: () => setGl("ready"), onFail: () => { roomRef.current = null; setPanelShown(true); setGl("none"); }, onLost: () => { setPanelShown(true); setGl("none"); }, onRestored: () => setGl("ready"), onPanelClear: () => setPanelShown(true), onHome: () => setReturning(false), }); // Shoes and colours are read once: a new set of shoes means a new canvas, by key. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { if (!layout) return; roomRef.current?.setLayout(layout, size.w, size.h, Math.min(2, window.devicePixelRatio || 1)); }, [layout, gl, size.w, size.h]); // On a phone the wall is taller than the window. The page scrolls as usual, and the camera follows it: the // distance between the sticky stage and the shoes' plane is exactly how far down the wall we are. useEffect(() => { if (!tall) return; const onScroll = () => { const stage = stickRef.current?.getBoundingClientRect().top ?? 0; const plane = planeRef.current?.getBoundingClientRect().top ?? 0; roomRef.current?.setScroll(stage - plane); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [tall, gl, size.h]); // While a shoe is open on a phone, the page behind stays still. Where the page has a classic scrollbar (a computer, // or the site's preview at phone width on one), locking it would take the scrollbar away and make the page wider: // the room would lay out again in mid-walk. So its gutter stays. useEffect(() => { if (!tall || focusIndex < 0) return; const html = document.documentElement; const before = { overflow: html.style.overflow, gutter: html.style.scrollbarGutter, overscroll: html.style.overscrollBehavior }; const bar = window.innerWidth - html.clientWidth; html.style.overflow = "hidden"; // A drag down steps back here; on a page that cannot scroll it would otherwise be a pull-to-refresh. html.style.overscrollBehavior = "none"; if (bar > 0) html.style.scrollbarGutter = "stable"; return () => { html.style.overflow = before.overflow; html.style.scrollbarGutter = before.gutter; html.style.overscrollBehavior = before.overscroll; }; }, [tall, focusIndex]); // The room says when the panel may come in. If that word never comes (a room that stopped, frames that never // arrive), the panel comes in anyway: a view with nothing to press is worse than a panel over a shoe still settling. // It counts only while the page is visible: in a hidden tab the walk is paused, not lost. useEffect(() => { if (focusIndex < 0 || panelShown) return; return whileVisible(1800, () => setPanelShown(true)); }, [focusIndex, panelShown]); // The same for the wall's words on the way back. useEffect(() => { if (!returning) return; return whileVisible(1500, () => setReturning(false)); }, [returning]); const resetBuying = useCallback( (shoe: Shoe) => { if (addedTimer.current) clearTimeout(addedTimer.current); addToken.current++; addingNow.current = false; const carry = remembered && shoe.sizes.find((s) => s.eu === remembered && s.stock > 0) ? remembered : null; setChosen(carry); setPill(carry ? "ready" : "needs-size"); const low = carry ? shoe.sizes.find((s) => s.eu === carry) : null; setReserved(low && low.stock <= 3 ? { kind: "stock", text: labels.onlyLeft(low.stock) } : { kind: "none" }); setZoomed(false); setView(0); }, [remembered, labels], ); const writeUrl = useCallback( (slug: string | null) => { if (!syncUrl) return; const url = new URL(window.location.href); if (slug) url.searchParams.set(urlParam, slug); else url.searchParams.delete(urlParam); window.history.pushState({ floodlit: slug }, "", url); }, [syncUrl, urlParam], ); /** With reduced motion, moving between states is a crossfade of the whole room. */ const crossfade = useCallback(() => { if (reducedRef.current) canvasRef.current?.animate([{ opacity: 0.2 }, { opacity: 1 }], { duration: 240, easing: "ease-out" }); }, []); const openShoe = useCallback( (i: number, instant = false, fromHistory = false) => { const room = roomRef.current; const shoe = shoes[i]; if (!shoe) return; room?.preload(i); const previous = focusIndex; setAlong(previous >= 0); if (previous >= 0) { const n = shoes.length; const forward = (i - previous + n) % n <= n / 2; setTravel(forward ? 1 : -1); } crossfade(); // A section lower on the page comes fully into view first. if (!instant && previous < 0 && window.innerWidth >= TALL_WIDTH) { bodyRef.current?.scrollIntoView({ block: "nearest", behavior: reducedRef.current ? "auto" : "smooth" }); } setFocusIndex(i); // With no room, or no walking, there is nothing to wait for. setPanelShown(instant || !room || gl === "none"); resetBuying(shoe); setLive(labels.nowViewing(shoe.name)); room?.open(i, instant); if (!fromHistory) writeUrl(shoe.slug); onOpenChange?.(shoe.slug); }, [shoes, focusIndex, resetBuying, labels, writeUrl, onOpenChange, crossfade, gl], ); const closeShoe = useCallback( (fromHistory = false) => { const i = focusIndex; if (i < 0) return; crossfade(); setPanelShown(false); setFocusIndex(-1); setReturning(Boolean(roomRef.current) && gl === "ready" && !reducedRef.current); roomRef.current?.close(); if (!fromHistory) writeUrl(null); onOpenChange?.(null); // Focus returns to the shoe that was open, once the wall is no longer inert. returnFocusTo.current = i; }, [focusIndex, writeUrl, onOpenChange, crossfade, gl], ); // A deep link, or a reload: open straight in focus, with no walk. Read after mount, so server markup stays stable. const deepLinked = useRef(false); useEffect(() => { if (deepLinked.current || gl === "waiting" || !layout) return; deepLinked.current = true; const slug = (syncUrl ? new URLSearchParams(window.location.search).get(urlParam) : null) ?? props.openSlug ?? props.defaultOpenSlug ?? null; if (!slug) return; const i = shoes.findIndex((s) => s.slug === slug); if (i >= 0) openShoe(i, true, true); // eslint-disable-next-line react-hooks/exhaustive-deps }, [gl, layout]); // A controlled openSlug. useEffect(() => { if (props.openSlug === undefined || !deepLinked.current) return; const want = props.openSlug === null ? -1 : shoes.findIndex((s) => s.slug === props.openSlug); if (want !== focusIndex) { if (want < 0) closeShoe(true); else openShoe(want, false, true); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.openSlug]); // Browser back and forward. Our own state follows popstate: useSearchParams does not see replaceState (L-ZPDX). useEffect(() => { if (!syncUrl) return; const onPop = () => { const slug = new URLSearchParams(window.location.search).get(urlParam); if (!slug) closeShoe(true); else { const i = shoes.findIndex((s) => s.slug === slug); if (i >= 0 && i !== focusIndex) openShoe(i, false, true); } }; window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, [syncUrl, urlParam, shoes, focusIndex, closeShoe, openShoe]); useEffect(() => { if (focusIndex < 0 && returnFocusTo.current >= 0) { linkRefs.current[returnFocusTo.current]?.focus({ preventScroll: true }); returnFocusTo.current = -1; } }, [focusIndex]); useEffect(() => { roomRef.current?.setBag(bagOpen); }, [bagOpen, gl]); const walk = useCallback( (forward: boolean) => { const n = shoes.length; openShoe((focusIndex + (forward ? 1 : -1) + n) % n); }, [shoes.length, focusIndex, openShoe], ); // Esc order: zoom, then bag, then focus. Arrows walk along, mirrored right to left. Tab stays in the dialog. useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") { if (zoomed) { setZoomed(false); roomRef.current?.closerLook(1); } else if (bagOpen) { setBagOpen(false); } else if (focusIndex >= 0) { closeShoe(); } else { return; } e.preventDefault(); return; } if (focusIndex < 0 || bagOpen) return; if (e.key === "Tab") { const items = Array.from(focusRef.current?.querySelectorAll('button:not([disabled]):not([tabindex="-1"]), a[href], summary') ?? []); if (!items.length) return; const active = document.activeElement as HTMLElement | null; const at = active ? items.indexOf(active) : -1; if (at < 0 || (e.shiftKey && at === 0) || (!e.shiftKey && at === items.length - 1)) { e.preventDefault(); items[e.shiftKey ? items.length - 1 : 0].focus(); } return; } const target = e.target as HTMLElement | null; if (target?.closest?.('[role="radiogroup"]')) return; if (e.key === "ArrowRight" || e.key === "ArrowLeft") { e.preventDefault(); walk((e.key === "ArrowRight") !== rtl); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [zoomed, bagOpen, focusIndex, rtl, closeShoe, walk, setBagOpen]); // The pointer on the room itself: the torch, the look-around, a neighbour, bare wall, and the zoom. const maxZoom = focused?.photo.maxZoom ?? 1.8; const local = (e: { clientX: number; clientY: number }) => { const rect = canvasRef.current?.getBoundingClientRect(); return rect ? [e.clientX - rect.left, e.clientY - rect.top] : [0, 0]; }; const onPointerMove = (e: React.PointerEvent) => { if (e.pointerType === "touch") return; const room = roomRef.current; if (!room) return; const [x, y] = local(e); room.pointer(x, y); if (focusIndex >= 0 && box && canvasRef.current) { const inside = x > box.x0 && x < box.x1 && y > box.y0 && y < box.y1; canvasRef.current.style.cursor = inside && maxZoom > 1.02 ? (zoomed ? "zoom-out" : "zoom-in") : "default"; if (zoomed) room.closerLook(maxZoom, (x - box.x0) / (box.x1 - box.x0), (y - box.y0) / (box.y1 - box.y0), 8); } }; const onCanvasClick = (e: React.MouseEvent) => { const room = roomRef.current; if (!room || focusIndex < 0 || !layout) return; const [x, y] = local(e); if (box && x > box.x0 && x < box.x1 && y > box.y0 && y < box.y1) { if (maxZoom <= 1.02) return; if (zoomed) { setZoomed(false); room.closerLook(1); } else { setZoomed(true); room.closerLook(maxZoom, (x - box.x0) / (box.x1 - box.x0), (y - box.y0) / (box.y1 - box.y0), 8); } return; } const clearOfPanel = stacked || !box || (rtl ? x > box.panelLeft : x < box.panelLeft); if (clearOfPanel) { for (let i = 0; i < shoes.length; i++) { if (i === focusIndex) continue; const r = rectThrough(layout, focusIndex, i, size.w, size.h, rtl, detailTop); if (x > r.x0 && x < r.x1 && y > r.y0 && y < r.y1) { openShoe(i); return; } } } closeShoe(); }; // On touch: swipe sideways to walk along, swipe down to step back. The panel and the bag keep their own scrolling. const onTouchStart = (e: React.TouchEvent) => { const target = e.target as HTMLElement; if (target.closest?.(".fl-panel, .fl-bag")) { touchStart.current = null; return; } const t = e.touches[0]; // The events' own clocks: a busy thread runs these handlers late, but the finger's timing is in timeStamp. touchStart.current = { x: t.clientX, y: t.clientY, t: e.timeStamp }; }; const onTouchEnd = (e: React.TouchEvent) => { const from = touchStart.current; touchStart.current = null; if (!from || focusIndex < 0) return; const t = e.changedTouches[0]; const dx = t.clientX - from.x; const dy = t.clientY - from.y; if (e.timeStamp - from.t > 700) return; if (Math.abs(dx) > 48 && Math.abs(dx) > Math.abs(dy) * 1.4) walk(dx < 0 !== rtl); else if (dy > 70 && dy > Math.abs(dx) * 1.4) closeShoe(); }; // Buying. const chooseSize = (eu: string) => { if (!focused) return; const s = focused.sizes.find((z) => z.eu === eu); if (!s || s.stock <= 0) return; if (addedTimer.current) clearTimeout(addedTimer.current); addToken.current++; addingNow.current = false; setChosen(eu); setRemembered(eu); setPill("ready"); setReserved(s.stock <= 3 ? { kind: "stock", text: labels.onlyLeft(s.stock) } : { kind: "none" }); }; const add = async () => { if (!focused) return; if (pill === "needs-size") { setTilePulse((n) => n + 1); setReserved({ kind: "hint", text: labels.chooseSizeFirst }); roomRef.current?.pulse(focusIndex); tilesRef.current?.querySelector('[tabindex="0"]')?.focus(); return; } // Two clicks in one frame reach here before the state has changed: only the first counts. if (addingNow.current) return; addingNow.current = true; const size = focused.sizes.find((s) => s.eu === chosen) as ShoeSize; const token = ++addToken.current; setPill("adding"); setReserved({ kind: "none" }); const began = performance.now(); let problem: string | null = null; try { await onAddToBag?.(focused, size); } catch (error) { problem = error instanceof Error && error.message ? error.message : labels.couldNotAdd; } const left = 500 - (performance.now() - began); if (left > 0) await new Promise((r) => setTimeout(r, left)); addingNow.current = false; if (token !== addToken.current) return; if (problem) { setPill("error"); setReserved({ kind: "error", text: problem }); return; } const key = `${focused.id}:${size.eu}`; const existing = bag.find((l) => l.key === key); const label = `${labels.size} ${unit.toUpperCase()} ${sizeLabel(size, unit)}`; setBag( existing ? bag.map((l) => (l.key === key ? { ...l, qty: l.qty + 1 } : l)) : [...bag, { key, shoeId: focused.id, name: focused.name, image: focused.photo.src, sizeLabel: label, eu: size.eu, variantId: size.variantId, price: focused.price, currency: focused.currency, ledColor: focusedColour, qty: 1 }], ); setPill("added"); setReserved({ kind: "added" }); setLive(labels.addedLive(focused.name)); roomRef.current?.pulse(focusIndex); addedTimer.current = setTimeout(() => setPill("another"), 2400); }; // The title fits by rule: it never overlaps the shoe and is never cut off. useLayoutEffect(() => { const el = titleRef.current; if (!el || !box || !focused) return; const margin = Math.max(16, size.w * 0.04); const roomW = rtl ? size.w - box.panelLeft : box.panelLeft; const forWidth = stacked ? size.w - margin * 2 - 48 : Math.max(180, roomW - margin - 24); // From below the back button to just above the top of the shoe's picture. A text line's box is about 1.1 em. const titleTop = detailTop + Math.min(28, Math.max(12, window.innerHeight * 0.03)) + 50; const forHeight = stacked ? 36 : Math.max(36, (box.y0 + (box.y1 - box.y0) * 0.06 - titleTop - 6) / 1.1); el.style.fontSize = "100px"; el.style.whiteSpace = "nowrap"; const width = el.scrollWidth; el.style.fontSize = ""; el.style.whiteSpace = ""; const oneLine = Math.min(84, (100 * forWidth) / Math.max(1, width), forHeight); // A name too long for one line at a readable size wraps instead of being cut. setTitleWrap(oneLine < 18); setTitleSize(Math.max(18, oneLine)); }, [focused, box, size.w, detailTop, stacked, rtl]); useEffect(() => { if (panelShown) firstInPanel.current?.focus({ preventScroll: true }); // Only when the panel appears. // eslint-disable-next-line react-hooks/exhaustive-deps }, [panelShown]); const pillLabels: Record = { "needs-size": labels.chooseSize, ready: labels.addToBag, adding: labels.adding, added: labels.inBag, error: labels.couldNotAdd, another: labels.addAnother, }; const panelWidth = box && !stacked ? (rtl ? box.panelLeft : size.w - box.panelLeft) : 0; const count = shoes.length; const bodyStyle = { "--fl-detail-top": `${detailTop}px`, "--fl-led": focusedColour, "--fl-led-ink": focusedInk, "--fl-panel-w": panelWidth ? `${panelWidth}px` : undefined, "--n-lg": columnsFor(1100, count), "--n-md": columnsFor(700, count), "--n-sm": columnsFor(320, count), "--rows-lg": Math.ceil(count / columnsFor(1100, count)), "--rows-md": Math.ceil(count / columnsFor(700, count)), "--rows-sm": Math.ceil(count / columnsFor(320, count)), "--fl-step": stepBack, } as React.CSSProperties; const flat = gl === "none"; const themeName = isDark === null ? "auto" : isDark ? "night" : "day"; return (

= 0 || undefined} data-bag={bagOpen || undefined} data-return={(returning && focusIndex < 0) || undefined} data-gl={gl} style={bodyStyle} onPointerMove={onPointerMove} onPointerLeave={() => roomRef.current?.pointerLeft()} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>

= 0 || bagOpen || undefined}>

{eyebrow ?

{eyebrow}

: null} {heading ?

{heading}

: null}

{ linkRefs.current[i] = el; }} href={shoe.href} className="fl-link" onPointerEnter={(e) => { if (e.pointerType === "touch") return; roomRef.current?.hover(i); roomRef.current?.preload(i); }} onPointerLeave={() => roomRef.current?.hover(-1)} onFocus={() => { roomRef.current?.hover(i); roomRef.current?.preload(i); }} onBlur={() => roomRef.current?.hover(-1)} onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return; e.preventDefault(); openShoe(i); }} > {/* eslint-disable-next-line @next/next/no-img-element */} { e.currentTarget.dataset.error = ""; }} />

{labels.hint} {labels.hintTouch}

{live}

); } export default Floodlit; 6b:T36de,// Generated by scripts/glsl.mjs from the .glsl files beside it. Do not edit by hand. export const accumulateFrag = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 outColor;\nuniform sampler2D uFrame;\nuniform float uWeight;\nvoid main() {\noutColor = vec4(texture(uFrame, vUv).rgb, uWeight);\n}"; export const bracketFrag = "#version 300 es\nprecision highp float;\nin vec3 vWorld;\nin vec3 vNormal;\nout vec4 outColor;\nuniform vec3 uKeyPos;\nuniform vec3 uKeyColor;\nuniform float uKeyPower;\nuniform vec3 uAmbient;\nuniform vec3 uSteel;\nuniform vec3 uLedColor;\nuniform float uLedLevel;\nuniform float uStripPower;\nuniform vec3 uStripPoint;\nuniform vec2 uPanelFade;\nuniform float uPanelAmount;\nuniform vec2 uViewport;\nfloat panelKeep(float x) {\nreturn uPanelFade.x < uPanelFade.y ? 1.0 - smoothstep(uPanelFade.x, uPanelFade.y, x) : smoothstep(uPanelFade.y, uPanelFade.x, x);\n}\nvoid main() {\nvec3 toKey = uKeyPos - vWorld;\nfloat d2 = dot(toKey, toKey);\nfloat nl = max(dot(vNormal, toKey / sqrt(d2)), 0.0);\nvec3 toStrip = uStripPoint - vWorld;\nfloat s2 = dot(toStrip, toStrip) + 60.0;\nvec3 glow = uLedColor * uLedLevel * uStripPower * 0.04 / (1.0 + s2 * 0.002);\nfloat fade = 1.0;\nif (uPanelAmount > 0.0) fade = mix(1.0, panelKeep(gl_FragCoord.x / uViewport.x), uPanelAmount);\noutColor = vec4(uSteel * (uAmbient + uKeyColor * uKeyPower * nl / d2 + glow), 1.0) * fade;\n}"; export const fullscreenVert = "#version 300 es\nout vec2 vUv;\nvoid main() {\nvec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);\nvUv = p;\ngl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}"; export const presentFrag = "#version 300 es\nprecision highp float;\nconst vec3 LUMA = vec3(0.2126, 0.7152, 0.0722);\nvec3 srgbToLinear(vec3 c) {\nreturn mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\nc = clamp(c, 0.0, 1.0);\nreturn mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\nfloat softBar(vec2 p, vec2 xRange, float y, float along, float across) {\nfloat ax = smoothstep(xRange.x - along, xRange.x + along, p.x) * (1.0 - smoothstep(xRange.y - along, xRange.y + along, p.x));\nfloat d = (p.y - y) / across;\nreturn ax * exp(-d * d);\n}\nfloat lineIrradiance(float a, float b, float d2, float z) {\nreturn (b / sqrt(b * b + d2) - a / sqrt(a * a + d2)) * z / d2;\n}\nin vec2 vUv;\nout vec4 outColor;\nuniform sampler2D uScene;\nuniform sampler2D uNoise;\nuniform float uDither;\nuniform float uWorldDim;\nvec3 rollOff(vec3 c) {\nconst float knee = 0.72;\nvec3 over = max(c - knee, 0.0);\nreturn min(c, vec3(knee)) + (1.0 - knee) * (1.0 - exp(-over / (1.0 - knee)));\n}\nvoid main() {\nvec3 c = rollOff(texture(uScene, vUv).rgb * uWorldDim);\nc = linearToSrgb(c);\nfloat n = texelFetch(uNoise, ivec2(gl_FragCoord.xy) & 63, 0).r - 0.5;\noutColor = vec4(c + n * uDither / 255.0, 1.0);\n}"; export const shoeFrag = "#version 300 es\nprecision highp float;\nconst vec3 LUMA = vec3(0.2126, 0.7152, 0.0722);\nvec3 srgbToLinear(vec3 c) {\nreturn mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\nc = clamp(c, 0.0, 1.0);\nreturn mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\nfloat softBar(vec2 p, vec2 xRange, float y, float along, float across) {\nfloat ax = smoothstep(xRange.x - along, xRange.x + along, p.x) * (1.0 - smoothstep(xRange.y - along, xRange.y + along, p.x));\nfloat d = (p.y - y) / across;\nreturn ax * exp(-d * d);\n}\nfloat lineIrradiance(float a, float b, float d2, float z) {\nreturn (b / sqrt(b * b + d2) - a / sqrt(a * a + d2)) * z / d2;\n}\nin vec3 vWorld;\nin vec2 vFace;\nout vec4 outColor;\nuniform sampler2D uShoe;\nuniform sampler2D uShoeLarge;\nuniform float uLargeMix;\nuniform float uMipBias;\nuniform float uExposure;\nuniform vec3 uLedColor;\nuniform float uLedLevel;\nuniform float uSoleCatch;\nuniform float uBaseline;\nuniform vec2 uPanelFade;\nuniform float uPanelAmount;\nuniform float uFadeAll;\nuniform vec2 uViewport;\nuniform float uFlip;\nfloat panelKeep(float x) {\nreturn uPanelFade.x < uPanelFade.y ? 1.0 - smoothstep(uPanelFade.x, uPanelFade.y, x) : smoothstep(uPanelFade.y, uPanelFade.x, x);\n}\nvoid main() {\nvec2 uv = uFlip > 0.5 ? vec2(1.0 - vFace.x, vFace.y) : vFace;\nvec4 s = texture(uShoe, uv, uMipBias);\nif (uLargeMix > 0.0) s = mix(s, texture(uShoeLarge, uv, uMipBias), uLargeMix);\nif (s.a < 0.002) discard;\nvec3 albedo = srgbToLinear(clamp(s.rgb / s.a, 0.0, 1.0));\nfloat h = max(uBaseline - vFace.y, 0.0);\nfloat low = exp(-h / 0.13);\nvec3 lit = albedo * (uExposure + uLedColor * uLedLevel * uSoleCatch * low);\nfloat a = s.a * uFadeAll;\nif (uPanelAmount > 0.0) {\nfloat x = gl_FragCoord.x / uViewport.x;\na *= mix(1.0, panelKeep(x), uPanelAmount);\n}\noutColor = vec4(lit * a, a);\n}"; export const slabFrag = "#version 300 es\nprecision highp float;\nconst vec3 LUMA = vec3(0.2126, 0.7152, 0.0722);\nvec3 srgbToLinear(vec3 c) {\nreturn mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\nc = clamp(c, 0.0, 1.0);\nreturn mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\nfloat softBar(vec2 p, vec2 xRange, float y, float along, float across) {\nfloat ax = smoothstep(xRange.x - along, xRange.x + along, p.x) * (1.0 - smoothstep(xRange.y - along, xRange.y + along, p.x));\nfloat d = (p.y - y) / across;\nreturn ax * exp(-d * d);\n}\nfloat lineIrradiance(float a, float b, float d2, float z) {\nreturn (b / sqrt(b * b + d2) - a / sqrt(a * a + d2)) * z / d2;\n}\nin vec3 vWorld;\nin vec3 vNormal;\nout vec4 outColor;\nuniform vec3 uCamera;\nuniform vec3 uBoxMin;\nuniform vec3 uBoxMax;\nuniform vec2 uStripX;\nuniform vec3 uLedColor;\nuniform float uLedLevel;\nuniform vec3 uKeyPos;\nuniform vec3 uKeyColor;\nuniform float uKeyPower;\nuniform vec3 uAmbient;\nuniform vec3 uBodyTint;\nuniform float uBodyAlpha;\nuniform float uRimGain;\nuniform float uStripGain;\nuniform float uStripIdle;\nuniform sampler2D uShoe;\nuniform vec4 uShoeRect;\nuniform float uShoeZ;\nuniform float uBaselineY;\nuniform vec2 uContact;\nuniform float uContactGain;\nuniform float uReflectGain;\nuniform vec2 uPanelFade;\nuniform float uPanelAmount;\nuniform vec2 uViewport;\nuniform float uFlip;\nfloat panelKeep(float x) {\nreturn uPanelFade.x < uPanelFade.y ? 1.0 - smoothstep(uPanelFade.x, uPanelFade.y, x) : smoothstep(uPanelFade.y, uPanelFade.x, x);\n}\nvoid main() {\nvec3 V = normalize(uCamera - vWorld);\nvec3 N = vNormal;\nfloat ndv = abs(dot(N, V));\nfloat fresnel = pow(max(1.0 - ndv, 0.0), 4.0);\nvec3 dd = min(vWorld - uBoxMin, uBoxMax - vWorld);\nfloat edge = abs(N.z) > 0.5 ? min(dd.x, dd.y) : (abs(N.y) > 0.5 ? min(dd.x, dd.z) : min(dd.y, dd.z));\nedge = max(edge, 0.0);\nfloat px = max(fwidth(edge), 1e-3);\nfloat rim = exp(-edge / max(0.9, px * 1.1));\nvec3 toKey = uKeyPos - vWorld;\nfloat keyE = uKeyPower / dot(toKey, toKey);\nvec3 light = uAmbient + uKeyColor * keyE;\nfloat alpha = uBodyAlpha + 0.22 * fresnel + 0.20 * rim;\nvec3 color = uBodyTint * light * (0.35 + 1.6 * rim + 1.2 * fresnel) * uRimGain;\nvec3 emission = vec3(0.0);\nfloat shade = 0.0;\nfloat level = uLedLevel;\nvec3 led = uLedColor;\nfloat zFront = uBoxMax.z;\nfloat toFront = zFront - vWorld.z;\nif (N.z > 0.5) {\nfloat yMid = 0.5 * (uBoxMin.y + uBoxMax.y);\nfloat dx = max(max(uStripX.x - vWorld.x, vWorld.x - uStripX.y), 0.0);\nfloat d = length(vec2(dx, vWorld.y - yMid));\nfloat core = exp(-pow(d / 0.95, 2.0));\nfloat halo = exp(-d / 3.2);\nemission += led * (level * (core * uStripGain + halo * uStripGain * 0.16));\nemission += led * uStripIdle * core;\nshade += core * 0.45 * (1.0 - level);\n} else if (abs(N.y) > 0.5) {\nemission += led * level * uStripGain * 0.045 * exp(-toFront / 15.0);\n}\nvec3 reflected = vec3(0.0);\nif (N.y < -0.5) {\nfloat dz = (vWorld.z - uShoeZ) / 11.0;\nfloat across = exp(-dz * dz);\nfloat along = smoothstep(uContact.x - 14.0, uContact.x + 18.0, vWorld.x) * (1.0 - smoothstep(uContact.y - 18.0, uContact.y + 14.0, vWorld.x));\nshade += uContactGain * along * across;\nvec3 I = vWorld - uCamera;\nif (vWorld.z > uShoeZ && I.y > 0.0 && I.z < 0.0) {\nvec3 R = vec3(I.x, -I.y, I.z);\nvec2 hit = vWorld.xy + R.xy * ((uShoeZ - vWorld.z) / R.z);\nvec2 uv = (hit - uShoeRect.xy) / (uShoeRect.zw - uShoeRect.xy);\nif (uFlip > 0.5) uv.x = 1.0 - uv.x;\nfloat up = (uBaselineY - hit.y) / (uShoeRect.w - uShoeRect.y);\nif (uv.x > 0.0 && uv.x < 1.0 && uv.y > 0.0 && uv.y < 1.0 && up > -0.02) {\nvec4 s = texture(uShoe, uv, 2.0);\nif (s.a > 0.01) {\nreflected = srgbToLinear(clamp(s.rgb / s.a, 0.0, 1.0)) * s.a * exp(-max(up, 0.0) * 9.0) * uReflectGain * smoothstep(0.0, 8.0, zFront - vWorld.z);\n}\n}\n}\n}\nshade = clamp(shade, 0.0, 0.92);\nvec3 rgb = color * alpha + emission + reflected;\nfloat a = 1.0 - (1.0 - alpha) * (1.0 - shade);\nfloat fade = 1.0;\nif (uPanelAmount > 0.0) fade = mix(1.0, panelKeep(gl_FragCoord.x / uViewport.x), uPanelAmount);\noutColor = vec4(rgb, a) * fade;\n}"; export const wallFrag = "#version 300 es\nprecision highp float;\nprecision highp sampler2DArray;\nconst vec3 LUMA = vec3(0.2126, 0.7152, 0.0722);\nvec3 srgbToLinear(vec3 c) {\nreturn mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\nc = clamp(c, 0.0, 1.0);\nreturn mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\nfloat softBar(vec2 p, vec2 xRange, float y, float along, float across) {\nfloat ax = smoothstep(xRange.x - along, xRange.x + along, p.x) * (1.0 - smoothstep(xRange.y - along, xRange.y + along, p.x));\nfloat d = (p.y - y) / across;\nreturn ax * exp(-d * d);\n}\nfloat lineIrradiance(float a, float b, float d2, float z) {\nreturn (b / sqrt(b * b + d2) - a / sqrt(a * a + d2)) * z / d2;\n}\n#define MAX_SHOES 16\nin vec3 vWorld;\nout vec4 outColor;\nuniform sampler2D uAlbedo;\nuniform sampler2D uNormal;\nuniform sampler2D uDetail;\nuniform sampler2DArray uShadows;\nuniform vec2 uWallScale;\nuniform vec2 uWallOffset;\nuniform float uDetailScale;\nuniform float uContrast;\nuniform float uRelief;\nuniform float uDetailRelief;\nuniform float uMapBias;\nuniform float uChroma;\nuniform vec3 uWallBase;\nuniform vec3 uAmbient;\nuniform vec3 uKeyPos;\nuniform vec3 uKeyColor;\nuniform float uKeyPower;\nuniform float uKeyShadow;\nuniform float uSlabShadow;\nuniform float uStripPower;\nuniform float uShoeZ;\nuniform vec2 uRoom;\nuniform vec3 uTorchPos;\nuniform vec3 uTorchColor;\nuniform float uTorchPower;\nuniform vec2 uPanelFade;\nuniform vec2 uViewport;\nuniform float uFlip;\nuniform int uCount;\nuniform vec4 uShoeRect[MAX_SHOES];\nuniform vec3 uShoeBase[MAX_SHOES];\nuniform vec4 uStrip[MAX_SHOES];\nuniform vec4 uLed[MAX_SHOES];\nuniform vec3 uSlab[MAX_SHOES];\nfloat panelKeep(float x) {\nreturn uPanelFade.x < uPanelFade.y ? 1.0 - smoothstep(uPanelFade.x, uPanelFade.y, x) : smoothstep(uPanelFade.y, uPanelFade.x, x);\n}\nfloat shadowAt(int i, vec2 q, float lod) {\nvec4 r = uShoeRect[i];\nvec2 uv = (q - r.xy) / (r.zw - r.xy);\nif (uFlip > 0.5) uv.x = 1.0 - uv.x;\nif (uv.x <= 0.0 || uv.y <= 0.0 || uv.x >= 1.0 || uv.y >= 1.0) return 0.0;\nreturn textureLod(uShadows, vec3(uv, float(i)), lod).r;\n}\nvoid main() {\nvec2 P = vWorld.xy;\nvec2 uv = P * uWallScale + uWallOffset;\nvec3 ratio = texture(uAlbedo, uv, uMapBias).rgb * 2.0;\nratio = mix(vec3(dot(ratio, LUMA)), ratio, uChroma);\nratio = max(vec3(0.0), 1.0 + (ratio - 1.0) * uContrast);\nvec2 nm = texture(uNormal, uv, uMapBias).rg * 2.0 - 1.0;\nvec2 dt = texture(uDetail, P * uDetailScale).rg * 2.0 - 1.0;\nvec2 tilt = nm * uRelief + dt * uDetailRelief;\nvec3 N = normalize(vec3(tilt.x, -tilt.y, 1.0));\nvec3 toKey = uKeyPos - vec3(P, 0.0);\nfloat keyD2 = dot(toKey, toKey);\nvec3 keyDir = toKey / sqrt(keyD2);\nfloat keyE = uKeyPower * max(dot(N, keyDir), 0.0) / keyD2;\nvec3 toTorch = uTorchPos - vec3(P, 0.0);\nfloat torchE = 0.0;\nif (uTorchPower > 0.0) {\nfloat d2 = dot(toTorch, toTorch);\ntorchE = uTorchPower * max(dot(N, toTorch / sqrt(d2)), 0.0) / d2;\n}\nfloat keyVis = 1.0;\nfloat torchVis = 1.0;\nfloat ao = 1.0;\nfloat screenX = gl_FragCoord.x / uViewport.x;\nfloat panelGone = panelKeep(screenX);\nfor (int i = 0; i < uCount; i++) {\nvec2 q = P + toKey.xy * (uShoeZ / toKey.z);\nfloat h = clamp((uShoeBase[i].x - q.y) / uShoeBase[i].y, 0.0, 1.0);\nfloat here = mix(1.0, panelGone, uShoeBase[i].z);\nif (uTorchPower > 0.0) {\nvec2 qt = P + toTorch.xy * (uShoeZ / toTorch.z);\ntorchVis *= 1.0 - here * 0.7 * shadowAt(i, qt, 1.5);\n}\nkeyVis *= 1.0 - here * uKeyShadow * shadowAt(i, q, mix(0.5, 2.6, h));\nvec3 s = uSlab[i];\nif (abs(P.y - s.z) < 90.0) {\nvec2 qs = P + toKey.xy * (24.0 / toKey.z);\nkeyVis *= 1.0 - here * uSlabShadow * softBar(qs, s.xy, s.z + 4.0, 16.0, 11.0);\nao *= 1.0 - here * 0.34 * softBar(P, s.xy, s.z + 3.0, 10.0, 7.0);\n}\n}\nfloat room = 1.0 - 0.2 * smoothstep(0.9, 2.2, abs(P.x - uRoom.x) / uRoom.y);\nvec3 E = uAmbient * room * ao + uKeyColor * keyE * keyVis * ao + uTorchColor * torchE * torchVis * ao;\nfor (int i = 0; i < uCount; i++) {\nfloat level = uLed[i].a;\nif (level < 0.002) continue;\nvec4 st = uStrip[i];\nfloat dy = P.y - st.z;\nfloat d2 = dy * dy + st.w * st.w;\nfloat e = lineIrradiance(st.x - P.x, st.y - P.x, d2, st.w);\nvec3 toLine = normalize(vec3(clamp(P.x, st.x, st.y) - P.x, -dy, st.w));\nfloat relief = max(dot(N, toLine), 0.0) / max(toLine.z, 0.08);\nvec2 q = vec2(P.x, P.y + (st.z - P.y) * (uShoeZ / st.w));\nfloat shade = 1.0 - 0.72 * shadowAt(i, q, 3.2);\nE += uLed[i].rgb * level * uStripPower * e * relief * shade;\n}\noutColor = vec4(uWallBase * ratio * E, 1.0);\n}"; export const worldVert = "#version 300 es\nlayout(location = 0) in vec3 aPosition;\nlayout(location = 1) in vec3 aNormal;\nlayout(location = 2) in vec2 aFace;\nuniform mat4 uViewProj;\nuniform vec3 uOrigin;\nuniform vec3 uScale;\nout vec3 vWorld;\nout vec3 vNormal;\nout vec2 vFace;\nvoid main() {\nvWorld = uOrigin + aPosition * uScale;\nvNormal = aNormal;\nvFace = aFace;\ngl_Position = uViewProj * vec4(vWorld, 1.0);\n}"; 6c:T1825,// The room, on whichever thread it lives. It touches nothing but its canvas, so the worker and the page run this same // code. Commands arrive by name, so a call from the page looks the same in both cases. import { createEngine, type Engine, type RoomAssets } from "./engine"; import type { WallLayout } from "./layout"; import { createRoom, type Room } from "./room"; export type HostInit = { assets: RoomAssets; reduced: boolean; torch: boolean; rtl: boolean; detailTop: number; day: number; /** A phone holds fewer large pictures and fewer samples. */ small: boolean; }; export type HostEvent = | { type: "ready" | "fail" | "lost" | "restored" | "panelClear" | "home" } | { type: "stats"; stats: ReturnType & { thread: string; frames: number; frameMs: number[] } }; export type HostMethod = | "setLayout" | "setTheme" | "hover" | "open" | "close" | "pointer" | "pointerLeft" | "setScroll" | "pulse" | "setBag" | "closerLook" | "preload" | "setVisible" | "stats" | "debugLose" | "debugRestore"; /** Above this many device pixels the picture stops getting sharper and the laptop starts to feel it. */ const MAX_PIXELS = 6_000_000; export function createHost(canvas: HTMLCanvasElement | OffscreenCanvas, init: HostInit, emit: (event: HostEvent) => void, thread: string) { let engine: Engine | null = null; let room: Room | null = null; let ready = false; let frames = 0; let frameMs: number[] = []; let queue: [HostMethod, unknown[]][] = []; // What must come back after a lost context. let lastLayout: [WallLayout, number, number, number] | null = null; let day = init.day; let focused = -1; let bagOpen = false; let visible = true; let loseExtension: { loseContext(): void; restoreContext(): void } | null = null; function boot(restoring: boolean) { ready = false; try { engine = createEngine(canvas); } catch { emit({ type: "fail" }); return; } const e = engine; e.setSmall(init.small); const r = createRoom(e, { torch: init.torch, reduced: init.reduced, rtl: init.rtl, detailTop: init.detailTop, small: init.small, onPanelClear: () => emit({ type: "panelClear" }), onHome: () => emit({ type: "home" }), onFrame: (info) => { frames++; if (info.moving && frameMs.length < 4000) frameMs.push(info.dt); }, }); room = r; r.setTheme(day, true); r.setVisible(visible); e.load(init.assets) .then(() => { if (room !== r) return; ready = true; if (restoring) { if (lastLayout) r.setLayout(...lastLayout); if (focused >= 0) r.open(focused, true); if (bagOpen) r.setBag(true); } for (const [method, args] of queue) run(method, args); queue = []; emit({ type: restoring ? "restored" : "ready" }); }) .catch(() => { if (room === r) emit({ type: "fail" }); }); } function run(method: HostMethod, args: unknown[]) { const r = room as Room; switch (method) { case "setLayout": { const [layout, width, height, ratio] = args as [WallLayout, number, number, number]; const cap = Math.sqrt(MAX_PIXELS / Math.max(1, width * height)); lastLayout = [layout, width, height, Math.min(ratio, cap)]; r.setLayout(...lastLayout); break; } case "hover": r.hover(args[0] as number); break; case "open": focused = args[0] as number; r.open(focused, args[1] as boolean | undefined); break; case "close": focused = -1; r.close(); break; case "pointer": r.pointer(args[0] as number, args[1] as number); break; case "pointerLeft": r.pointerLeft(); break; case "setScroll": r.setScroll(args[0] as number); break; case "pulse": r.pulse(args[0] as number); break; case "setBag": bagOpen = args[0] as boolean; r.setBag(bagOpen); break; case "closerLook": r.closerLook(args[0] as number, args[1] as number | undefined, args[2] as number | undefined, args[3] as number | undefined); break; case "preload": r.preload(args[0] as number); break; } } const contextOf = () => (canvas as OffscreenCanvas).getContext("webgl2"); const onLost = (e: Event) => { e.preventDefault(); ready = false; room?.stop(); room = null; engine = null; emit({ type: "lost" }); }; const onRestored = () => boot(true); canvas.addEventListener("webglcontextlost", onLost); canvas.addEventListener("webglcontextrestored", onRestored); boot(false); return { call(method: HostMethod, args: unknown[]) { if (method === "setTheme") { day = args[0] as number; room?.setTheme(day); } else if (method === "setVisible") { visible = args[0] as boolean; room?.setVisible(visible); } else if (method === "stats") { if (engine) emit({ type: "stats", stats: { ...engine.stats(), thread, frames, frameMs } }); frameMs = []; } else if (method === "debugLose") { loseExtension = (contextOf() as WebGL2RenderingContext | null)?.getExtension("WEBGL_lose_context") ?? null; loseExtension?.loseContext(); } else if (method === "debugRestore") { loseExtension?.restoreContext(); } else if (ready) { run(method, args); } else { // Before the pictures have arrived, or while the context is away: the latest wins on a restore. if (method === "setLayout") { const [layout, width, height, ratio] = args as [WallLayout, number, number, number]; lastLayout = [layout, width, height, Math.min(ratio, Math.sqrt(MAX_PIXELS / Math.max(1, width * height)))]; } else if (method === "open") focused = args[0] as number; else if (method === "close") focused = -1; else if (method === "setBag") bagOpen = args[0] as boolean; queue.push([method, args]); } }, }; } 6d:Te58,// The wall's layout, from the component's own width. Shared by the canvas and the page's real links, so the // two can never disagree. World units are CSS pixels at the rest camera; x right, y down, z towards the viewer. export const SLAB = { depth: 46, thick: 8, zBack: 2 } as const; export const SHOE_Z = 24; export const MAX_SHOE_WIDTH = 340; export type ShoeShape = { /** Picture width / height. */ aspect: number; /** 0..1 from the top of the picture: where the sole meets the slab. */ baseline: number; /** 0..1 across the picture: the part of the sole touching the slab. */ contact: readonly [number, number]; }; export type Slot = { index: number; row: number; col: number; /** The picture's card, standing on the slab. */ card: { x: number; y: number; w: number; h: number }; /** The slab's top face: left, right, y. */ slab: { x0: number; x1: number; y: number }; strip: { x0: number; x1: number; y: number; z: number }; contact: readonly [number, number]; /** Where the caption starts. */ captionY: number; }; export type WallLayout = { width: number; height: number; cols: number; rows: number; slots: Slot[]; /** How tall the wall's content is. The rest camera steps back if the window is shorter. */ contentHeight: number; headerHeight: number; shoeWidth: number; }; export function columnsFor(width: number, count: number): number { if (width >= 1100) return Math.min(Math.ceil(count / 2), 6); if (width >= 700) return count <= 8 ? 3 : 4; return 2; } export function layoutWall(width: number, shoes: readonly ShoeShape[], rtl = false): WallLayout { const cols = Math.max(1, columnsFor(width, shoes.length)); const rows = Math.ceil(shoes.length / cols); const edge = Math.max(16, width * 0.04); const gap = Math.max(10, width * 0.012); const fit = (width - edge * 2 - gap * (cols - 1)) / cols; const shoeWidth = Math.min(fit, MAX_SHOE_WIDTH); const gridWidth = shoeWidth * cols + gap * (cols - 1); const left = (width - gridWidth) / 2; const headerHeight = Math.max(96, shoeWidth * 0.62); const tallest = shoeWidth * 0.62; // the tallest pictures stand this high above their slab const pitch = shoeWidth * 0.62 + SLAB.thick + shoeWidth * 0.62; const firstBaseline = headerHeight + tallest; const slots: Slot[] = shoes.map((shoe, index) => { const row = Math.floor(index / cols); const inRow = row === rows - 1 ? shoes.length - cols * (rows - 1) : cols; const col = index - row * cols; // An odd last row is centred, with the wall continuing behind it. const rowLeft = left + ((cols - inRow) * (shoeWidth + gap)) / 2; const place = rtl ? inRow - 1 - col : col; const cardX = rowLeft + place * (shoeWidth + gap); const cardH = shoeWidth / shoe.aspect; const baseY = firstBaseline + row * pitch; const slabInset = shoeWidth * 0.015; const x0 = cardX + slabInset; const x1 = cardX + shoeWidth - slabInset; return { index, row, col, card: { x: cardX, y: baseY - cardH * shoe.baseline, w: shoeWidth, h: cardH }, slab: { x0, x1, y: baseY }, strip: { x0: x0 + 9, x1: x1 - 9, y: baseY + SLAB.thick / 2, z: SLAB.zBack + SLAB.depth }, contact: rtl ? [cardX + (1 - shoe.contact[1]) * shoeWidth, cardX + (1 - shoe.contact[0]) * shoeWidth] : [cardX + shoe.contact[0] * shoeWidth, cardX + shoe.contact[1] * shoeWidth], captionY: baseY + SLAB.thick + 14, }; }); const contentHeight = firstBaseline + (rows - 1) * pitch + SLAB.thick + shoeWidth * 0.34; return { width, height: contentHeight, cols, rows, slots, contentHeight, headerHeight, shoeWidth }; } 6e:Td76,// The room's light as numbers. Night and day are the same geometry with these values moved. export type Vec3 = readonly [number, number, number]; function lin(c: number): number { const v = c / 255; return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); } export function hexToLinear(hex: string): Vec3 { const n = parseInt(hex.replace("#", ""), 16); return [lin((n >> 16) & 255), lin((n >> 8) & 255), lin(n & 255)]; } /** Pill text on a fill of this colour: whichever of ink or paper reads better. */ export function contrastInk(hex: string): string { const [r, g, b] = hexToLinear(hex); const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; const onDark = (lum + 0.05) / (0.0091 + 0.05); const onLight = (0.88 + 0.05) / (lum + 0.05); return onDark >= onLight ? "#17161A" : "#F3F1EC"; } export type Lighting = { wallBase: Vec3; ambient: Vec3; keyColor: Vec3; keyPower: number; keyHeightShare: number; // key light position: above the wall's top, as a share of the view height keyXShare: number; keyZ: number; keyShadow: number; torchPower: number; torchZ: number; slabShadow: number; contrast: number; chroma: number; relief: number; detailRelief: number; stripPower: number; soleCatch: number; bodyTint: Vec3; bodyAlpha: number; rimGain: number; stripGain: number; stripIdle: number; contactGain: number; reflectGain: number; steel: Vec3; shoeExposure: number; }; /** A wall of real plaster reflecting little light: the lamps set its brightness, not its colour. */ const PLASTER: Vec3 = [0.42, 0.405, 0.44]; export const NIGHT: Lighting = { wallBase: PLASTER, // Before any lamp, this reads as about #141316. ambient: [0.0168, 0.016, 0.0182], keyColor: [1.0, 0.95, 0.88], keyPower: 62000, keyHeightShare: -0.1, keyXShare: 0.24, keyZ: 760, keyShadow: 0.86, torchPower: 7200, torchZ: 560, slabShadow: 0.34, contrast: 1.2, chroma: 0.7, relief: 0.34, detailRelief: 0.1, stripPower: 24, soleCatch: 0.18, bodyTint: [0.86, 0.93, 1.0], bodyAlpha: 0.03, rimGain: 1.5, stripGain: 3.4, stripIdle: 0.01, contactGain: 0.72, reflectGain: 0.2, steel: [0.42, 0.42, 0.45], shoeExposure: 0.78, }; export const DAY: Lighting = { wallBase: [0.73, 0.701, 0.637], ambient: [0.5, 0.5, 0.5], keyColor: [1.0, 0.985, 0.95], keyPower: 1600000, keyHeightShare: -0.5, keyXShare: 0.22, keyZ: 1500, keyShadow: 0.78, torchPower: 26000, torchZ: 560, slabShadow: 0.34, contrast: 0.7, chroma: 0.22, relief: 0.2, detailRelief: 0.06, stripPower: 3.6, soleCatch: 0.1, bodyTint: [0.7, 0.8, 0.8], bodyAlpha: 0.07, rimGain: 0.62, stripGain: 1.5, stripIdle: 0.02, contactGain: 0.5, reflectGain: 0.14, steel: [0.5, 0.5, 0.5], shoeExposure: 1.0, }; function mixN(a: number, b: number, t: number): number { return a + (b - a) * t; } function mixV(a: Vec3, b: Vec3, t: number): Vec3 { return [mixN(a[0], b[0], t), mixN(a[1], b[1], t), mixN(a[2], b[2], t)]; } /** Night to day is the lights coming up: the same room with these values moving. */ export function lightingAt(day: number): Lighting { const out = {} as Record; for (const key of Object.keys(NIGHT) as (keyof Lighting)[]) { const a = NIGHT[key]; const b = DAY[key]; out[key] = typeof a === "number" ? mixN(a, b as number, day) : mixV(a, b as Vec3, day); } return out as Lighting; } 6f:T6a55,// What the room does over time: one camera pose on a spring, one spring per light and per shelf, and a loop that // draws only while something is changing. No DOM and no React state during motion, so it can move to a worker. import { focalLength, focusFrame, restPose, TALL_WIDTH, type FocusFrame, type Pose } from "./camera"; import type { Engine, RoomState, ShoeState } from "./engine"; import { SHOE_Z, SLAB, type WallLayout } from "./layout"; import { lightingAt, type Lighting } from "./lighting"; import { critical, sampledEase, settled, underdamped, type Spring } from "./spring"; const STILL_FRAMES = 16; const POSE_OMEGA = 34; // the spring behind the path: it only smooths what a new command does const DIM_OMEGA = 5.4; // the room dims over about 100 to 900 ms const TORCH_OMEGA = 7; const LOOK_OMEGA = 5; const LOOK_DEGREES = 1.5; const CARRY_SECONDS = 0.17; // how long a new path keeps some of the speed the camera already had const walkEase = sampledEase(0.36, 0.04, 0.16, 1.0); // a slow start, but moving by 150 ms, then a long glide const backEase = sampledEase(0.42, 0.0, 0.2, 1.0); const alongEase = sampledEase(0.42, 0.0, 0.24, 1.0); export type RoomOptions = { now?: () => number; /** Fine pointer: the torch works. Off on touch. */ torch?: boolean; onFrame?: (info: FrameInfo) => void; /** The walk has reached the point where the panel may enter: the path is clear of it. */ onPanelClear?: () => void; /** Walking back, the camera is nearly home: the wall's words may come back without landing on the wrong shoes. */ onHome?: () => void; /** No walking and no torch. States change at once, and the page crossfades them. Light still answers hover. */ reduced?: boolean; rtl?: boolean; /** Height of the host's header over the top of the room. */ detailTop?: number; /** A phone: holds fewer large pictures. */ small?: boolean; }; export type FrameInfo = { t: number; dt: number; pose: Pose; drawCalls: number; still: number; moving: boolean; }; type Goal = { x: number; y: number; logD: number; shiftX: number; shiftY: number }; type Path = { t0: number; delay: number; duration: number; at: (u: number) => Goal; /** Called once when u reaches this share. */ mark?: { u: number; done: boolean; run: () => void }; }; type ShelfSprings = { level: Spring; exposure: Spring; mip: Spring; amount: Spring; levelTarget: number; pulse: Spring; large: Spring }; const mix = (a: number, b: number, t: number) => a + (b - a) * t; export function createRoom(engine: Engine, options: RoomOptions = {}) { const now = options.now ?? (() => performance.now()); const reduced = options.reduced ?? false; const rtl = options.rtl ?? false; const detailTop = options.detailTop ?? 0; const hasTorch = (options.torch ?? true) && !reduced; let scrollY = 0; let layout: WallLayout | null = null; let cssW = 0; let cssH = 0; let dpr = 1; const daySpring: Spring = { x: 0, v: 0 }; let dayTarget = 0; let day = 0; let lighting: Lighting = lightingAt(0); let hovered = -1; let focused = -1; let frameInfo: FocusFrame | null = null; let panelFade: [number, number] = [0.72, 0.8]; // The pose: x, y, log of the distance from the shoes' plane, lens shift. const pose = { x: { x: 0, v: 0 }, y: { x: 0, v: 0 }, logD: { x: 0, v: 0 }, shiftX: { x: 0, v: 0 }, shiftY: { x: 0, v: 0 } }; let path: Path | null = null; let goal: Goal = { x: 0, y: 0, logD: 0, shiftX: 0, shiftY: 0 }; let focusSince = -1; // What the camera was doing when the last command came: it keeps going a little, as a body with weight does. let carry = { t0: 0, x: 0, y: 0, logD: 0, shiftX: 0, shiftY: 0, lead: { x: 0, y: 0, logD: 0, shiftX: 0, shiftY: 0 } }; const dim: Spring = { x: 0, v: 0 }; let dimTarget = 0; const lookX: Spring = { x: 0, v: 0 }; const lookY: Spring = { x: 0, v: 0 }; let lookTargetX = 0; let lookTargetY = 0; const torchX: Spring = { x: 0, v: 0 }; const torchY: Spring = { x: 0, v: 0 }; const torchOn: Spring = { x: 0, v: 0 }; let torchTargetX = 0; let torchTargetY = 0; let torchTargetOn = 0; // The bag: the world dims and softens in the shader, through the same timing as the drawer. const bag: Spring = { x: 0, v: 0 }; let bagTarget = 0; // A view or zoom on the focused shoe: how close, and which point of the card stays centred. const closer = { zoom: { x: 1, v: 0 }, u: { x: 0.5, v: 0 }, v: { x: 0.5, v: 0 } }; let closerTarget = { zoom: 1, u: 0.5, v: 0.5, omega: 8 }; let shelves: ShelfSprings[] = []; const shoeStates: ShoeState[] = []; let lastT = 0; let paused = false; let scheduled = false; let manual = false; let stillIndex = -1; let drawnThisFrame = 0; let forced = true; const toPose = (g: Goal): Pose => ({ x: g.x, y: g.y, z: SHOE_Z + Math.exp(g.logD), pitch: 0, yaw: 0, shiftX: g.shiftX, shiftY: g.shiftY }); const toGoal = (p: Pose): Goal => ({ x: p.x, y: p.y, logD: Math.log(p.z - SHOE_Z), shiftX: p.shiftX, shiftY: p.shiftY }); function currentGoal(): Goal { return { x: pose.x.x, y: pose.y.x, logD: pose.logD.x, shiftX: pose.shiftX.x, shiftY: pose.shiftY.x }; } /** The screen position of a point on the shoes' plane, through a pose. */ function screenOf(px: number, py: number, g: Goal): [number, number] { const f = focalLength(cssW); const k = f / Math.exp(g.logD); return [cssW / 2 + (px - g.x) * k + (g.shiftX * cssW) / 2, cssH / 2 + (py - g.y) * k - (g.shiftY * cssH) / 2]; } /** * A path towards a shoe or away from it, anchored on the shoe: it travels in a straight line across the screen * from wherever it is now to where it ends, while the distance eases. So it never swerves, and a command in * mid-walk just starts a new line from the present moment. */ function anchoredPath(anchorX: number, anchorY: number, to: Goal, ease: (u: number) => number, rise: number, settle: number) { const from = currentGoal(); const [sx0, sy0] = screenOf(anchorX, anchorY, from); const [sx1, sy1] = screenOf(anchorX, anchorY, to); const f = focalLength(cssW); return (u: number): Goal => { // The settle: past the target by a little, and back. Only the distance does it. const over = settle * Math.sin(Math.PI * Math.min(1, Math.max(0, (u - 0.7) / 0.3))); const e = ease(u); const logD = mix(from.logD, to.logD, e) - over * (from.logD - to.logD); const k = f / Math.exp(logD); const shiftX = mix(from.shiftX, to.shiftX, e); const shiftY = mix(from.shiftY, to.shiftY, e); const sx = mix(sx0, sx1, e); const sy = mix(sy0, sy1, e) + rise * Math.sin(Math.PI * e); return { x: anchorX - (sx - cssW / 2 - (shiftX * cssW) / 2) / k, y: anchorY - (sy - cssH / 2 + (shiftY * cssH) / 2) / k, logD, shiftX, shiftY, }; }; } function wake() { forced = true; stillIndex = -1; schedule(); } function schedule() { if (manual || scheduled || paused) return; scheduled = true; requestAnimationFrame(tick); } function startPath(p: Path) { // The spring trails its goal a little. Keep that lead too, or the goal jumps back and the camera brakes hard. const lead = { x: goal.x - pose.x.x, y: goal.y - pose.y.x, logD: goal.logD - pose.logD.x, shiftX: goal.shiftX - pose.shiftX.x, shiftY: goal.shiftY - pose.shiftY.x }; carry = { t0: p.t0, x: pose.x.v, y: pose.y.v, logD: pose.logD.v, shiftX: pose.shiftX.v, shiftY: pose.shiftY.v, lead }; path = p; wake(); } /** The present velocity fades into the new path. At the moment of the command the speed is unchanged. */ function withCarry(g: Goal, t: number): Goal { const tau = Math.max(0, t - carry.t0) / 1000; if (tau > 1.4) return g; const e = Math.exp(-tau / CARRY_SECONDS); const f = tau * e; const l = carry.lead; return { x: g.x + carry.x * f + l.x * e, y: g.y + carry.y * f + l.y * e, logD: g.logD + carry.logD * f + l.logD * e, shiftX: g.shiftX + carry.shiftX * f + l.shiftX * e, shiftY: g.shiftY + carry.shiftY * f + l.shiftY * e, }; } function setLayout(next: WallLayout, width: number, height: number, ratio: number) { const first = !layout; layout = next; cssW = width; cssH = height; dpr = ratio; while (shelves.length < next.slots.length) { shelves.push({ level: { x: 0, v: 0 }, exposure: { x: lighting.shoeExposure, v: 0 }, mip: { x: 0, v: 0 }, amount: { x: 0, v: 0 }, levelTarget: 0, pulse: { x: 0, v: 0 }, large: { x: 0, v: 0 }, }); shoeStates.push({ level: 0, exposure: lighting.shoeExposure, mipBias: 0, fade: 1, panelAmount: 0, largeMix: 0 }); } if (first || focused < 0) { goal = toGoal(restPose(next, width, height, scrollY, detailTop)); if (first) { pose.x.x = goal.x; pose.y.x = goal.y; pose.logD.x = goal.logD; pose.shiftX.x = goal.shiftX; pose.shiftY.x = goal.shiftY; torchX.x = torchTargetX = goal.x; torchY.x = torchTargetY = goal.y; } } else { frameInfo = focusFrame(next.slots[focused], width, height, rtl, detailTop); panelFade = frameInfo.panelFade; goal = toGoal(frameInfo.pose); } // A new layout ends a walk where it is, and the springs carry the camera to the new frame. A walk cut short still // lets the panel in: without that word the focus view waits for a cue that never comes. if (path?.mark && !path.mark.done) { path.mark.done = true; path.mark.run(); } path = null; wake(); } /** Night to day is the room's lights coming up, about 700 ms. The first call just sets it. */ function setTheme(next: number, instant = false) { dayTarget = next; if (instant || !layout) { daySpring.x = next; daySpring.v = 0; day = next; lighting = lightingAt(day); } wake(); } function hover(index: number) { if (index === hovered) return; hovered = index; wake(); } /** Walk up to a shoe. The click is answered at once: its strip goes to full in this very frame. */ function open(index: number, instant = false) { if (!layout) return; const slot = layout.slots[index]; const wasFocused = focused; focused = index; for (const s of shelves) s.levelTarget = 0; focusSince = now(); frameInfo = focusFrame(slot, cssW, cssH, rtl, detailTop); panelFade = frameInfo.panelFade; const to = toGoal(frameInfo.pose); dimTarget = 1; shelves[index].level.x = 1; shelves[index].level.v = 0; if (instant || reduced) { closer.zoom.x = 1; closerTarget = { zoom: 1, u: 0.5, v: 0.5, omega: 8 }; pose.x.x = to.x; pose.y.x = to.y; pose.logD.x = to.logD; pose.shiftX.x = to.shiftX; pose.shiftY.x = to.shiftY; pose.x.v = pose.y.v = pose.logD.v = pose.shiftX.v = pose.shiftY.v = 0; dim.x = 1; goal = to; path = null; for (let i = 0; i < shelves.length; i++) { const s = shelves[i]; const isFocus = i === index; s.exposure.x = isFocus ? 1 : mix(0.3, 0.86, day); s.mip.x = isFocus ? 0 : 1.6; s.amount.x = isFocus ? 0 : 1; } options.onPanelClear?.(); wake(); return; } if (wasFocused >= 0 && wasFocused !== index) { walkAlongTo(to); return; } const cx = slot.card.x + slot.card.w / 2; const cy = slot.slab.y - slot.card.h * 0.4; closer.zoom.x = 1; closerTarget = { zoom: 1, u: 0.5, v: 0.5, omega: 8 }; startPath({ t0: now(), delay: 60, duration: 1230, at: anchoredPath(cx, cy, to, walkEase, -14, 0.012), mark: { u: 0.55, done: false, run: () => options.onPanelClear?.() }, }); } /** On foot along the wall: a pan with a small step back in the middle. */ function walkAlongTo(to: Goal) { const from = currentGoal(); closerTarget = { zoom: 1, u: 0.5, v: 0.5, omega: 8 }; startPath({ t0: now(), delay: 0, duration: 700, mark: { u: 0.3, done: false, run: () => options.onPanelClear?.() }, at: (u) => { const e = alongEase(u); return { x: mix(from.x, to.x, e), y: mix(from.y, to.y, e), logD: mix(from.logD, to.logD, e) + 0.06 * Math.sin(Math.PI * e), shiftX: mix(from.shiftX, to.shiftX, e), shiftY: mix(from.shiftY, to.shiftY, e), }; }, }); } /** Previous or next, wrapping at the ends. */ function step(by: number) { if (!layout || focused < 0) return; const n = layout.slots.length; open((focused + by + n) % n); } /** Back to the wall. The shoe stays lit until the end. */ function close() { if (!layout || focused < 0) return; const index = focused; const slot = layout.slots[index]; const to = toGoal(restPose(layout, cssW, cssH, scrollY, detailTop)); focused = -1; frameInfo = null; dimTarget = 0; lookTargetX = lookTargetY = 0; closerTarget = { zoom: 1, u: 0.5, v: 0.5, omega: 8 }; if (reduced) { closer.zoom.x = 1; pose.x.x = to.x; pose.y.x = to.y; pose.logD.x = to.logD; pose.shiftX.x = to.shiftX; pose.shiftY.x = to.shiftY; pose.x.v = pose.y.v = pose.logD.v = pose.shiftX.v = pose.shiftY.v = 0; dim.x = 0; goal = to; path = null; for (const s of shelves) { s.exposure.x = lighting.shoeExposure; s.mip.x = 0; s.amount.x = 0; s.level.x = 0; } options.onHome?.(); wake(); return; } const cx = slot.card.x + slot.card.w / 2; const cy = slot.slab.y - slot.card.h * 0.4; shelves[index].levelTarget = 1; startPath({ t0: now(), delay: 40, duration: 800, at: anchoredPath(cx, cy, to, backEase, -6, 0), mark: { u: 0.82, done: false, run: () => { shelves[index].levelTarget = 0; options.onHome?.(); }, }, }); } /** The pointer, in CSS pixels. The torch follows it. In focus it also moves the camera a little. */ function pointer(x: number, y: number) { if (!layout) return; const g = currentGoal(); const f = focalLength(cssW); const k = f / (SHOE_Z + Math.exp(g.logD)); torchTargetX = g.x + (x - cssW / 2 - (g.shiftX * cssW) / 2) / k; torchTargetY = g.y + (y - cssH / 2 + (g.shiftY * cssH) / 2) / k; torchTargetOn = hasTorch ? 1 : 0; if (focused >= 0) { lookTargetX = Math.max(-1, Math.min(1, (x / cssW) * 2 - 1)); lookTargetY = Math.max(-1, Math.min(1, (y / cssH) * 2 - 1)); } wake(); } function pointerLeft() { torchTargetOn = 0; lookTargetX = lookTargetY = 0; wake(); } /** On a phone the page's own scrolling carries the camera down the wall. Nothing is hijacked. */ function setScroll(y: number) { scrollY = y; if (focused >= 0 || !layout || cssW >= TALL_WIDTH) return; const g = toGoal(restPose(layout, cssW, cssH, y, detailTop)); if (!path) { goal = g; // The page has already moved: the room moves with it in the same frame, with no spring behind it. pose.y.x = g.y; pose.y.v = 0; wake(); } } /** The strip brightens once: an answer to a click that needs one. */ function pulse(index: number) { if (!shelves[index]) return; shelves[index].pulse.x = 1; wake(); } /** The bag opens or closes: the world steps back with it. */ function setBag(open: boolean) { bagTarget = open ? 1 : 0; wake(); } /** Closer on the shoe in focus: u and v are where on its card, zoom is how close. Zoom 1 is the full view. */ function closerLook(zoom: number, u = 0.5, v = 0.5, omega = 7) { closerTarget = { zoom, u, v, omega }; wake(); } /** Where the focused shoe stands on screen at its full view: for placing the title and the views. */ function focusBox(index: number) { if (!layout) return null; const slot = layout.slots[index]; const frame = focusFrame(slot, cssW, cssH, rtl, detailTop); const g = toGoal(frame.pose); const [x0, y0] = screenOf(slot.card.x, slot.card.y, g); const [x1, y1] = screenOf(slot.card.x + slot.card.w, slot.slab.y, g); return { x0, y0, x1, y1, panelLeft: frame.panelLeft * cssW }; } /** The screen rectangle of a shelf, through the present camera: for hit tests and for placing real links. */ function shelfRect(index: number) { const slot = layout!.slots[index]; const g = currentGoal(); const [x0, y0] = screenOf(slot.card.x, slot.card.y, g); const [x1, y1] = screenOf(slot.card.x + slot.card.w, slot.slab.y + SLAB.thick + 10, g); return { x0, y0, x1, y1 }; } function pick(x: number, y: number): number { if (!layout) return -1; for (let i = 0; i < layout.slots.length; i++) { const r = shelfRect(i); if (x >= r.x0 && x <= r.x1 && y >= r.y0 && y <= r.y1) return i; } return -1; } function advance(t: number, dtMs: number): boolean { const dt = Math.min(dtMs, 50) / 1000; let moving = false; if (path) { const u = Math.max(0, Math.min(1, (t - path.t0 - path.delay) / path.duration)); goal = withCarry(path.at(u), t); if (path.mark && !path.mark.done && u >= path.mark.u) { path.mark.done = true; path.mark.run(); } moving = true; // Stay on the path until the carried speed has died away, so that leaving it changes nothing. if (u >= 1 && t - carry.t0 > 1400) { goal = path.at(1); path = null; } } critical(pose.x, goal.x, POSE_OMEGA, dt); critical(pose.y, goal.y, POSE_OMEGA, dt); critical(pose.logD, goal.logD, POSE_OMEGA, dt); critical(pose.shiftX, goal.shiftX, POSE_OMEGA, dt); critical(pose.shiftY, goal.shiftY, POSE_OMEGA, dt); if ( !settled(pose.x, goal.x, 0.01, 0.2) || !settled(pose.y, goal.y, 0.01, 0.2) || !settled(pose.logD, goal.logD, 0.00002, 0.001) || !settled(pose.shiftX, goal.shiftX, 0.00005, 0.001) || !settled(pose.shiftY, goal.shiftY, 0.00005, 0.001) ) { moving = true; } // The room dims a little after the click, not with it. const wantDim = dimTarget > 0 && t - focusSince < 100 ? dim.x : dimTarget; critical(dim, wantDim, DIM_OMEGA, dt); if (!settled(dim, wantDim, 0.0005, 0.002)) moving = true; if (Math.abs(daySpring.x - dayTarget) > 0.0005 || Math.abs(daySpring.v) > 0.002) { critical(daySpring, dayTarget, 8, dt); day = Math.max(0, Math.min(1, daySpring.x)); lighting = lightingAt(day); moving = true; } critical(bag, bagTarget, bagTarget ? 9 : 11, dt); if (!settled(bag, bagTarget, 0.001, 0.005)) moving = true; critical(closer.zoom, closerTarget.zoom, closerTarget.omega, dt); critical(closer.u, closerTarget.u, closerTarget.omega, dt); critical(closer.v, closerTarget.v, closerTarget.omega, dt); if ( !settled(closer.zoom, closerTarget.zoom, 0.0006, 0.004) || !settled(closer.u, closerTarget.u, 0.0004, 0.002) || !settled(closer.v, closerTarget.v, 0.0004, 0.002) ) { moving = true; } critical(lookX, lookTargetX, LOOK_OMEGA, dt); critical(lookY, lookTargetY, LOOK_OMEGA, dt); if (!settled(lookX, lookTargetX, 0.0008, 0.004) || !settled(lookY, lookTargetY, 0.0008, 0.004)) moving = true; critical(torchX, torchTargetX, TORCH_OMEGA, dt); critical(torchY, torchTargetY, TORCH_OMEGA, dt); critical(torchOn, torchTargetOn, 5, dt); if (torchOn.x > 0.002 || torchTargetOn > 0) { if (!settled(torchX, torchTargetX, 0.1, 0.8) || !settled(torchY, torchTargetY, 0.1, 0.8)) moving = true; } if (!settled(torchOn, torchTargetOn, 0.002, 0.01)) moving = true; if (layout) { const L = lighting; for (let i = 0; i < layout.slots.length; i++) { const s = shelves[i]; const isFocus = i === focused; const isHover = i === hovered && focused < 0; if (s.pulse.x > 0.002) { critical(s.pulse, 0, 5.5, dt); moving = true; } const lit = isFocus || isHover || s.levelTarget > 0; const levelGoal = lit ? 1 : 0; if (levelGoal > s.level.x) { if (reduced) critical(s.level, levelGoal, 24, dt); else underdamped(s.level, levelGoal, 17, 0.84, dt); } else critical(s.level, levelGoal, 11, dt); const exposureGoal = isFocus ? 1 : dimTarget > 0 ? mix(0.3, 0.86, day) : isHover ? mix(0.98, 1, day) : L.shoeExposure; critical(s.exposure, exposureGoal, 7, dt); const mipGoal = dimTarget > 0 && !isFocus ? 1.6 : 0; critical(s.mip, mipGoal, 6, dt); const amountGoal = dimTarget > 0 && !isFocus ? 1 : 0; critical(s.amount, amountGoal, 7, dt); // The larger picture fades in once it is on the GPU, and a lost one simply never comes. const largeGoal = engine.largeReady(i) ? 1 : 0; if (largeGoal === 0) { s.large.x = 0; s.large.v = 0; } else { critical(s.large, 1, 9, dt); if (!settled(s.large, 1, 0.002, 0.01)) moving = true; } if ( !settled(s.level, levelGoal, 0.0015, 0.01) || !settled(s.exposure, exposureGoal, 0.001, 0.005) || !settled(s.mip, mipGoal, 0.004, 0.02) || !settled(s.amount, amountGoal, 0.002, 0.01) ) { moving = true; } } } // One upload step a frame, and none during a walk: the walk never waits for a picture. if (!path && engine.pumpUpload()) moving = true; return moving; } /** Larger pictures for this shoe and those next to it. Far ones are let go. */ function preload(index: number) { if (!layout) return; const n = layout.slots.length; const near = (i: number, centre: number) => { const d = Math.abs(i - centre); return Math.min(d, n - d) <= 1; }; const centre = focused >= 0 ? focused : index; const limit = options.small ? 3 : 5; let held = 0; for (let i = 0; i < n; i++) if (engine.largeReady(i)) held++; if (held >= limit) engine.keepLarge((i) => near(i, centre) || near(i, index)); for (const k of [index, (index + 1) % n, (index - 1 + n) % n]) { void engine.requestLarge(k).then((arrived) => { if (arrived) wake(); }); } } function buildState(): RoomState { const d = dim.x; const g = currentGoal(); const p = toPose(g); // Looking around in focus: the camera slides and a lens shift holds the shoe still, so only the wall and slab // move behind it. The photograph is never seen at an angle it does not have. const dist = Math.exp(g.logD); const f = focalLength(cssW); const k = f / dist; const reach = Math.tan((LOOK_DEGREES * Math.PI) / 180) * dist * d; // Closer on the shoe: the same card, scaled about a chosen point. The camera comes forward; nothing is enlarged // beyond what the picture holds, because the caller sets the limit per shoe. if (closer.zoom.x > 1.0005 && focused >= 0 && layout) { const card = layout.slots[focused].card; const zoom = closer.zoom.x; const px = card.x + closer.u.x * card.w; const py = card.y + closer.v.x * card.h; const centreX = card.x + card.w / 2; const centreY = layout.slots[focused].slab.y - card.h * 0.42; const [sx, sy] = screenOf(centreX, centreY, g); const dist1 = dist / zoom; const k1 = f / dist1; p.z = SHOE_Z + dist1; p.x = px - (sx - cssW / 2 - (p.shiftX * cssW) / 2) / k1; p.y = py - (sy - cssH / 2 + (p.shiftY * cssH) / 2) / k1; } const dx = lookX.x * reach; const dy = lookY.x * reach * 0.6; p.x += dx; p.shiftX += (dx * k * 2) / cssW; p.y += dy; p.shiftY -= (dy * k * 2) / cssH; for (let i = 0; i < shelves.length; i++) { const s = shelves[i]; const st = shoeStates[i]; st.level = Math.max(0, s.level.x) + s.pulse.x * 0.75; st.exposure = s.exposure.x; st.mipBias = Math.max(0, s.mip.x) + bag.x * 2.6; st.panelAmount = Math.max(0, Math.min(1, s.amount.x)); st.fade = 1; st.largeMix = Math.min(1, Math.max(0, s.large.x)); } return { lighting, pose: p, shoes: shoeStates, panelFade, ambientScale: mix(1, mix(0.74, 1.72, day), d), keyScale: mix(1, mix(0.07, 0.12, day), d), reliefScale: 1, mapBias: 1.1 * d + bag.x * 2.0, worldDim: mix(1, mix(0.42, 0.78, day), bag.x), detailScale: mix(1, 4.5, d), torch: { x: torchX.x, y: torchY.x, power: lighting.torchPower * Math.max(0, torchOn.x) * mix(1, 0.7, d) }, }; } function render(t: number, dtMs: number, moving: boolean) { if (!layout) return; const state = buildState(); drawnThisFrame = engine.frame(layout, cssW, cssH, dpr, state, stillIndex); options.onFrame?.({ t, dt: dtMs, pose: state.pose, drawCalls: drawnThisFrame, still: stillIndex, moving }); } function step1(t: number) { const dtMs = lastT ? t - lastT : 16.7; lastT = t; // A hidden tab or a long stall pauses the walk. It carries on from where it was, rather than jumping ahead. if (dtMs > 120) { const paused = dtMs - 16.7; if (path) path.t0 += paused; carry.t0 += paused; } const moving = advance(t, dtMs); if (moving) { forced = false; stillIndex = -1; render(t, dtMs, true); return true; } // At rest: build one still over a few frames, then draw nothing at all. if (forced || stillIndex < 0) { forced = false; stillIndex = 0; } if (stillIndex < STILL_FRAMES) { render(t, dtMs, false); stillIndex++; return true; } return false; } function tick(t: number) { scheduled = false; if (paused) return; if (step1(t)) schedule(); else lastT = 0; // the next wake starts a fresh clock: no huge first step } /** * A worker's animation frames keep coming in a hidden tab, so the page says when it is hidden. The next frame after * coming back looks like a long gap, and a long gap pauses the walk rather than jumping it. */ function setVisible(visible: boolean) { paused = !visible; if (visible) schedule(); } /** The context has gone: stop asking it for anything. */ function stop() { manual = true; } return { preload, setVisible, stop, setLayout, setTheme, hover, open, close, step, pointer, pointerLeft, pick, shelfRect, get focused() { return focused; }, /** Something outside changed, such as a larger texture arriving: draw again. */ wake, setScroll, pulse, setBag, closerLook, focusBox, levels() { return shelves.map((s) => s.level.x); }, /** For frame-by-frame proofs: stop the loop and advance by hand. */ manualStep(t: number) { manual = true; return step1(t); }, }; } export type Room = ReturnType; 70:T48e,// The room's own thread: context, shaders, pictures and every frame, so the page's main thread never waits for them. // Typed without the "webworker" lib, so a project's own TypeScript setup never has to include it. import { createHost, type HostInit, type HostMethod } from "./host"; type Message = { type: "init"; canvas: OffscreenCanvas; init: HostInit } | { type: "call"; method: HostMethod; args: unknown[] }; type Scope = { postMessage(message: unknown): void; onmessage: ((e: { data: Message }) => void) | null }; const scope = self as unknown as Scope; let host: ReturnType | null = null; scope.onmessage = ({ data }) => { if (data.type === "init") host = createHost(data.canvas, data.init, (event) => scope.postMessage(event), "worker"); else host?.call(data.method, data.args); }; // Asked before the page hands its canvas over, because a canvas handed over cannot be taken back. let ok = typeof requestAnimationFrame === "function" && typeof OffscreenCanvas === "function"; if (ok) { try { ok = !!new OffscreenCanvas(1, 1).getContext("webgl2"); } catch { ok = false; } } scope.postMessage({ type: "hello", ok }); 71:T8a9,import type { Shoe, ShoePhoto, ShoeSize } from "./types"; type Money = { amount: string; currencyCode: string }; type Variant = { id: string; quantityAvailable?: number | null; availableForSale?: boolean; price: Money; compareAtPrice?: Money | null; selectedOptions: { name: string; value: string }[]; }; type Product = { id: string; handle: string; title: string; description?: string; productType?: string; featuredImage?: { url: string; width?: number; height?: number; altText?: string | null } | null; variants: { edges: { node: Variant }[] } | { nodes: Variant[] }; }; export type FromShopifyOptions = { /** The option that holds the size. "Size" if left out. */ sizeOption?: string; href?: (handle: string) => string; /** * The room needs transparent, side-view pictures. Most shops do not have them, so this is where yours come in: * run your photographs through scripts/photos and return the result per handle. */ photo: (product: Product) => ShoePhoto; }; /** A plain mapper from a Storefront API response to shoes. It makes no network calls. */ export function fromShopifyProducts(products: Product[], options: FromShopifyOptions): Shoe[] { const sizeName = (options.sizeOption ?? "Size").toLowerCase(); return products.map((p) => { const variants = "nodes" in p.variants ? p.variants.nodes : p.variants.edges.map((e) => e.node); const sizes: ShoeSize[] = variants.map((v) => { const option = v.selectedOptions.find((o) => o.name.toLowerCase() === sizeName); const stock = v.quantityAvailable ?? (v.availableForSale === false ? 0 : 1); return { eu: option?.value ?? v.id, stock: Math.max(0, stock), variantId: v.id }; }); const first = variants[0]; return { id: p.id, slug: p.handle, href: options.href ? options.href(p.handle) : `/products/${p.handle}`, name: p.title, series: p.productType, description: p.description, price: first ? Number(first.price.amount) : 0, compareAtPrice: first?.compareAtPrice ? Number(first.compareAtPrice.amount) : undefined, currency: first?.price.currencyCode ?? "USD", photo: options.photo(p), sizes, }; }); } 72:Tc69,"use client"; import { useEffect, useRef, type KeyboardEvent } from "react"; import type { ShoeSize } from "./types"; export type SizeUnit = "eu" | "us" | "uk"; export function sizeLabel(size: ShoeSize, unit: SizeUnit): string { return (unit === "us" ? size.us : unit === "uk" ? size.uk : size.eu) ?? size.eu; } export type SizeTilesProps = { sizes: ShoeSize[]; value: string | null; unit: SizeUnit; onChange: (eu: string) => void; label: string; soldOutLabel: string; /** One soft pulse when somebody needs to choose first. Change the number to play it. */ pulse?: number; }; /** Sizes as a radio group, in the room's own material. Sold out stays visible, struck through, never selectable. */ export function SizeTiles({ sizes, value, unit, onChange, label, soldOutLabel, pulse = 0 }: SizeTilesProps) { const refs = useRef<(HTMLButtonElement | null)[]>([]); const group = useRef(null); // A pulse must not remount the tiles: that would take the keyboard's focus away with them. useEffect(() => { if (pulse > 0) group.current?.animate([{ transform: "none" }, { transform: "translate3d(0,-2px,0) scale(1.012)", offset: 0.4 }, { transform: "none" }], { duration: 500, easing: "cubic-bezier(0.22,0.8,0.24,1)" }); }, [pulse]); const firstOpen = sizes.findIndex((s) => s.stock > 0); const current = sizes.findIndex((s) => s.eu === value); const tabStop = current >= 0 ? current : firstOpen; function onKeyDown(e: KeyboardEvent, i: number) { const keys: Record = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }; const by = keys[e.key]; if (!by) return; e.preventDefault(); const n = sizes.length; for (let step = 1; step <= n; step++) { const k = (i + by * step + n * step) % n; if (sizes[k].stock > 0) { refs.current[k]?.focus(); onChange(sizes[k].eu); return; } } } return (

{sizes.map((size, i) => { const out = size.stock <= 0; const on = size.eu === value; const text = sizeLabel(size, unit); return ( ); })}

); } 73:T860,// Springs for everything that moves. A spring carries its velocity, so any new target continues from exactly // where it is: nothing ever snaps. Exact solutions, so a slow frame cannot make them unstable. export type Spring = { x: number; v: number }; /** Critically damped: reaches the target with no overshoot. */ export function critical(s: Spring, target: number, omega: number, dt: number): void { const e = Math.exp(-omega * dt); const delta = s.x - target; const tmp = (s.v + omega * delta) * dt; s.x = target + (delta + tmp) * e; s.v = (s.v - omega * tmp) * e; } /** Under-damped: a small overshoot, set by zeta below 1. */ export function underdamped(s: Spring, target: number, omega: number, zeta: number, dt: number): void { const wd = omega * Math.sqrt(1 - zeta * zeta); const e = Math.exp(-zeta * omega * dt); const c = Math.cos(wd * dt); const sn = Math.sin(wd * dt); const delta = s.x - target; const a = delta; const b = (s.v + zeta * omega * delta) / wd; s.x = target + e * (a * c + b * sn); s.v = e * ((-zeta * omega) * (a * c + b * sn) + wd * (-a * sn + b * c)); } export function settled(s: Spring, target: number, epsX: number, epsV: number): boolean { return Math.abs(s.x - target) < epsX && Math.abs(s.v) < epsV; } const clamp01 = (u: number) => (u < 0 ? 0 : u > 1 ? 1 : u); /** A cubic bezier from (0,0) to (1,1), sampled once into a table, so reading it costs nothing per frame. */ export function sampledEase(x1: number, y1: number, x2: number, y2: number, n = 96): (u: number) => number { const table = new Float32Array(n + 1); const bez = (t: number, a: number, b: number) => 3 * (1 - t) * (1 - t) * t * a + 3 * (1 - t) * t * t * b + t * t * t; for (let i = 0; i <= n; i++) { const x = i / n; let lo = 0; let hi = 1; for (let k = 0; k < 24; k++) { const t = (lo + hi) / 2; if (bez(t, x1, x2) < x) lo = t; else hi = t; } table[i] = bez((lo + hi) / 2, y1, y2); } return (u: number) => { const p = clamp01(u) * n; const i = Math.min(n - 1, Math.floor(p)); return table[i] + (table[i + 1] - table[i]) * (p - i); }; } 74:Tc80,import type { ReactNode } from "react"; export type ShoePhoto = { src: string; srcSet?: string; /** About 2000 px, for focus. */ large: string; width: number; height: number; /** 0..1 from the top: where the sole meets the slab. */ baseline: number; /** 0..1 across: the part of the sole touching it. */ contact: [number, number]; lqip?: string; alt: string; /** The blurred-alpha chain that soft shadows read. `scripts/photos` makes it. */ shadow?: { file: string; pad: number; rects: number[][] }; /** How close the zoom may go before the picture turns soft. 1 means no zoom. */ maxZoom?: number; }; export type ShoeView = { label: string; x: number; y: number; zoom: number }; export type ShoeSize = { eu: string; us?: string; uk?: string; stock: number; variantId?: string; }; export type Shoe = { id: string; slug: string; href: string; name: string; series?: string; colourName?: string; price: number; compareAtPrice?: number; currency: string; photo: ShoePhoto; views?: ShoeView[]; ledColor?: string; /** Text colour that passes contrast on ledColor. Worked out if left out. */ ledInk?: string; sizes: ShoeSize[]; description?: string; returnsNote?: string; }; export type BagLine = { key: string; shoeId: string; name: string; image: string; sizeLabel: string; eu: string; variantId?: string; price: number; currency: string; ledColor: string; qty: number; }; export type FloodlitLabels = { /** Names the whole component for screen readers. */ room: string; backToWall: string; hint: string; hintTouch: string; chooseSize: string; addToBag: string; adding: string; inBag: string; addAnother: string; couldNotAdd: string; viewBag: string; size: string; soldOut: string; onlyLeft: (n: number) => string; yourSize: string; chooseSizeFirst: string; materialsAndFit: string; previous: string; next: string; nowViewing: (name: string) => string; addedLive: (name: string) => string; zoomIn: string; zoomOut: string; yourBag: string; bagEmpty: string; backToRoom: string; subtotal: string; checkout: string; remove: string; closeBag: string; increase: string; decrease: string; demoLine: string | null; }; export type FloodlitProps = { shoes: Shoe[]; wall?: { albedo: string; normal: string; detail?: string; noise?: string }; theme?: "auto" | "light" | "dark"; ledMode?: "shoe" | "brand"; ledColor?: string; openSlug?: string | null; defaultOpenSlug?: string | null; onOpenChange?: (slug: string | null) => void; syncUrl?: boolean | { param: string }; heading?: ReactNode; eyebrow?: ReactNode; detailTop?: number; bag?: BagLine[]; bagOpen?: boolean; onBagOpenChange?: (open: boolean) => void; onAddToBag?: (shoe: Shoe, size: ShoeSize) => void | Promise; onBagChange?: (lines: BagLine[]) => void; onCheckout?: () => void; labels?: Partial; formatPrice?: (amount: number, currency: string) => string; dir?: "ltr" | "rtl"; /** False keeps the room on the page's own thread, for a host whose rules forbid workers. */ worker?: boolean; className?: string; }; 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"components/floodlit/add-to-bag-pill.tsx","content":"$64","type":"registry:component","target":"@components/floodlit/add-to-bag-pill.tsx"},{"path":"components/floodlit/bag-drawer.tsx","content":"$65","type":"registry:component","target":"@components/floodlit/bag-drawer.tsx"},{"path":"components/floodlit/camera.ts","content":"$66","type":"registry:component","target":"@components/floodlit/camera.ts"},{"path":"components/floodlit/client.ts","content":"$67","type":"registry:component","target":"@components/floodlit/client.ts"},{"path":"components/floodlit/engine.ts","content":"$68","type":"registry:component","target":"@components/floodlit/engine.ts"},{"path":"components/floodlit/floodlit.css","content":"$69","type":"registry:file","target":"@components/floodlit/floodlit.css"},{"path":"components/floodlit/floodlit.tsx","content":"$6a","type":"registry:component","target":"@components/floodlit/floodlit.tsx"},{"path":"components/floodlit/gl/shaders.ts","content":"$6b","type":"registry:component","target":"@components/floodlit/gl/shaders.ts"},{"path":"components/floodlit/host.ts","content":"$6c","type":"registry:component","target":"@components/floodlit/host.ts"},{"path":"components/floodlit/index.ts","content":"export { Floodlit, default } from \"./floodlit\";\nexport { SizeTiles, type SizeUnit } from \"./size-tiles\";\nexport { AddToBagPill, type PillState } from \"./add-to-bag-pill\";\nexport { BagDrawer } from \"./bag-drawer\";\nexport { fromShopifyProducts } from \"./shopify\";\nexport type { BagLine, FloodlitLabels, FloodlitProps, Shoe, ShoePhoto, ShoeSize, ShoeView } from \"./types\";\n","type":"registry:component","target":"@components/floodlit/index.ts"},{"path":"components/floodlit/layout.ts","content":"$6d","type":"registry:component","target":"@components/floodlit/layout.ts"},{"path":"components/floodlit/lighting.ts","content":"$6e","type":"registry:component","target":"@components/floodlit/lighting.ts"},{"path":"components/floodlit/room.ts","content":"$6f","type":"registry:component","target":"@components/floodlit/room.ts"},{"path":"components/floodlit/room.worker.ts","content":"$70","type":"registry:component","target":"@components/floodlit/room.worker.ts"},{"path":"components/floodlit/shopify.ts","content":"$71","type":"registry:component","target":"@components/floodlit/shopify.ts"},{"path":"components/floodlit/size-tiles.tsx","content":"$72","type":"registry:component","target":"@components/floodlit/size-tiles.tsx"},{"path":"components/floodlit/spring.ts","content":"$73","type":"registry:component","target":"@components/floodlit/spring.ts"},{"path":"components/floodlit/types.ts","content":"$74","type":"registry:component","target":"@components/floodlit/types.ts"}],"className":"h-[70svh] min-h-80"}]]}]