@3driseai/3drise-viewer 0.1.40 → 0.1.41

package/dist/components/gallery/looks/basicCarousel.js

@@ -0,0 +1,315 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// carousel.mjs). Plain JS-shaped code (the viewer compiles non-strict); typed at its one door, kit/GalleryVariant.tsx. Its own DEFAULTS only fill knobs the
+// core defaults (DEFAULT_GALLERY_OBJECTS.basicCarousel) do not carry; its own autoplay is never used.
+// carousel — a gallery variant for 3drise (type 'gallery', config.type 'carousel').
+//
+// Construction: the pictures sit on a conveyor of frames, one InstancedMesh (+ its
+// reflection, a second draw). One number drives everything — the scroll position
+// `s`, a float index — and every frame's place is a function of its offset
+// d = i - s (wrapped, so the set is a ring): position along an arc that blends
+// from a flat row to a circle (`curve`), a coverflow yaw toward the centre
+// (`tilt`) growing with |d|, recession in depth, a lift + scale for the frame at
+// d ≈ 0 (`focusScale`, `focusLift`), dimming and fade-out with distance. `s`
+// is a damped spring toward the target index: next/prev/goTo set the target; a
+// drag moves `s` directly and the release velocity throws it, then it snaps to
+// the nearest frame — so motion is one continuous law, never a tween per frame.
+// Idle: a slow breathing float with a phase per frame (zero net motion).
+// The cursor: `tilt` yaws the nearby frames toward it, `lift` raises the frame
+// under it; nothing is drawn at the cursor. Clicking the centre frame focuses it
+// (it comes forward); clicking a neighbour scrolls to it.
+import * as THREE from 'three';
+import { withLean } from '../kit/galleryKit.js';
+export const catalog = {
+    key: 'carousel',
+    name: 'Carousel',
+    description: 'A coverflow ring of framed pictures driven by one damped scroll position — next, prev, drag with inertia and snap, a lifted focus frame and a floor reflection; the cursor tilts or lifts the frames. Use for portfolios, product lines, photo showcases.',
+    tags: ['gallery', 'carousel', 'coverflow', 'ring', 'reflection', 'navigation', 'interactive'],
+    camera: { position: [0, 0.35, 4.6], target: [0, -0.1, 0] },
+};
+export const DEFAULTS = {
+    type: 'carousel',
+    enabled: true, lean: 1,
+    imageUrls: [],
+    autoplay: 0,
+    intensity: 1,
+    opacity: 1,
+    // --- structural ---
+    aspect: 1.5, // frame width / height
+    frameWidth: 1.6, // width of a frame (gallery units)
+    // --- layout ---
+    spacing: 1.15, // distance between neighbours, in frame widths
+    curve: 0.6, // 0 = flat row, 1 = a circle
+    tilt: 0.95, // coverflow yaw of the neighbours (rad)
+    depth: 0.9, // how far neighbours recede
+    visible: 3.2, // frames each side before they fade out
+    focusScale: 1.25, // scale of the centre frame
+    focusLift: 0.35, // how far the centre frame comes forward
+    focusAmount: 0.8, // extra forward travel when the centre frame is clicked (focused)
+    dim: 0.55, // darkening of the neighbours
+    // --- motion ---
+    stiffness: 60, // spring toward the target (1/s²)
+    damping: 12, // spring damping (1/s)
+    throwing: 0.18, // how far a drag release throws (s of velocity)
+    breathe: 0.5, // idle float
+    // --- look ---
+    reflection: 0.45,
+    floorGap: 0.12,
+    border: 0.02, // frame border, in frame units
+    borderColor: '#f3e6cf',
+    backColor: '#1a1d26',
+    // --- pointer ---
+    pointerMode: 'tilt',
+    pointerStrength: 1,
+    pointerRadius: 1.6,
+    pointerColor: '#ffd9a6',
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'frameWidth'];
+export const POINTER_MODES = ['tilt', 'lift'];
+export const GUI = [
+    { key: 'lean', min: 0, max: 3, step: 0.01, tip: 'The gallery turns toward the cursor' },
+    { key: 'aspect', min: 0.5, max: 2.5, step: 0.01, tip: 'Frame width / height (rebuild)' },
+    { key: 'frameWidth', min: 0.5, max: 3, step: 0.01, tip: 'Frame width (rebuild)' },
+    { key: 'spacing', min: 0.4, max: 2.5, step: 0.01 }, { key: 'curve', min: 0, max: 1, step: 0.01 }, { key: 'tilt', min: 0, max: 1.5, step: 0.01 },
+    { key: 'depth', min: 0, max: 2, step: 0.01 }, { key: 'visible', min: 1, max: 8, step: 0.1 },
+    { key: 'focusScale', min: 1, max: 2, step: 0.01 }, { key: 'focusLift', min: 0, max: 1.5, step: 0.01 }, { key: 'focusAmount', min: 0, max: 3, step: 0.01 }, { key: 'dim', min: 0, max: 1, step: 0.01 },
+    { key: 'stiffness', min: 5, max: 200, step: 1 }, { key: 'damping', min: 2, max: 40, step: 0.1 }, { key: 'throwing', min: 0, max: 0.6, step: 0.01 }, { key: 'breathe', min: 0, max: 2, step: 0.01 },
+    { key: 'reflection', min: 0, max: 1, step: 0.01 }, { key: 'floorGap', min: 0, max: 0.6, step: 0.01 }, { key: 'border', min: 0, max: 0.08, step: 0.001 },
+    { key: 'autoplay', min: 0, max: 20, step: 0.5 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, { key: 'pointerStrength', min: 0, max: 3, step: 0.01 }, { key: 'pointerRadius', min: 0.2, max: 4, step: 0.01 },
+    { key: 'intensity', min: 0, max: 2, step: 0.01 }, { key: 'opacity', min: 0, max: 1, step: 0.01 },
+    { key: 'borderColor', color: true }, { key: 'backColor', color: true }, { key: 'pointerColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Coverflow', description: 'The default: a tilted ring with a lifted centre.', patch: {} },
+    { name: 'Flat row', description: 'A straight strip, no tilt, soft focus.', patch: { curve: 0, tilt: 0, depth: 0.3, spacing: 1.08, focusScale: 1.12, focusLift: 0.15, dim: 0.35, reflection: 0.3 } },
+    { name: 'Wheel', description: 'A tight circle: the neighbours wrap away behind.', patch: { curve: 1, tilt: 0.2, depth: 2, spacing: 0.8, visible: 5, focusScale: 1.15, focusLift: 0.25, dim: 0.7 } },
+    { name: 'Deck', description: 'Frames stacked close, heavy tilt, quick snap.', patch: { spacing: 0.45, tilt: 1.3, depth: 1.2, curve: 0.2, focusScale: 1.3, dim: 0.65, stiffness: 120, damping: 16 } },
+];
+function col(c) { return new THREE.Color(c); }
+const smooth = (a, b, x) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); };
+export function createUniforms() {
+    return {
+        uTex: { value: null },
+        uBorder: { value: 0.02 }, uBorderColor: { value: col('#f3e6cf') }, uBackColor: { value: col('#1a1d26') },
+        uPointerColor: { value: col('#ffd9a6') },
+        uIntensity: { value: 1 }, uOpacity: { value: 1 }, uReflection: { value: 0.45 }, uAspect: { value: 1.5 },
+    };
+}
+export function applyConfig(u, c) {
+    const set = (k, v) => { if (v === undefined)
+        return; if (u[k].value && u[k].value.isColor) {
+        if (v.isColor)
+            u[k].value.copy(v);
+        else
+            u[k].value.set(v);
+    }
+    else
+        u[k].value = v; };
+    set('uBorder', c.border);
+    set('uBorderColor', c.borderColor);
+    set('uBackColor', c.backColor);
+    set('uPointerColor', c.pointerColor);
+    set('uIntensity', c.intensity);
+    set('uOpacity', c.opacity);
+    set('uReflection', c.reflection);
+}
+const fragHead = /* glsl */ `
+    layout(location = 0) out highp vec4 pc_fragColor;
+    #define gl_FragColor pc_fragColor
+`;
+const vert = /* glsl */ `
+    attribute float aIdx;
+    attribute vec4 aState;   // focus, alpha, hover, dim
+    varying vec2 vUv; varying float vLayer; varying vec4 vState; varying vec3 vN; varying vec3 vV; varying float vBack;
+    void main(){
+        vUv = uv; vLayer = aIdx; vState = aState;
+        vec4 wp = instanceMatrix * vec4(position, 1.0);
+        vec4 mv = modelViewMatrix * wp;
+        vN = normalize(normalMatrix * mat3(instanceMatrix) * vec3(0.0, 0.0, 1.0));
+        vV = -mv.xyz;
+        gl_Position = projectionMatrix * mv;
+    }
+`;
+const frag = (reflect) => /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    uniform float uBorder, uIntensity, uOpacity, uReflection, uAspect;
+    uniform vec3 uBorderColor, uBackColor, uPointerColor;
+    varying vec2 vUv; varying float vLayer; varying vec4 vState; varying vec3 vN; varying vec3 vV;
+    void main(){
+        float focus = vState.x, alpha = vState.y, hover = vState.z, dim = vState.w;
+        bool front = ${reflect ? '!gl_FrontFacing' : 'gl_FrontFacing'};   // the mirrored copy has its winding flipped
+        vec3 c = front ? texture(uTex, vec3(vUv, vLayer)).rgb : uBackColor;
+        // border: a thin frame, brighter on the focused / hovered one
+        vec2 e = min(vUv, 1.0 - vUv) * vec2(1.0, uAspect);
+        float dm = min(e.x, e.y);
+        float fw = fwidth(dm) * 1.5;
+        float border = 1.0 - smoothstep(uBorder, uBorder + fw, dm);
+        vec3 bc = mix(uBorderColor * (0.45 + 0.55 * focus), uPointerColor, hover * 0.8);
+        c = mix(c, bc, border);
+        // neighbours dim; a soft lambert on the yawed faces so the ring reads as 3d
+        vec3 N = normalize(vN); vec3 V = normalize(vV);
+        float lam = 0.78 + 0.22 * max(dot(N, V), 0.0);
+        c *= lam * (1.0 - dim) + hover * 0.1;
+        float a = alpha * uOpacity;
+        ${reflect ? 'a *= uReflection * pow(1.0 - vUv.y, 1.6) * 0.8; c *= 0.85;' : ''}
+        if (a < 0.003) discard;
+        gl_FragColor = vec4(c * uIntensity * a, a);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+// ---------------------------------------------------------------- images (shared with shards: cover-fit array texture)
+export const TEX_W = 1024;
+// ---------------------------------------------------------------- build
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const MAX = 32;
+    const fw = c.frameWidth, fh = c.frameWidth / c.aspect;
+    u.uAspect.value = c.aspect;
+    const geo = new THREE.PlaneGeometry(fw, fh);
+    const aIdx = new Float32Array(MAX);
+    for (let i = 0; i < MAX; i++)
+        aIdx[i] = i;
+    geo.setAttribute('aIdx', new THREE.InstancedBufferAttribute(aIdx, 1));
+    const state = new Float32Array(MAX * 4);
+    const aState = new THREE.InstancedBufferAttribute(state, 4);
+    aState.setUsage(THREE.DynamicDrawUsage);
+    geo.setAttribute('aState', aState);
+    const mat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: vert, fragmentShader: frag(false), glslVersion: THREE.GLSL3, side: THREE.DoubleSide, transparent: true, depthWrite: true, premultipliedAlpha: true });
+    const rmat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: vert, fragmentShader: frag(true), glslVersion: THREE.GLSL3, side: THREE.DoubleSide, transparent: true, depthWrite: false, premultipliedAlpha: true });
+    const frames = new THREE.InstancedMesh(geo, mat, MAX);
+    frames.count = 0;
+    frames.frustumCulled = false;
+    frames.userData.pick = 'frames';
+    const refl = new THREE.InstancedMesh(geo, rmat, MAX);
+    refl.count = 0;
+    refl.frustumCulled = false;
+    refl.raycast = () => { };
+    refl.renderOrder = -1;
+    const object = new THREE.Group();
+    object.add(refl, frames);
+    const st = {
+        count: 0, s: 0, v: 0, target: 0, dragging: false, dragS0: 0, dragX0: 0, lastDx: 0, focused: 0, focusT: 0,
+        time: 0, autoT: 0, hover: -1, hoverT: new Float32Array(MAX), pointer: null,
+        cfg: { ...c },
+    };
+    const M = new THREE.Matrix4(), P = new THREE.Vector3(), Q = new THREE.Quaternion(), S = new THREE.Vector3(), E = new THREE.Euler();
+    const floorY = -fh / 2 - c.floorGap;
+    const wrap = (d, n) => n > 1 ? ((d + n / 2) % n + n) % n - n / 2 : d;
+    function layout(dt) {
+        const k = st.cfg, n = st.count;
+        if (!n)
+            return;
+        const pitch = fw * k.spacing;
+        const gap = k.floorGap;
+        for (let i = 0; i < n; i++) {
+            const d = wrap(i - st.s, n);
+            const ad = Math.abs(d);
+            const w = smooth(0, 1.2, ad); // 0 at the centre, 1 past a neighbour
+            // arc: a flat row bent toward a circle of radius R = pitch * n / 2π
+            const R = Math.max(pitch * n / (2 * Math.PI), pitch * 1.5);
+            const a = (d * pitch) / R;
+            const x = (1 - k.curve) * d * pitch + k.curve * R * Math.sin(a);
+            const zArc = k.curve * (R * Math.cos(a) - R);
+            const z = zArc - k.depth * w * 0.9 * (1 - k.curve) - k.depth * ad * 0.12;
+            const focus = 1 - smooth(0, 0.9, ad);
+            // the focused frame comes forward and up
+            const lift = k.focusLift * focus + st.focusT * k.focusAmount * focus;
+            const yBreathe = k.breathe * 0.025 * Math.sin(st.time * 0.7 + i * 1.9);
+            let yaw = -Math.sign(d) * k.tilt * w - k.curve * a * 0.5;
+            let sc = 1 + (k.focusScale - 1) * focus + st.focusT * 0.15 * focus;
+            // pointer
+            const ht = st.hoverT[i];
+            if (st.pointer && k.pointerMode !== 'none') {
+                const dx = st.pointer.x - x, dy = st.pointer.y - 0;
+                const dist = Math.hypot(dx, dy);
+                const pw = (1 - smooth(0, k.pointerRadius, dist)) * k.pointerStrength;
+                if (k.pointerMode === 'tilt')
+                    yaw += Math.atan2(dx, 2.5) * 0.35 * pw;
+                else
+                    sc *= 1 + 0.08 * ht;
+            }
+            const ly = yBreathe + (k.pointerMode === 'lift' ? 0.12 * ht : 0);
+            P.set(x, ly, z + lift);
+            E.set(0, yaw, 0);
+            Q.setFromEuler(E);
+            S.set(sc, sc, 1);
+            M.compose(P, Q, S);
+            frames.setMatrixAt(i, M);
+            // reflection: mirror across the floor plane y = floorY - gap offset
+            const fy = -fh / 2 - gap;
+            P.set(x, 2 * fy - ly, z + lift);
+            S.set(sc, -sc, 1);
+            M.compose(P, Q, S);
+            refl.setMatrixAt(i, M);
+            const alpha = 1 - smooth(k.visible - 0.8, k.visible, ad);
+            state[i * 4] = focus;
+            state[i * 4 + 1] = alpha;
+            state[i * 4 + 2] = ht;
+            state[i * 4 + 3] = k.dim * w;
+        }
+        frames.count = n;
+        refl.count = n;
+        frames.instanceMatrix.needsUpdate = true;
+        refl.instanceMatrix.needsUpdate = true;
+        aState.needsUpdate = true;
+    }
+    const controls = {
+        next() { st.target = Math.round(st.target) + 1; st.focused = 0; st.autoT = 0; },
+        prev() { st.target = Math.round(st.target) - 1; st.focused = 0; st.autoT = 0; },
+        goTo(i) { const n = st.count; if (!n)
+            return; const cur = ((Math.round(st.s) % n) + n) % n; st.target = Math.round(st.s) + wrap(i - cur, n); st.focused = 0; st.autoT = 0; },
+        jump(i) { st.s = st.target = i; st.v = 0; },
+        focus(on) { st.focused = on === undefined ? 1 - st.focused : (on ? 1 : 0); },
+        get index() { const n = st.count; return n ? ((Math.round(st.s) % n) + n) % n : 0; },
+        get count() { return st.count; },
+        get busy() { return Math.abs(st.target - st.s) > 0.02 || Math.abs(st.v) > 0.05; },
+        setTexture(tex, count) { if (u.uTex.value)
+            u.uTex.value.dispose(); u.uTex.value = tex; st.count = Math.min(count, MAX); layout(0); },
+        /** drag in gallery x units: begin(x) / move(x) / end() — the release velocity throws, then it snaps */
+        dragBegin(x) { st.dragging = true; st.dragS0 = st.s; st.dragX0 = x; st.v = 0; st.lastDx = 0; },
+        dragMove(x) { if (!st.dragging)
+            return; const pitch = fw * st.cfg.spacing; const ns = st.dragS0 - (x - st.dragX0) / pitch; st.lastDx = ns - st.s; st.s = ns; },
+        dragEnd(dt) { if (!st.dragging)
+            return; st.dragging = false; st.v = st.lastDx / Math.max(dt, 1 / 120); st.target = Math.round(st.s + st.v * st.cfg.throwing); st.autoT = 0; },
+        get dragging() { return st.dragging; },
+        hover(i) { st.hover = i; },
+    };
+    object.userData.gallery = controls;
+    return {
+        object, materials: [mat, rmat], controls, frames,
+        apply(cfg) { Object.assign(st.cfg, cfg); applyConfig(u, cfg); },
+        update(dt, pointer) {
+            dt = Math.min(dt, 0.05);
+            st.time += dt;
+            st.pointer = pointer;
+            const k = st.cfg;
+            if (!st.dragging) {
+                // damped spring toward the target index (semi-implicit Euler, substepped)
+                const sub = 4, h = dt / sub;
+                for (let q = 0; q < sub; q++) {
+                    const acc = k.stiffness * (st.target - st.s) - k.damping * st.v;
+                    st.v += acc * h;
+                    st.s += st.v * h;
+                }
+                if (Math.abs(st.target - st.s) < 1e-4 && Math.abs(st.v) < 1e-3) {
+                    st.s = st.target;
+                    st.v = 0;
+                }
+            }
+            if (k.autoplay > 0 && st.count > 1 && !pointer && !st.dragging) {
+                st.autoT += dt;
+                if (st.autoT >= k.autoplay)
+                    controls.next();
+            }
+            st.focusT += ((st.focused ? 1 : 0) - st.focusT) * (1 - Math.exp(-dt * 7));
+            for (let i = 0; i < st.count; i++)
+                st.hoverT[i] += ((st.hover === i ? 1 : 0) - st.hoverT[i]) * (1 - Math.exp(-dt * 9));
+            layout(dt);
+        },
+        dispose() { geo.dispose(); mat.dispose(); rmat.dispose(); if (u.uTex.value)
+            u.uTex.value.dispose(); },
+    };
+}

package/dist/components/gallery/looks/contourLines.d.ts

@@ -0,0 +1,153 @@
+import * as THREE from 'three';
+export declare const catalog: {
+    key: string;
+    name: string;
+    camera: {
+        position: number[];
+        target: number[];
+    };
+    description: string;
+    tags: string[];
+};
+export declare const DEFAULTS: {
+    type: string;
+    aspect: number;
+    width: number;
+    levels: number;
+    sparse: number;
+    lineWidth: number;
+    smoothing: number;
+    changeTime: number;
+    dim: number;
+    pointerMode: string;
+    pointerRadius: number;
+    lift: number;
+    enabled: boolean;
+    lean: number;
+    imageUrls: any[];
+    autoplay: number;
+    intensity: number;
+    opacity: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    wave: number;
+    slant: number;
+    pointerStrength: number;
+};
+export declare const STRUCTURAL: string[];
+export declare const POINTER_MODES: string[];
+export declare const GUI: ({
+    key: string;
+    options: string[];
+    tip: string;
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+} | {
+    key: string;
+    options: string[];
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        levels?: undefined;
+        sparse?: undefined;
+        lineWidth?: undefined;
+        smoothing?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        levels: number;
+        sparse: number;
+        lineWidth: number;
+        smoothing: number;
+    };
+})[];
+export declare function createUniforms(): {
+    uLevels: {
+        value: number;
+    };
+    uSparse: {
+        value: number;
+    };
+    uLine: {
+        value: number;
+    };
+    uSmooth: {
+        value: number;
+    };
+    uLift: {
+        value: number;
+    };
+    uTex: {
+        value: any;
+    };
+    uS: {
+        value: number;
+    };
+    uCount: {
+        value: number;
+    };
+    uTime: {
+        value: number;
+    };
+    uAct: {
+        value: Float32Array<ArrayBuffer>;
+    };
+    uW: {
+        value: number;
+    };
+    uH: {
+        value: number;
+    };
+    uWave: {
+        value: number;
+    };
+    uSlant: {
+        value: number;
+    };
+    uDim: {
+        value: number;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uPointer: {
+        value: THREE.Vector3;
+    };
+    uPointerActive: {
+        value: number;
+    };
+    uPointerMode: {
+        value: number;
+    };
+    uPointerStrength: {
+        value: number;
+    };
+    uPointerRadius: {
+        value: number;
+    };
+    uPlace: {
+        value: THREE.Matrix4[];
+    };
+};
+export declare function applyConfig(u: any, c: any): void;
+export declare function build(u: any, c: any): any;
+//# sourceMappingURL=contourLines.d.ts.map

package/dist/components/gallery/looks/contourLines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contourLines.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/contourLines.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,OAAO;;;;;;;;;CAEiE,CAAC;AAEtF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIpB,CAAC;AACF,eAAO,MAAM,UAAU,UAAmC,CAAC;AAC3D,eAAO,MAAM,aAAa,UAAW,CAAC;AACtC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;IAQf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;IAInB,CAAC;AACF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA4J;AAC1L,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAAmL;AA2CnN,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

package/dist/components/gallery/looks/contourLines.js

@@ -0,0 +1,91 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// contours.mjs). Plain JS-shaped code (the viewer compiles non-strict); typed at its one door, kit/GalleryVariant.tsx. Its own DEFAULTS only fill knobs the
+// core defaults (DEFAULT_GALLERY_OBJECTS.contourLines) do not carry; its own autoplay is never used.
+// contours — "Contour Lines". Every picture is drawn as the contour lines of its own brightness, like a
+// topographic map of the image: level sets of a softened luminance field, anti-aliased with fwidth so every line
+// is a clean hairline at any distance. An inactive picture shows only every fourth level, thin and grey. When it
+// becomes the active one a soft wave crosses it: behind the wave the missing levels appear, every line thickens
+// and takes the picture's colour, until the lines meet and close into the solid picture. Leaving runs it back.
+// The cursor lifts the contours near it into a soft relief (the picture's own brightness as height). Self-coloured.
+import * as THREE from 'three';
+import { BASE_DEFAULTS, BASE_GUI_MOTION, BASE_GUI_TAIL, LAYOUT_GUI, baseUniforms, applyBase, baseGlsl, instanced, shaderMaterial, makeGallery, withLean, fragHead } from '../kit/lookBase.js';
+export const catalog = { key: 'contourLines', name: 'Contour Lines', camera: { position: [0.3, 0.15, 4.6], target: [0, 0, 0] },
+    description: 'Pictures drawn as the contour lines of their own brightness, like a topographic map: inactive ones are a few thin grey lines, the active one fills in as a soft wave thickens the lines into the solid picture; the cursor lifts the contours into relief. Use for architecture, data and graphic showcases.',
+    tags: ['gallery', 'contours', 'lines', 'topographic', 'graphic', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'contourLines', aspect: 1.4, width: 2.2,
+    levels: 22, sparse: 3, lineWidth: 0.08, smoothing: 3.6, changeTime: 2.2, dim: 0.55,
+    pointerMode: 'lift', pointerRadius: 0.6, lift: 0.18,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width'];
+export const POINTER_MODES = ['lift'];
+export const GUI = [
+    { key: 'lean', min: 0, max: 3, step: 0.01, tip: 'The gallery turns toward the cursor' },
+    { key: 'aspect', min: 0.6, max: 2.5, step: 0.01 }, { key: 'width', min: 1, max: 4, step: 0.01 },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'levels', min: 6, max: 60, step: 1, tip: 'Contour levels over the full brightness range' }, { key: 'sparse', min: 1, max: 8, step: 1, tip: 'An inactive picture shows every n-th level' },
+    { key: 'lineWidth', min: 0.02, max: 0.4, step: 0.005, tip: 'Width of an inactive line, as a share of the level spacing' },
+    { key: 'smoothing', min: 0, max: 5, step: 0.1, tip: 'How much the brightness is smoothed before the contours are drawn' },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL, { key: 'lift', min: 0, max: 0.6, step: 0.01, tip: 'Height of the cursor’s relief' },
+];
+export const PRESETS = [
+    { name: 'Contours', description: 'The default.', patch: {} },
+    { name: 'Survey', description: 'Many fine levels.', patch: { levels: 48, sparse: 6, lineWidth: 0.05, smoothing: 1.5 } },
+    { name: 'Bold', description: 'Few broad bands.', patch: { levels: 12, sparse: 2, lineWidth: 0.16, smoothing: 3.2 } },
+];
+export function createUniforms() { return { ...baseUniforms(), uLevels: { value: 28 }, uSparse: { value: 4 }, uLine: { value: 0.09 }, uSmooth: { value: 2.2 }, uLift: { value: 0.18 } }; }
+export function applyConfig(u, c) { const set = applyBase(u, c, POINTER_MODES); set('uLevels', c.levels); set('uSparse', c.sparse); set('uLine', c.lineWidth); set('uSmooth', c.smoothing); set('uLift', c.lift); }
+const vert = /* glsl */ `
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    attribute vec4 aI;
+    ${baseGlsl}
+    uniform float uLift, uSmooth;
+    varying vec2 vUv; varying float vImg; varying float vAct; varying float vAlpha;
+    void main(){
+        float img = aI.x; vec2 g = position.xy + 0.5;
+        vec2 p = vec2(position.x * uW, position.y * uH);
+        float L = lumOf(textureLod(uTex, vec3(g, img), uSmooth + 1.0).rgb);
+        float z = uLift * L * maskAt(p);
+        vUv = g; vImg = img; vAct = actOf(img); vAlpha = fadeAt(img);
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(placeAt(img, vec3(p, z)), 1.0);
+    }
+`;
+const frag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    ${baseGlsl}
+    uniform float uLevels, uSparse, uLine, uSmooth;
+    varying vec2 vUv; varying float vImg; varying float vAct; varying float vAlpha;
+    void main(){
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        float L = lumOf(textureLod(uTex, vec3(vUv, vImg), uSmooth).rgb);
+        float s = waveAt(vAct, vUv);
+        float f = L * uLevels, idx = floor(f + 0.5);
+        float dist = abs(f - idx);                                  // 0 on a level, 0.5 half-way between two
+        float px = max(fwidth(f), 1e-4);
+        float keep = mix(step(mod(idx, uSparse), 0.5), 1.0, smoothstep(0.0, 0.5, s));
+        float width = mix(uLine, 0.56, s * s);                       // the lines meet (0.5) and close the picture
+        float line = 1.0 - smoothstep(width - px, width + px, dist);
+        vec3 c = mix(fadedOf(pic) * 1.4, pic, s);
+        float a = line * keep * vAlpha * uOpacity;
+        if (a < 0.003) discard;
+        gl_FragColor = vec4(c * uIntensity * a, a);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const W = c.width, H = W / c.aspect;
+    const geo = instanced(new THREE.PlaneGeometry(1, 1, 64, 44), 1, () => [0, 0]);
+    const mat = shaderMaterial(u, vert, frag);
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.frustumCulled = false;
+    mesh.raycast = () => { };
+    const g = makeGallery(u, c, { W, H, meshes: [mesh], setCount: (n) => { geo.instanceCount = n; } });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); };
+    return g;
+}