@3driseai/3drise-viewer 0.1.39 → 0.1.41

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

@@ -0,0 +1,206 @@
+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;
+    sheets: number;
+    direction: string;
+    separation: number;
+    closed: number;
+    stagger: number;
+    smoothing: number;
+    roughness: number;
+    shadows: boolean;
+    page: boolean;
+    pageColor: string;
+    changeTime: number;
+    dim: number;
+    pointerMode: string;
+    pointerRadius: number;
+    tilt: 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[];
+    tip?: undefined;
+    color?: undefined;
+} | {
+    key: string;
+    tip: string;
+    options?: undefined;
+    color?: undefined;
+} | {
+    key: string;
+    color: boolean;
+    options?: undefined;
+    tip?: undefined;
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        sheets?: undefined;
+        separation?: undefined;
+        changeTime?: undefined;
+        direction?: undefined;
+        closed?: undefined;
+        stagger?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        sheets: number;
+        separation: number;
+        changeTime: number;
+        direction?: undefined;
+        closed?: undefined;
+        stagger?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        direction: string;
+        closed: number;
+        sheets?: undefined;
+        separation?: undefined;
+        changeTime?: undefined;
+        stagger?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        closed: number;
+        stagger: number;
+        sheets?: undefined;
+        separation?: undefined;
+        changeTime?: undefined;
+        direction?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uSheets: {
+        value: number;
+    };
+    uSep: {
+        value: number;
+    };
+    uClosed: {
+        value: number;
+    };
+    uStagger: {
+        value: number;
+    };
+    uSmooth: {
+        value: number;
+    };
+    uLiftA: {
+        value: number;
+    };
+    uCard: {
+        value: THREE.Color;
+    };
+    uDir: {
+        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=popUp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popUp.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/popUp.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,OAAO;;;;;;;;;CAE0D,CAAC;AAE/E,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIpB,CAAC;AACF,eAAO,MAAM,UAAU,UAA6C,CAAC;AACrE,eAAO,MAAM,aAAa,UAAW,CAAC;AACtC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnB,CAAC;AACF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAK/B;AAiDD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

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

@@ -0,0 +1,132 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// popup.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.popUp) do not carry; its own autoplay is never used.
+// popup — "Pop-up". Every picture is a pop-up book spread lit by the scene: the picture is cut by its own brightness
+// into a few sheets (the back one whole, each one in front holding what is brighter than its level), each hinged
+// along its bottom edge at its own depth (and, optionally, to a paper page lying at the foot of the picture).
+// An inactive picture's sheets lie down — `direction` back (away from the viewer: a grey printed page seen from
+// above) or forward (folded down toward the viewer, showing their plain card backs); the hinges at different depths
+// keep the lying sheets apart (no z-fighting). When it becomes the active one
+// the sheets stand up one after another, back to front, like a pop-up page opening, and take their colour; leaving
+// lays them back front to back. The sheets cast their own cut-out shadows on each other. The cursor tilts the
+// sheets near it back a little, like a fingertip on the paper. Scene-lit (standard material + shadows); no light.
+import * as THREE from 'three';
+import { BASE_DEFAULTS, BASE_GUI_MOTION, BASE_GUI_TAIL, LAYOUT_GUI, baseUniforms, applyBase, instanced, litMaterial, litDepthMaterial, makeGallery, withLean } from '../kit/lookBase.js';
+export const catalog = { key: 'popUp', name: 'Pop-up', camera: { position: [1.3, 0.75, 4.4], target: [0, -0.1, 0.2] },
+    description: 'Pictures as pop-up book spreads lit by the scene: cut-paper sheets hinged to a page lie folded down and grey when inactive, and stand up one after another into the picture in full colour when it becomes active. Use for storytelling, kids, editorial and craft showcases.',
+    tags: ['gallery', 'pop-up', 'paper', 'book', 'scene-lit', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'popUp', aspect: 1.4, width: 2.2, sheets: 4, // structural
+    direction: 'back', separation: 0.16, closed: 76, stagger: 0.6, smoothing: 3.2, roughness: 0.85, shadows: true, page: false, pageColor: '#d8d2c6', changeTime: 2.2, dim: 0.5,
+    pointerMode: 'tilt', pointerRadius: 0.6, tilt: 12,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'sheets'];
+export const POINTER_MODES = ['tilt'];
+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: 'sheets', min: 2, max: 7, step: 1, tip: 'Pop-up sheets per picture' },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'direction', options: ['back', 'forward'], tip: 'Which way an inactive picture’s sheets lie: back, away from the viewer, or forward, folded down toward the viewer' },
+    { key: 'separation', min: 0.02, max: 0.5, step: 0.005, tip: 'Depth between the sheets’ hinges' }, { key: 'closed', min: 20, max: 88, step: 1, tip: 'How far an inactive picture’s sheets lie down (degrees from upright)' },
+    { key: 'stagger', min: 0, max: 1, step: 0.01, tip: 'How much the sheets stand up one after another' },
+    { key: 'smoothing', min: 0, max: 5, step: 0.1, tip: 'How much the brightness is smoothed before the sheets are cut' }, { key: 'roughness', min: 0, max: 1, step: 0.01 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL, { key: 'tilt', min: 0, max: 40, step: 1, tip: 'How far the cursor tilts the sheets (degrees, the way they lie)' },
+    { key: 'shadows', tip: 'The sheets cast shadows (on each other and on the scene)' }, { key: 'page', tip: 'Show the paper page the sheets are hinged to' }, { key: 'pageColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Pop-up', description: 'The default.', patch: {} },
+    { name: 'Deep spread', description: 'Few sheets, far apart, slow.', patch: { sheets: 3, separation: 0.3, changeTime: 2.8 } },
+    { name: 'Folded forward', description: 'The sheets fold down toward the viewer.', patch: { direction: 'forward', closed: 62 } },
+    { name: 'Flat closed', description: 'Sheets lie fully flat when inactive.', patch: { closed: 86, stagger: 0.8 } },
+];
+export function createUniforms() {
+    return { ...baseUniforms(), uSheets: { value: 4 }, uSep: { value: 0.16 }, uClosed: { value: 1.26 }, uStagger: { value: 0.6 }, uSmooth: { value: 2.6 }, uLiftA: { value: 0.21 }, uCard: { value: new THREE.Color('#d8d2c6') }, uDir: { value: -1 } };
+}
+export function applyConfig(u, c) {
+    const set = applyBase(u, c, POINTER_MODES);
+    set('uCard', c.pageColor);
+    set('uSep', c.separation);
+    set('uStagger', c.stagger);
+    set('uSmooth', c.smoothing);
+    if (c.closed !== undefined)
+        u.uClosed.value = c.closed * Math.PI / 180;
+    if (c.tilt !== undefined)
+        u.uLiftA.value = c.tilt * Math.PI / 180;
+    if (c.direction !== undefined)
+        u.uDir.value = c.direction === 'forward' ? 1 : -1;
+}
+const vertex = {
+    head: /* glsl */ `uniform float uSheets, uSep, uClosed, uStagger, uLiftA, uDir; varying vec2 vUv; varying float vImg; varying float vK; varying float vE; varying float vAlpha;`,
+    body: /* glsl */ `
+        float img = aI.x, k = aI.y; float act = actOf(img);
+        // the sheets stand up back to front (and fold down front to back): sheet k's own share of the change
+        float t0 = (k / uSheets) * uStagger;
+        float ek = clamp((act - t0) / max(1.0 - uStagger * (uSheets - 1.0) / uSheets, 0.05), 0.0, 1.0);
+        ek = ek * ek * (3.0 - 2.0 * ek);
+        vec2 p = vec2(position.x * uW, position.y * uH);
+        // angle from upright: uDir -1 = lying back, away from the viewer; +1 = folded down toward the viewer
+        float th = uDir * (uClosed * (1.0 - ek) + uLiftA * maskAt(p) * ek);
+        float py = p.y + uH * 0.5;                                    // height above the hinge
+        float zk = k * uSep;
+        gPos = vec3(p.x, -uH * 0.5 + py * cos(th), zk + py * sin(th));
+        // shading normal: lying back, the sheet's own normal (its print faces up, toward the light). Folded forward the
+        // print faces down, away from any overhead light, and reads as black — so forward sheets are shaded as if
+        // tilted slightly up instead: the print stays readable while it folds (a shading choice, not a light)
+        gNrm = (uDir < 0.0 ? vec3(0.0, -sin(th), cos(th)) : normalize(vec3(0.0, 0.3 * sin(th), cos(th)))) * sign(normal.z + 1e-4);
+        vUv = position.xy + 0.5; vImg = img; vK = k; vE = ek; vAlpha = fadeAt(img);
+    `,
+};
+const cut = /* glsl */ `
+    float L = lumOf(textureLod(uTex, vec3(vUv, vImg), uSmooth).rgb);
+    if (vK > 0.5 && L < vK / uSheets) discard;
+`;
+const fragment = {
+    head: /* glsl */ `uniform float uSheets, uSmooth; uniform vec3 uCard; varying vec2 vUv; varying float vImg; varying float vK; varying float vE; varying float vAlpha;`,
+    body: /* glsl */ `
+        ${cut}
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        // the picture is printed on the front of each sheet; its back is plain card (what a folded-down sheet shows)
+        vec3 front = mix(fadedOf(pic) * 1.8, pic, vE);
+        diffuseColor.rgb = (gl_FrontFacing ? front : uCard * mix(0.55, 0.9, uDim)) * uIntensity;
+        diffuseColor.a *= vAlpha * uOpacity; if (diffuseColor.a < 0.01) discard;
+    `,
+};
+const depthCut = { head: fragment.head, body: cut + 'if (vAlpha < 0.5) discard;' };
+// the page the sheets are hinged to (optional, `page`): flat at the foot of the picture, reaching toward the viewer
+const pageVertex = {
+    head: /* glsl */ `uniform float uSheets, uSep; varying float vAlpha;`,
+    body: /* glsl */ `
+        float depth = uSheets * uSep + uH * 0.85;
+        gPos = vec3(position.x * uW * 1.04, -uH * 0.5 - 0.004, -0.06 + (0.5 - position.y) * depth);   // (0.5 - y): the page faces up
+        gNrm = vec3(0.0, 1.0, 0.0); vAlpha = fadeAt(aI.x);
+    `,
+};
+const pageFragment = { head: /* glsl */ `varying float vAlpha;`, body: /* glsl */ `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.sheets | 0);
+    u.uSheets.value = N;
+    const geo = instanced(new THREE.PlaneGeometry(1, 1, 8, 6), N, () => [0, 0]);
+    const mat = litMaterial(u, 'popup', vertex, fragment, { roughness: c.roughness });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.frustumCulled = false;
+    mesh.raycast = () => { };
+    mesh.castShadow = c.shadows !== false;
+    mesh.receiveShadow = true;
+    mesh.customDepthMaterial = litDepthMaterial(u, 'popup', vertex, depthCut);
+    const pgeo = instanced(new THREE.PlaneGeometry(1, 1), 1, () => [0, 0]);
+    const pmat = litMaterial(u, 'popup-page', pageVertex, pageFragment, { color: c.pageColor, roughness: 0.9 });
+    const page = new THREE.Mesh(pgeo, pmat);
+    page.frustumCulled = false;
+    page.raycast = () => { };
+    page.receiveShadow = true;
+    page.visible = !!c.page;
+    const g = makeGallery(u, c, { W, H, meshes: [mesh, page], setCount: (n) => { geo.instanceCount = n * N; pgeo.instanceCount = n; }, dispose: () => mesh.customDepthMaterial.dispose() });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); if (k.roughness !== undefined)
+        mat.roughness = k.roughness; if (k.pageColor)
+        pmat.color.set(k.pageColor); if (k.page !== undefined)
+        page.visible = !!k.page; if (k.shadows !== undefined)
+        mesh.castShadow = !!k.shadows; };
+    return g;
+}

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

@@ -0,0 +1,151 @@
+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;
+    split: number;
+    dispersion: number;
+    saturation: number;
+    changeTime: number;
+    dim: number;
+    pointerMode: string;
+    pointerRadius: 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: {
+        split?: undefined;
+        dispersion?: undefined;
+        saturation?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        split: number;
+        dispersion: number;
+        saturation: number;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        split: number;
+        dispersion: number;
+        saturation?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uSplit: {
+        value: number;
+    };
+    uDisp: {
+        value: number;
+    };
+    uSat: {
+        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=prismSplit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prismSplit.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/prismSplit.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,OAAO;;;;;;;;;CAEwD,CAAC;AAE7E,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIpB,CAAC;AACF,eAAO,MAAM,UAAU,UAAmC,CAAC;AAC3D,eAAO,MAAM,aAAa,UAAY,CAAC;AACvC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;IAQf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AACF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA2G;AACzI,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAAgI;AAoChK,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

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

@@ -0,0 +1,84 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// prism.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.prismSplit) do not carry; its own autoplay is never used.
+// prism — "Prism Split". Every picture is its three colour channels on three planes, added together: red, green
+// and blue each a sheet of light, so where they line up they sum to the true picture. An inactive picture's planes
+// stand apart in depth (and a little sideways, like light through a prism), dim and nearly grey, so it reads as a
+// faint picture with soft colour fringes. When it becomes the active one a soft wave crosses it and the planes slide
+// together behind it (the sheets bend along the front), the fringes thin out and the colour comes in full. The
+// cursor splits the planes apart again a little where it passes. Self-coloured (additive light).
+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: 'prismSplit', name: 'Prism Split', camera: { position: [1.0, 0.2, 4.6], target: [0, 0, 0] },
+    description: 'Pictures as their red, green and blue channels on three planes of light: inactive ones stand apart in depth, dim with soft colour fringes, the active one slides together into the true picture behind a soft wave; the cursor splits it again. Use for tech, music and optics-inspired showcases.',
+    tags: ['gallery', 'prism', 'rgb', 'chromatic', 'light', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'prismSplit', aspect: 1.4, width: 2.2,
+    split: 0.12, dispersion: 0.25, saturation: 0.3, changeTime: 1.8, dim: 0.28,
+    pointerMode: 'split', pointerRadius: 0.55,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width'];
+export const POINTER_MODES = ['split'];
+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: 'split', min: 0, max: 0.5, step: 0.005, tip: 'Depth between the colour planes of an inactive picture' },
+    { key: 'dispersion', min: 0, max: 1, step: 0.01, tip: 'Sideways offset of the planes, as a share of the split' },
+    { key: 'saturation', min: 0, max: 1, step: 0.01, tip: 'Colour of an inactive picture' },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL,
+];
+export const PRESETS = [
+    { name: 'Prism', description: 'The default.', patch: {} },
+    { name: 'Wide', description: 'Planes far apart, strong fringes.', patch: { split: 0.26, dispersion: 0.5, saturation: 0.5 } },
+    { name: 'Hairline', description: 'Barely apart: a thin fringe.', patch: { split: 0.05, dispersion: 0.15 } },
+];
+export function createUniforms() { return { ...baseUniforms(), uSplit: { value: 0.12 }, uDisp: { value: 0.25 }, uSat: { value: 0.3 } }; }
+export function applyConfig(u, c) { const set = applyBase(u, c, POINTER_MODES); set('uSplit', c.split); set('uDisp', c.dispersion); set('uSat', c.saturation); }
+const vert = /* glsl */ `
+    attribute vec4 aI;      // picture, channel 0 / 1 / 2
+    ${baseGlsl}
+    uniform float uSplit, uDisp;
+    varying vec2 vUv; varying float vImg; varying float vK; varying float vS; varying float vAlpha;
+    void main(){
+        float img = aI.x, k = aI.y; vec2 g = position.xy + 0.5;
+        vec2 p = vec2(position.x * uW, position.y * uH);
+        float s = waveAt(actOf(img), g);
+        float apart = (1.0 - s) + 0.8 * maskAt(p) * s;
+        float o = (k - 1.0) * uSplit * apart;
+        vec3 local = vec3(p.x + o * uDisp, p.y, o);
+        vUv = g; vImg = img; vK = k; vS = s; vAlpha = fadeAt(img);
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(placeAt(img, local), 1.0);
+    }
+`;
+const frag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    ${baseGlsl}
+    uniform float uSat;
+    varying vec2 vUv; varying float vImg; varying float vK; varying float vS; varying float vAlpha;
+    void main(){
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        float lum = lumOf(pic);
+        vec3 chan = vK < 0.5 ? vec3(1.0, 0.0, 0.0) : (vK < 1.5 ? vec3(0.0, 1.0, 0.0) : vec3(0.0, 0.0, 1.0));
+        float v = dot(mix(vec3(lum), pic, mix(uSat, 1.0, vS)), chan);
+        float b = mix(uDim, 1.0, vS) * vAlpha * uOpacity * uIntensity;
+        gl_FragColor = vec4(chan * v * b, 0.0);
+        #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, 32, 22), 3, () => [0, 0]);
+    const mat = shaderMaterial(u, vert, frag, { depthWrite: false, blending: THREE.AdditiveBlending });
+    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 * 3; } });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); };
+    return g;
+}