@3driseai/3drise-viewer 0.1.40 → 0.1.42

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

@@ -0,0 +1,346 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// silk.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.silk) do not carry; its own autoplay is never used.
+// silk — every picture is a sheet of cloth hanging from a rail: a mass-spring cloth (Verlet, pinned along
+// the top, structural + shear + bend constraints) in a breeze. Light goes through the fabric: a key light
+// lights the front, and where it falls on the back the picture shows through as a warm translucency, the
+// folds shading themselves. Change: the outgoing sheet is let go at the rail and falls out of frame in a
+// slow billow; the incoming one drops from the rail and swings into stillness. Neighbours hang at depth.
+import * as THREE from 'three';
+import { fragHead, col, smooth, mulberry32, createScroll, sliceTextures, withLean } from '../kit/galleryKit.js';
+import { createLayout, LAYOUT_GUI, LAYOUT_KEYS } from '../kit/galleryKit.js';
+export const catalog = { key: 'silk', name: 'Silk', camera: { position: [0.2, -0.1, 5.4], target: [0, -0.1, 0] },
+    description: 'Pictures printed on sheets of silk hanging from a rail, each a cloth simulation in a breeze lit by the scene with a silk sheen; a change lets the sheet fall and drops the next from the rail. Use for fashion, textiles, soft and elegant showcases.',
+    tags: ['gallery', 'silk', 'cloth', 'fabric', 'translucency', 'navigation', 'interactive'] };
+export const DEFAULTS = {
+    type: 'silk', enabled: true, lean: 1, imageUrls: [], autoplay: 0, intensity: 1, opacity: 1,
+    aspect: 1.4, width: 2.2, resolution: 22, // structural
+    layout: 'row', spacing: 1.3, depth: 0.9, visible: 2.2, shape: 1, dim: 0.22,
+    stiffness: 30, damping: 8, throwing: 0.12,
+    wind: 0.35, gravity: 9, drag: 0.985, iterations: 6, fallTime: 2.2,
+    sheen: 0.6,
+    pointerMode: 'breath', pointerStrength: 1, pointerRadius: 0.8, pointerColor: '#ffd9a6',
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'resolution'];
+export const POINTER_MODES = ['breath', 'touch'];
+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 }, { key: 'resolution', min: 8, max: 40, step: 1 },
+    ...LAYOUT_GUI, { key: 'dim', min: 0, max: 1, step: 0.01 },
+    { key: 'stiffness', min: 5, max: 120, step: 1 }, { key: 'damping', min: 2, max: 30, step: 0.1 },
+    { key: 'wind', min: 0, max: 3, step: 0.01 }, { key: 'gravity', min: 1, max: 30, step: 0.1 }, { key: 'drag', min: 0.9, max: 0.999, step: 0.001 }, { key: 'iterations', min: 1, max: 12, step: 1 }, { key: 'fallTime', min: 0.5, max: 6, step: 0.1 },
+    { key: 'sheen', min: 0, max: 1, step: 0.01 },
+    { 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: 3, step: 0.01 },
+    { key: 'intensity', min: 0, max: 3, step: 0.01 }, { key: 'opacity', min: 0, max: 1, step: 0.01 },
+    { key: 'pointerColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Breeze', description: 'The default.', patch: {} },
+    { name: 'Still', description: 'No wind: heavy sheets, slow falls.', patch: { wind: 0.05, gravity: 6, fallTime: 3.5, } },
+    { name: 'Gale', description: 'Strong wind, light fabric.', patch: { wind: 2.2, gravity: 7, drag: 0.992 } },
+];
+export function createUniforms() {
+    return {
+        uTex: { value: null }, uKey: { value: new THREE.Vector3(0.5, 0.6, 0.8).normalize() }, uKeyColor: { value: col('#fff2e0') }, uBackColor: { value: col('#ffd3a8') },
+        uTrans: { value: 0.7 }, uSheen: { value: 0.5 }, uIntensity: { value: 1 }, uOpacity: { value: 1 }, uPointerColor: { value: col('#ffd9a6') },
+    };
+}
+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('uTrans', c.translucency);
+    set('uSheen', c.sheen);
+    set('uIntensity', c.intensity);
+    set('uOpacity', c.opacity);
+    set('uKeyColor', c.keyColor);
+    set('uBackColor', c.backColor);
+    set('uPointerColor', c.pointerColor);
+    if (c.keyAngle !== undefined) {
+        const a = c.keyAngle * Math.PI / 180;
+        u.uKey.value.set(Math.sin(a) * 0.8, 0.55, Math.cos(a) * 0.8).normalize();
+    }
+}
+const vert = /* glsl */ `
+    varying vec2 vUv; varying vec3 vN; varying vec3 vV; varying vec3 vW;
+    void main(){ vUv = uv; vN = normalize(normalMatrix * normal); vec4 mv = modelViewMatrix * vec4(position, 1.0); vV = -mv.xyz; vW = (modelMatrix * vec4(position, 1.0)).xyz; gl_Position = projectionMatrix * mv; }
+`;
+const frag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex; uniform float uLayer, uDimK, uFade, uTrans, uSheen, uIntensity, uOpacity, uHover;
+    uniform vec3 uKey, uKeyColor, uBackColor, uPointerColor;
+    varying vec2 vUv; varying vec3 vN; varying vec3 vV;
+    void main(){
+        vec3 pic = texture(uTex, vec3(vUv, uLayer)).rgb;
+        vec3 N = normalize(vN); if (!gl_FrontFacing) N = -N;
+        vec3 V = normalize(vV); vec3 L = normalize((viewMatrix * vec4(uKey, 0.0)).xyz);
+        float ndl = dot(N, L);
+        float front = max(ndl, 0.0);
+        float back = max(-ndl, 0.0);                                  // light on the far side: comes through the weave
+        float wrapL = 0.5 + 0.5 * ndl;
+        vec3 diffuse = pic * (0.12 + 0.95 * front) * uKeyColor;
+        vec3 through = pic * uBackColor * back * uTrans * 0.9;
+        // silk sheen: an anisotropic-ish highlight along the hang direction, soft
+        vec3 Hh = normalize(L + V); float spec = pow(max(dot(N, Hh), 0.0), 24.0) * uSheen * 0.35;
+        vec3 c = (diffuse + through + uKeyColor * spec + pic * wrapL * 0.08) * uDimK;
+        c += uPointerColor * uHover * 0.2;
+        float a = uOpacity * uFade;
+        if (a < 0.003) discard;
+        gl_FragColor = vec4(c * uIntensity * a, a);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+// ---------------------------------------------------------------- the cloth
+function makeCloth(W, H, nx, ny) {
+    const n = nx * ny;
+    const pos = new Float32Array(n * 3), prev = new Float32Array(n * 3), pin = new Uint8Array(n);
+    const rest = []; // constraints: [a, b, length]
+    const idx = (i, j) => j * nx + i;
+    for (let j = 0; j < ny; j++)
+        for (let i = 0; i < nx; i++) {
+            const k = idx(i, j) * 3;
+            pos[k] = (i / (nx - 1) - 0.5) * W;
+            pos[k + 1] = H / 2 - (j / (ny - 1)) * H;
+            pos[k + 2] = 0;
+            if (j === 0)
+                pin[idx(i, j)] = 1;
+        }
+    prev.set(pos);
+    const add = (a, b) => { const d = Math.hypot(pos[a * 3] - pos[b * 3], pos[a * 3 + 1] - pos[b * 3 + 1], pos[a * 3 + 2] - pos[b * 3 + 2]); rest.push(a, b, d); };
+    for (let j = 0; j < ny; j++)
+        for (let i = 0; i < nx; i++) {
+            if (i + 1 < nx)
+                add(idx(i, j), idx(i + 1, j));
+            if (j + 1 < ny)
+                add(idx(i, j), idx(i, j + 1));
+            if (i + 1 < nx && j + 1 < ny) {
+                add(idx(i, j), idx(i + 1, j + 1));
+                add(idx(i + 1, j), idx(i, j + 1));
+            }
+            if (i + 2 < nx)
+                add(idx(i, j), idx(i + 2, j));
+            if (j + 2 < ny)
+                add(idx(i, j), idx(i, j + 2));
+        }
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(pos, 3).setUsage(THREE.DynamicDrawUsage));
+    const uvs = new Float32Array(n * 2);
+    for (let j = 0; j < ny; j++)
+        for (let i = 0; i < nx; i++) {
+            uvs[idx(i, j) * 2] = i / (nx - 1);
+            uvs[idx(i, j) * 2 + 1] = 1 - j / (ny - 1);
+        }
+    geo.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
+    const index = [];
+    for (let j = 0; j < ny - 1; j++)
+        for (let i = 0; i < nx - 1; i++) {
+            const a = idx(i, j), b = idx(i + 1, j), c = idx(i, j + 1), d = idx(i + 1, j + 1);
+            index.push(a, c, b, b, c, d);
+        }
+    geo.setIndex(index);
+    geo.computeVertexNormals();
+    return { geo, pos, prev, pin, rest: new Float32Array(rest), n, nx, ny, W, H };
+}
+function stepCloth(cl, dt, g, wind, drag, iters, extraForce, pinM, pinned) {
+    const me = pinM.elements;
+    const { pos, prev, pin, rest, n } = cl;
+    const dt2 = dt * dt;
+    for (let i = 0; i < n; i++) {
+        const k = i * 3;
+        if (pinned && pin[i]) {
+            const lx = (i / (cl.nx - 1) - 0.5) * cl.W, ly = cl.H / 2 + 0.02;
+            pos[k] = me[0] * lx + me[4] * ly + me[12];
+            pos[k + 1] = me[1] * lx + me[5] * ly + me[13];
+            pos[k + 2] = me[2] * lx + me[6] * ly + me[14];
+            prev[k] = pos[k];
+            prev[k + 1] = pos[k + 1];
+            prev[k + 2] = pos[k + 2];
+            continue;
+        }
+        const x = pos[k], y = pos[k + 1], z = pos[k + 2];
+        let fx = 0, fy = -g, fz = 0;
+        const w = wind(x, y, z, i);
+        fx += w[0];
+        fy += w[1];
+        fz += w[2];
+        if (extraForce) {
+            const e = extraForce(x, y, z);
+            fx += e[0];
+            fy += e[1];
+            fz += e[2];
+        }
+        pos[k] = x + (x - prev[k]) * drag + fx * dt2;
+        pos[k + 1] = y + (y - prev[k + 1]) * drag + fy * dt2;
+        pos[k + 2] = z + (z - prev[k + 2]) * drag + fz * dt2;
+        prev[k] = x;
+        prev[k + 1] = y;
+        prev[k + 2] = z;
+    }
+    for (let it = 0; it < iters; it++)
+        for (let c = 0; c < rest.length; c += 3) {
+            const a = rest[c] * 3, b = rest[c + 1] * 3, L = rest[c + 2];
+            const dx = pos[b] - pos[a], dy = pos[b + 1] - pos[a + 1], dz = pos[b + 2] - pos[a + 2];
+            const d = Math.hypot(dx, dy, dz) || 1e-6;
+            const diff = (d - L) / d * 0.5;
+            const pa = pinned && pin[rest[c]], pb = pinned && pin[rest[c + 1]];
+            const wa = pa ? 0 : (pb ? 2 : 1), wb = pb ? 0 : (pa ? 2 : 1);
+            pos[a] += dx * diff * wa * 0.5;
+            pos[a + 1] += dy * diff * wa * 0.5;
+            pos[a + 2] += dz * diff * wa * 0.5;
+            pos[b] -= dx * diff * wb * 0.5;
+            pos[b + 1] -= dy * diff * wb * 0.5;
+            pos[b + 2] -= dz * diff * wb * 0.5;
+        }
+}
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const MAX = 32, W = c.width, H = W / c.aspect, nx = Math.max(6, c.resolution | 0), ny = Math.max(4, Math.round(nx / c.aspect));
+    const rnd = mulberry32(2);
+    const sheets = [];
+    const object = new THREE.Group();
+    const rail = new THREE.Mesh(new THREE.CylinderGeometry(0.015, 0.015, 1, 10), new THREE.MeshStandardMaterial({ color: '#8a8f9a', roughness: 0.4, metalness: 0.8 }));
+    rail.rotation.z = Math.PI / 2;
+    rail.visible = false;
+    object.add(rail);
+    const pick = new THREE.Mesh(new THREE.PlaneGeometry(W, H), new THREE.MeshBasicMaterial({ visible: false }));
+    object.add(pick);
+    for (let i = 0; i < MAX; i++) {
+        const cl = makeCloth(W, H, nx, ny);
+        // silk: lit by the scene (the studio's lights) — a soft diffuse print with a sheen along the folds
+        const mat = new THREE.MeshPhysicalMaterial({ color: '#ffffff', roughness: 0.62, metalness: 0, sheen: c.sheen, sheenRoughness: 0.35, sheenColor: new THREE.Color('#fff4e6'), side: THREE.DoubleSide, transparent: true });
+        const mesh = new THREE.Mesh(cl.geo, mat);
+        mesh.frustumCulled = false;
+        mesh.visible = false;
+        mesh.raycast = () => { };
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        object.add(mesh);
+        sheets.push({ cl, mesh, mat, falling: 0, phase: rnd() * 6.28, lastD: 99, offsetX: 0 });
+    }
+    const cfg = { ...c };
+    const scroll = createScroll(cfg, () => { });
+    scroll.st.pitch = W * c.spacing;
+    const st = { time: 0, prevIndex: 0, pointer: null, prevPointer: null, gust: 0, gustT: 0, tex: [] };
+    const controls = Object.assign(scroll.controls, {
+        setTexture(tex, count) { for (const t of st.tex ?? [])
+            t.dispose(); scroll.st.count = Math.min(count, MAX); [st.tex] = sliceTextures(tex, scroll.st.count); tex.dispose(); st.tex.forEach((t, i) => { sheets[i].mat.map = t; sheets[i].mat.needsUpdate = true; }); },
+    });
+    const jump = controls.jump;
+    controls.jump = (i) => { jump(i); for (const s of sheets)
+        s.lastD = 99; }; // a jump re-hangs too
+    object.userData.gallery = controls;
+    const railY = H / 2 + 0.02;
+    const layout = createLayout(W, H);
+    function resetSheet(s, M) {
+        const { pos, prev, n } = s.cl, me = M.elements;
+        for (let i = 0; i < n; i++) {
+            const k = i * 3;
+            const ci = i % s.cl.nx, cj = Math.floor(i / s.cl.nx);
+            const lx = (ci / (s.cl.nx - 1) - 0.5) * W, ly = H / 2 + 0.02 - (cj / (s.cl.ny - 1)) * H;
+            pos[k] = me[0] * lx + me[4] * ly + me[12];
+            pos[k + 1] = me[1] * lx + me[5] * ly + me[13];
+            pos[k + 2] = me[2] * lx + me[6] * ly + me[14];
+            prev[k] = pos[k];
+            prev[k + 1] = pos[k + 1];
+            prev[k + 2] = pos[k + 2];
+        }
+        s.falling = 0;
+    }
+    return {
+        object, controls, pickMesh: pick, materials: sheets.map(s => s.mat).concat(rail.material),
+        // a new layout (or any change of the places) re-hangs the sheets still in their new places
+        apply(k) { Object.assign(cfg, k); for (const s of sheets) {
+            s.mat.sheen = cfg.sheen;
+            if (LAYOUT_KEYS.some(q => k[q] !== undefined))
+                s.lastD = 99;
+        } scroll.st.pitch = W * cfg.spacing; },
+        update(dt, pointer) {
+            dt = Math.min(dt, 0.033);
+            st.time += dt;
+            scroll.step(dt, pointer);
+            const n = scroll.st.count, s0 = scroll.st.s, pitch = W * cfg.spacing;
+            st.gustT += dt;
+            if (st.gustT > 2.5 + rnd() * 3) {
+                st.gustT = 0;
+                st.gust = (rnd() - 0.4) * cfg.wind * 6;
+            }
+            const breezeZ = cfg.wind * (1.2 * Math.sin(st.time * 0.5) * Math.sin(st.time * 0.17 + 1.0) + 0.7 * Math.sin(st.time * 1.4)) + st.gust * Math.exp(-st.gustT * 0.9);
+            const idx = controls.index;
+            if (idx !== st.prevIndex) {
+                st.gustT = 0;
+                st.gust = (cfg.wind * 1.2 + 0.35) * Math.sign(scroll.st.v || 1);
+                st.prevIndex = idx;
+            } // the row's move stirs the air
+            // the cursor's breath / touch, in the z = 0 plane
+            let breathX = 0, breathV = 0;
+            if (pointer && st.prevPointer && cfg.pointerMode === 'breath') {
+                breathV = (pointer.x - st.prevPointer.x) / dt;
+                breathX = pointer.x;
+            }
+            st.prevPointer = pointer ? { ...pointer } : null;
+            const span = Math.min(n, 2 * cfg.visible + 1) * pitch;
+            rail.scale.set(1, span, 1);
+            rail.position.set(0, railY, 0);
+            for (let i = 0; i < n; i++) {
+                const s = sheets[i];
+                const { d, focus, fade } = layout.place(i, s0, n, cfg, s.place ?? (s.place = new THREE.Matrix4()));
+                const vis = fade > 0.002 || s.falling > 0;
+                s.mesh.visible = vis;
+                if (!vis) {
+                    s.lastD = 99;
+                    continue;
+                }
+                if (s.lastD === 99)
+                    resetSheet(s, s.place); // just came into view: hang still
+                s.lastD = d;
+                const wind = (px, py, pz, k) => {
+                    const f = (0.6 + 0.4 * Math.sin(px * 2.1 + st.time * 0.9 + s.phase)) * (1 - (py - (railY - H)) / H * 0.3);
+                    let wz = breezeZ * f * 0.35, wx = 0;
+                    if (breathV) {
+                        const g = Math.exp(-Math.pow((px - breathX) / cfg.pointerRadius, 2));
+                        wz += Math.abs(breathV) * 1.4 * g * cfg.pointerStrength;
+                        wx += breathV * 0.4 * g * cfg.pointerStrength;
+                    }
+                    if (pointer && cfg.pointerMode === 'touch') {
+                        const dx = px - pointer.x, dy = py - pointer.y;
+                        const g = Math.exp(-(dx * dx + dy * dy) / (cfg.pointerRadius * cfg.pointerRadius * 0.3));
+                        wz -= 9 * g * cfg.pointerStrength;
+                    }
+                    return [wx, 0, wz];
+                };
+                if (s.falling > 0) {
+                    s.falling += dt / cfg.fallTime;
+                    stepCloth(s.cl, dt, cfg.gravity * 0.5, wind, cfg.drag, cfg.iterations, null, s.place, false);
+                    s.mat.opacity = cfg.opacity * (1 - smooth(0.35, 1, s.falling));
+                    if (s.falling >= 1) {
+                        s.falling = 0;
+                        s.mesh.visible = false;
+                        s.lastD = 99;
+                    }
+                }
+                else {
+                    stepCloth(s.cl, dt, cfg.gravity, wind, cfg.drag, cfg.iterations, null, s.place, true);
+                    s.mat.opacity = cfg.opacity * fade;
+                }
+                s.mat.color.setScalar((1 - cfg.dim * (1 - focus)) * cfg.intensity);
+                s.cl.geo.attributes.position.needsUpdate = true;
+                s.cl.geo.computeVertexNormals();
+            }
+            pick.position.x = 0;
+        },
+        dispose() { for (const s of sheets) {
+            s.cl.geo.dispose();
+            s.mat.dispose();
+        } rail.geometry.dispose(); rail.material.dispose(); pick.geometry.dispose(); for (const t of st.tex ?? [])
+            t.dispose(); },
+    };
+}

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

@@ -0,0 +1,176 @@
+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;
+    slats: number;
+    turn: number;
+    thickness: number;
+    gap: number;
+    roughness: number;
+    metalness: number;
+    backColor: string;
+    changeTime: number;
+    wave: number;
+    slant: number;
+    dim: number;
+    pointerMode: string;
+    pointerRadius: number;
+    pointerTurn: 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;
+    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[];
+    color?: undefined;
+} | {
+    key: string;
+    color: boolean;
+    options?: undefined;
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        slats?: undefined;
+        thickness?: undefined;
+        changeTime?: undefined;
+        wave?: undefined;
+        gap?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        slats: number;
+        thickness: number;
+        changeTime: number;
+        wave: number;
+        gap?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        slats: number;
+        gap: number;
+        changeTime: number;
+        wave: number;
+        thickness?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uN: {
+        value: number;
+    };
+    uTurn: {
+        value: number;
+    };
+    uThick: {
+        value: number;
+    };
+    uGap: {
+        value: number;
+    };
+    uPTurn: {
+        value: number;
+    };
+    uBack: {
+        value: THREE.Color;
+    };
+    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=slats.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slats.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/slats.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,OAAO;;;;;;;;;CAE8D,CAAC;AAEnF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKpB,CAAC;AACF,eAAO,MAAM,UAAU,UAA4C,CAAC;AACpE,eAAO,MAAM,aAAa,UAAW,CAAC;AACtC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;IASf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AACF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAI/B;AA2BD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

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

@@ -0,0 +1,93 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// slats.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.slats) do not carry; its own autoplay is never used.
+// slats — every picture is cut into thin vertical slats, each a real 3D strip turning about its own vertical axis,
+// lit by the scene: the front of a slat carries its strip of the picture, its back and edges are plain. An inactive
+// picture's slats stand nearly edge-on — a row of fine grey lines with the dark showing between them. When it
+// becomes the active one a soft wave crosses it and the slats turn to face the viewer one after another, closing
+// into the picture in full colour; leaving turns them back. The cursor turns the slats near it a little toward it.
+// Scene-lit (standard material): the studio's lights catch the turning slats; the gallery adds none.
+import * as THREE from 'three';
+import { BASE_DEFAULTS, BASE_GUI_MOTION, BASE_GUI_TAIL, LAYOUT_GUI, baseUniforms, applyBase, instanced, litMaterial, makeGallery, withLean } from '../kit/lookBase.js';
+export const catalog = { key: 'slats', name: 'Slats', camera: { position: [1.2, 0.3, 4.4], target: [0, 0, 0] },
+    description: 'Pictures cut into thin vertical slats lit by the scene: inactive ones stand nearly edge-on as fine grey lines, the active one turns its slats to face you in a soft wave, closing into the picture; the cursor turns the slats near it. Use for architecture, interiors and product showcases.',
+    tags: ['gallery', 'slats', 'louvres', 'turning', 'scene-lit', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'slats', aspect: 1.4, width: 2.2, slats: 36, // structural
+    turn: 82, thickness: 0.018, gap: 0.04, roughness: 0.5, metalness: 0.1, backColor: '#2a2c33',
+    changeTime: 1.8, wave: 0.45, slant: 0, dim: 0.45,
+    pointerMode: 'turn', pointerRadius: 0.5, pointerTurn: 22,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'slats'];
+export const POINTER_MODES = ['turn'];
+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 }, { key: 'slats', min: 8, max: 120, step: 1, tip: 'Slats across a picture' },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'turn', min: 0, max: 90, step: 1, tip: 'How far an inactive picture’s slats are turned (degrees)' },
+    { key: 'thickness', min: 0.002, max: 0.08, step: 0.001, tip: 'Thickness of a slat' }, { key: 'gap', min: 0, max: 0.4, step: 0.005, tip: 'Gap between slats, as a share of a slat' },
+    { key: 'roughness', min: 0, max: 1, step: 0.01 }, { key: 'metalness', min: 0, max: 1, step: 0.01 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL, { key: 'pointerTurn', min: 0, max: 60, step: 1, tip: 'How far the cursor turns the slats (degrees)' },
+    { key: 'backColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Slats', description: 'The default.', patch: {} },
+    { name: 'Blinds', description: 'Many fine slats, a quick wave.', patch: { slats: 80, thickness: 0.006, changeTime: 1.2, wave: 0.3 } },
+    { name: 'Panels', description: 'A few wide panels, slow.', patch: { slats: 12, gap: 0.08, changeTime: 2.8, wave: 0.6 } },
+];
+export function createUniforms() {
+    return { ...baseUniforms(), uN: { value: 36 }, uTurn: { value: 1.43 }, uThick: { value: 0.018 }, uGap: { value: 0.04 }, uPTurn: { value: 0.38 }, uBack: { value: new THREE.Color('#2a2c33') } };
+}
+export function applyConfig(u, c) {
+    const set = applyBase(u, c, POINTER_MODES);
+    set('uThick', c.thickness);
+    set('uGap', c.gap);
+    set('uBack', c.backColor);
+    if (c.turn !== undefined)
+        u.uTurn.value = c.turn * Math.PI / 180;
+    if (c.pointerTurn !== undefined)
+        u.uPTurn.value = c.pointerTurn * Math.PI / 180;
+}
+const vertex = {
+    head: /* glsl */ `uniform float uN, uTurn, uThick, uGap, uPTurn; varying vec2 vUv; varying float vImg; varying float vW; varying float vFront; varying float vAlpha;`,
+    body: /* glsl */ `
+        float img = aI.x, k = aI.y; float u0 = (k + 0.5) / uN;
+        float sw = uW / uN;
+        float cx = (u0 - 0.5) * uW;
+        float w = waveAt(actOf(img), vec2(u0, 0.5));
+        float m = maskAt(vec2(cx, 0.0));
+        float a = (1.0 - w) * uTurn + uPTurn * m * sign(uPointer.x - cx + 1e-4);
+        vec3 v = vec3(position.x * sw * (1.0 - uGap), position.y * uH, position.z * uThick);
+        float ca = cos(a), sa = sin(a);
+        gPos = vec3(cx + ca * v.x + sa * v.z, v.y, -sa * v.x + ca * v.z);
+        gNrm = vec3(ca * normal.x + sa * normal.z, normal.y, -sa * normal.x + ca * normal.z);
+        vUv = vec2(u0 + position.x / uN, position.y + 0.5);
+        vImg = img; vW = w; vFront = step(0.5, normal.z); vAlpha = fadeAt(img);
+    `,
+};
+const fragment = {
+    head: /* glsl */ `uniform vec3 uBack; varying vec2 vUv; varying float vImg; varying float vW; varying float vFront; varying float vAlpha;`,
+    body: /* glsl */ `
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        vec3 face = mix(fadedOf(pic) * 1.6, pic, vW);
+        diffuseColor.rgb = mix(uBack * mix(0.6, 1.0, uDim), face, vFront) * uIntensity;
+        diffuseColor.a *= vAlpha * uOpacity; if (diffuseColor.a < 0.01) discard;
+    `,
+};
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const W = c.width, H = W / c.aspect, N = Math.max(2, c.slats | 0);
+    u.uN.value = N;
+    const geo = instanced(new THREE.BoxGeometry(1, 1, 1), N, () => [0, 0]);
+    const mat = litMaterial(u, 'slats', vertex, fragment, { roughness: c.roughness, metalness: c.metalness });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.frustumCulled = false;
+    mesh.raycast = () => { };
+    mesh.receiveShadow = true;
+    const g = makeGallery(u, c, { W, H, meshes: [mesh], setCount: (n) => { geo.instanceCount = n * N; } });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); if (k.roughness !== undefined)
+        mat.roughness = k.roughness; if (k.metalness !== undefined)
+        mat.metalness = k.metalness; };
+    return g;
+}