@3driseai/3drise-viewer 0.1.40 → 0.1.42

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

@@ -0,0 +1,399 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// lanterns.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.paperLanterns) do not carry; its own autoplay is never used.
+// lanterns — a gallery variant for 3drise (type 'gallery', config.type 'lanterns').
+//
+// A string of paper lanterns, one picture printed around each. The rope is a
+// catenary between two posts; every lantern hangs from it on a cord and is a real
+// pendulum (θ'' = −(g/l) sin θ − c θ' + wind), with a torsion twist about its
+// cord, so the set never sits still: a breeze drifts through, and a tug on the
+// rope (next / prev / a drag) runs a wave of swings down the line. One number
+// drives the set — the scroll position `s` on a damped spring — each lantern's
+// place on the rope is its offset from `s`; the lantern at the front hangs lower
+// on its cord, nearer the viewer, and is LIT: a real point light burns inside
+// it — the paper glows from the
+// inside with the picture's own colours, and the rim shows the translucency of
+// paper. The others glow softly. Pictures wrap the front half of each lantern
+// (paper tone on the back), with bamboo rings top and bottom. Cursor: `breeze`
+// — the cursor's motion is wind on the lanterns it passes; `glow` — the lantern
+// under the cursor brightens. Nothing is drawn at the cursor.
+import * as THREE from 'three';
+import { withLean } from '../kit/galleryKit.js';
+export const catalog = {
+    key: 'lanterns',
+    name: 'Paper Lanterns',
+    description: 'A string of paper lanterns with the pictures printed around them, each a swinging pendulum on a catenary rope; the front one hangs lower and glows from inside, a tug on the rope on every change. Use for festivals, night markets, warm showcases.',
+    tags: ['gallery', 'lanterns', 'pendulum', 'rope', 'light', 'night', 'navigation', 'interactive'],
+    camera: { position: [0.4, -0.1, 6.2], target: [0, 0.05, 0] },
+};
+export const DEFAULTS = {
+    type: 'lanterns',
+    enabled: true, lean: 1,
+    imageUrls: [],
+    autoplay: 0,
+    intensity: 1, // the lit lantern's lamp
+    opacity: 1,
+    // --- structural ---
+    aspect: 1.4, // picture aspect; the lantern's size follows (circumference-half × height)
+    radius: 0.42, // lantern radius
+    // --- the string ---
+    spacing: 1.35, // distance between lanterns, in diameters
+    sag: 0.35, // how much the rope hangs between the posts
+    span: 7, // the posts' distance (the rope's length across)
+    cord: 0.45, // cord length from rope to lantern
+    focusDrop: 0.55, // how much lower the front lantern hangs
+    focusLift: 0.9, // how far it comes toward the viewer
+    visible: 2.6, // lanterns each side before they fade
+    // --- motion ---
+    stiffness: 40, damping: 9, throwing: 0.15,
+    gravity: 9.8, // pendulum
+    swingDamping: 0.7,
+    wind: 0.5, // the breeze
+    tug: 1, // the swing a change sends down the rope
+    // --- light ---
+    glow: 0.35, // the unlit lanterns' inner glow
+    lamp: 1, // the lit one's inner glow
+    lampColor: '#ffb86b',
+    paperColor: '#f0dcc0',
+    rimColor: '#ffd9a6',
+    ringColor: '#3a2a1c',
+    // --- pointer ---
+    pointerMode: 'breeze',
+    pointerStrength: 1,
+    pointerRadius: 1.2,
+    pointerColor: '#ffe6c2',
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'radius'];
+export const POINTER_MODES = ['breeze', 'glow'];
+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: 'radius', min: 0.2, max: 0.8, step: 0.01 },
+    { key: 'spacing', min: 1, max: 3, step: 0.01 }, { key: 'sag', min: 0, max: 1.5, step: 0.01 }, { key: 'span', min: 3, max: 14, step: 0.1 }, { key: 'cord', min: 0.1, max: 1.5, step: 0.01 },
+    { key: 'focusDrop', min: 0, max: 1.5, step: 0.01 }, { key: 'focusLift', min: 0, max: 2, step: 0.01 }, { key: 'visible', min: 1, max: 6, step: 0.1 },
+    { key: 'stiffness', min: 5, max: 150, step: 1 }, { key: 'damping', min: 2, max: 30, step: 0.1 }, { key: 'throwing', min: 0, max: 0.5, step: 0.01 },
+    { key: 'gravity', min: 1, max: 30, step: 0.1 }, { key: 'swingDamping', min: 0, max: 4, step: 0.01 }, { key: 'wind', min: 0, max: 2, step: 0.01 }, { key: 'tug', min: 0, max: 3, step: 0.01 },
+    { key: 'glow', min: 0, max: 1, step: 0.01 }, { key: 'lamp', min: 0, max: 2, 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: 4, step: 0.01 },
+    { key: 'intensity', min: 0, max: 3, step: 0.01 }, { key: 'opacity', min: 0, max: 1, step: 0.01 },
+    { key: 'lampColor', color: true }, { key: 'paperColor', color: true }, { key: 'rimColor', color: true }, { key: 'ringColor', color: true }, { key: 'pointerColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Night market', description: 'The default: a warm string, a gentle breeze.', patch: {} },
+    { name: 'Still air', description: 'No wind, slow heavy swings, a long rope.', patch: { wind: 0.05, swingDamping: 0.35, gravity: 6, span: 10, sag: 0.6, spacing: 1.6 } },
+    { name: 'Storm', description: 'Gusts, fast swings, lanterns close together.', patch: { wind: 1.8, swingDamping: 0.5, gravity: 14, spacing: 1.1, sag: 0.5, tug: 2 } },
+    { name: 'Gallery wall', description: 'Taut rope, no sag, dim neighbours, a bright front.', patch: { sag: 0.02, wind: 0.15, glow: 0.12, lamp: 1.4, focusDrop: 0.8, focusLift: 1.2, spacing: 1.3 } },
+];
+const col = (c) => 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); };
+function mulberry32(a) { return function () { a |= 0; a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }
+export function createUniforms() {
+    return {
+        uTex: { value: null },
+        uGlow: { value: 0.35 }, uLamp: { value: 1 }, uIntensity: { value: 1 }, uOpacity: { value: 1 },
+        uLampColor: { value: col('#ffb86b') }, uPaperColor: { value: col('#f0dcc0') }, uRimColor: { value: col('#ffd9a6') }, uPointerColor: { value: col('#ffe6c2') },
+        uTime: { value: 0 },
+    };
+}
+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('uGlow', c.glow);
+    set('uLamp', c.lamp);
+    set('uIntensity', c.intensity);
+    set('uOpacity', c.opacity);
+    set('uLampColor', c.lampColor);
+    set('uPaperColor', c.paperColor);
+    set('uRimColor', c.rimColor);
+    set('uPointerColor', c.pointerColor);
+}
+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;   // lit (0..1), alpha, hover, phase
+    varying vec2 vUv; varying float vLayer; varying vec4 vState; varying vec3 vN; varying vec3 vV; varying vec3 vL;
+    void main(){
+        vUv = uv; vLayer = aIdx; vState = aState;
+        vec4 wp = instanceMatrix * vec4(position, 1.0);
+        vec4 mv = modelViewMatrix * wp;
+        vN = normalize(normalMatrix * mat3(instanceMatrix) * normal);
+        vV = -mv.xyz; vL = position;      // lantern-local: the lamp sits at the centre
+        gl_Position = projectionMatrix * mv;
+    }
+`;
+const frag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    uniform float uGlow, uLamp, uIntensity, uOpacity, uTime;
+    uniform vec3 uLampColor, uPaperColor, uRimColor, uPointerColor;
+    varying vec2 vUv; varying float vLayer; varying vec4 vState; varying vec3 vN; varying vec3 vV; varying vec3 vL;
+    void main(){
+        float lit = vState.x, alpha = vState.y, hover = vState.z;
+        // the picture wraps the front half (u 0.25..0.75 of the cylinder); paper on the back
+        float ux = fract(vUv.x + 0.5);                      // the cylinder's seam is at the back
+        float front = smoothstep(0.22, 0.27, ux) * (1.0 - smoothstep(0.73, 0.78, ux));
+        vec2 puv = vec2((ux - 0.25) * 2.0, vUv.y);
+        vec3 pic = texture(uTex, vec3(clamp(puv, 0.0, 1.0), vLayer)).rgb;
+        vec3 paper = uPaperColor * (0.96 + 0.04 * sin(vUv.x * 220.0));   // the paper's ribs
+        vec3 base = mix(paper, pic, front);
+        // light from inside: the lamp at the centre, brightest at mid height, falling to the rings
+        float inner = mix(uGlow, uLamp * uIntensity, lit);
+        float mid = 1.0 - 0.6 * pow(abs(vUv.y - 0.5) * 2.0, 2.0);
+        float flicker = 1.0 + lit * 0.05 * sin(uTime * 17.0 + vState.w * 10.0) * sin(uTime * 5.3);
+        vec3 N = normalize(vN); vec3 V = normalize(vV);
+        float ndv = abs(dot(N, V));
+        // translucent paper: light leaks most where we look through the paper at a grazing angle
+        float rim = pow(1.0 - ndv, 2.5);
+        vec3 c = base * (0.14 + inner * mid * flicker * 0.8) + uLampColor * inner * rim * 0.35 + uRimColor * rim * 0.06;
+        c += uPointerColor * hover * 0.25;
+        // the paper's weave against the light
+        c *= 0.975 + 0.025 * sin(vUv.x * 300.0) * sin(vUv.y * 120.0);
+        float a = alpha * uOpacity;
+        if (a < 0.003) discard;
+        gl_FragColor = vec4(c * a, a);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+const haloVert = /* glsl */ `
+    varying vec2 vQ;
+    uniform vec3 uHaloPos; uniform float uHaloSize;
+    void main(){ vQ = position.xy; vec4 mv = modelViewMatrix * vec4(uHaloPos, 1.0); mv.xy += position.xy * uHaloSize; gl_Position = projectionMatrix * mv; }
+`;
+const haloFrag = /* glsl */ `
+    ${fragHead}
+    uniform vec3 uLampColor; uniform float uHalo, uOpacity;
+    varying vec2 vQ;
+    void main(){ float r = length(vQ); float g = exp(-r * r * 4.0) * (1.0 - smoothstep(0.7, 1.0, r)); gl_FragColor = vec4(uLampColor * g * uHalo * 0.35 * uOpacity, 0.0);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment> }
+`;
+// ---------------------------------------------------------------- images: cover-fit array texture
+// ---------------------------------------------------------------- build
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const MAX = 32;
+    const r = c.radius, h = (Math.PI * r) / c.aspect; // the picture spans the front half-circumference
+    const geo = new THREE.CylinderGeometry(r, r, h, 48, 1, true);
+    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, glslVersion: THREE.GLSL3, side: THREE.DoubleSide, transparent: true, depthWrite: true, premultipliedAlpha: true });
+    const lanterns = new THREE.InstancedMesh(geo, mat, MAX);
+    lanterns.count = 0;
+    lanterns.frustumCulled = false;
+    lanterns.userData.pick = 'lanterns';
+    // bamboo rings: two per lantern, one instanced mesh
+    const ringGeo = new THREE.TorusGeometry(r * 1.02, r * 0.045, 8, 40);
+    const ringMat = new THREE.MeshStandardMaterial({ color: c.ringColor, roughness: 0.8, metalness: 0.05 });
+    const rings = new THREE.InstancedMesh(ringGeo, ringMat, MAX * 2);
+    rings.count = 0;
+    rings.frustumCulled = false;
+    rings.raycast = () => { };
+    // the rope (a catenary) and the cords
+    const ropeMat = new THREE.LineBasicMaterial({ color: '#5a4a3a', transparent: true, opacity: 0.9 });
+    const ropeGeo = new THREE.BufferGeometry();
+    ropeGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(64 * 3), 3));
+    const rope = new THREE.Line(ropeGeo, ropeMat);
+    const cordGeo = new THREE.BufferGeometry();
+    cordGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(MAX * 2 * 3), 3));
+    const cords = new THREE.LineSegments(cordGeo, ropeMat);
+    // the lit lantern: a real point light inside it, and a soft halo
+    const haloU = { uHaloPos: { value: new THREE.Vector3() }, uHaloSize: { value: r * 3.2 }, uHalo: { value: 1 }, uLampColor: u.uLampColor, uOpacity: u.uOpacity };
+    const halo = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.ShaderMaterial({ uniforms: haloU, vertexShader: haloVert, fragmentShader: haloFrag, glslVersion: THREE.GLSL3, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, premultipliedAlpha: true }));
+    halo.frustumCulled = false;
+    halo.raycast = () => { };
+    halo.renderOrder = 4;
+    rope.raycast = () => { };
+    cords.raycast = () => { }; // only the lanterns take clicks
+    const object = new THREE.Group();
+    object.add(rope, cords, rings, lanterns, halo);
+    const rnd = mulberry32(5);
+    const st = {
+        cfg: { ...c }, count: 0, s: 0, v: 0, target: 0, dragging: false, dragS0: 0, dragX0: 0, lastDx: 0,
+        th: new Float32Array(MAX), om: new Float32Array(MAX), // pendulum angle (swing in z) and its rate
+        tw: new Float32Array(MAX), tv: new Float32Array(MAX), // torsion twist about the cord
+        phase: new Float32Array(MAX).map(() => rnd() * 6.283), hoverT: new Float32Array(MAX), hover: -1,
+        time: 0, autoT: 0, pointer: null, prevPointer: null, tugQueue: [], gust: 0, gustT: 0,
+    };
+    const M = new THREE.Matrix4(), P = new THREE.Vector3(), Q = new THREE.Quaternion(), S = new THREE.Vector3(), E = new THREE.Euler();
+    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 = 2 * r * k.spacing;
+        const ropeTop = 0.9; // rope height (gallery units) at the posts
+        const rp = ropeGeo.attributes.position.array;
+        for (let i = 0; i < 64; i++) {
+            const x = -k.span / 2 + (i / 63) * k.span;
+            rp[i * 3] = x;
+            rp[i * 3 + 1] = ropeTop - k.sag * (1 - (x * x) / (k.span * k.span / 4));
+            rp[i * 3 + 2] = 0;
+        }
+        ropeGeo.attributes.position.needsUpdate = true;
+        const cp = cordGeo.attributes.position.array;
+        let litPos = null;
+        for (let i = 0; i < n; i++) {
+            const d = wrap(i - st.s, n);
+            const ad = Math.abs(d);
+            const focus = 1 - smooth(0, 0.9, ad);
+            const x = d * pitch;
+            const ry = ropeTop - k.sag * Math.max(0, 1 - (x * x) / (k.span * k.span / 4));
+            const L = k.cord + k.focusDrop * focus; // cord length: the front one hangs lower
+            // pendulum: swing angle th about the rope (x axis): the lantern swings in z; twist about the cord
+            const th = st.th[i], tw = st.tw[i];
+            const bx = x, by = ry - L * Math.cos(th) - h / 2, bz = L * Math.sin(th) + k.focusLift * focus;
+            P.set(bx, by, bz);
+            E.set(th, tw, 0, 'XYZ');
+            Q.setFromEuler(E);
+            S.set(1, 1, 1);
+            M.compose(P, Q, S);
+            lanterns.setMatrixAt(i, M);
+            // rings at the top and bottom of the lantern, in its frame
+            const top = new THREE.Vector3(0, h / 2, 0).applyQuaternion(Q).add(P), bot = new THREE.Vector3(0, -h / 2, 0).applyQuaternion(Q).add(P);
+            const RQ = Q.clone().multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI / 2, 0, 0)));
+            M.compose(top, RQ, S);
+            rings.setMatrixAt(i * 2, M);
+            M.compose(bot, RQ, S);
+            rings.setMatrixAt(i * 2 + 1, M);
+            cp.set([x, ry, 0, top.x, top.y, top.z], i * 6);
+            const alpha = (1 - smooth(k.visible - 0.7, k.visible, ad)) * (Math.abs(x) < k.span / 2 - r ? 1 : 0);
+            state[i * 4] = focus;
+            state[i * 4 + 1] = alpha;
+            state[i * 4 + 2] = st.hoverT[i];
+            state[i * 4 + 3] = st.phase[i];
+            if (focus > 0) {
+                if (!litPos) {
+                    litPos = new THREE.Vector3();
+                    litPos.w = 0;
+                }
+                litPos.addScaledVector(P, focus);
+                litPos.w += focus;
+            }
+        }
+        for (let i = n; i < MAX; i++)
+            cp.set([0, 0, 0, 0, 0, 0], i * 6);
+        lanterns.count = n;
+        rings.count = n * 2;
+        cordGeo.setDrawRange(0, n * 2);
+        lanterns.computeBoundingSphere(); // the lanterns move every frame: keep the click test's bounds current
+        lanterns.instanceMatrix.needsUpdate = true;
+        rings.instanceMatrix.needsUpdate = true;
+        aState.needsUpdate = true;
+        cordGeo.attributes.position.needsUpdate = true;
+        if (litPos && litPos.w > 0) {
+            litPos.multiplyScalar(1 / litPos.w);
+            haloU.uHaloPos.value.copy(litPos);
+        }
+    }
+    const controls = {
+        next() { st.target = Math.round(st.target) + 1; st.autoT = 0; tug(+1); },
+        prev() { st.target = Math.round(st.target) - 1; st.autoT = 0; tug(-1); },
+        goTo(i) { const n = st.count; if (!n)
+            return; const cur = ((Math.round(st.s) % n) + n) % n; const dd = wrap(i - cur, n); st.target = Math.round(st.s) + dd; st.autoT = 0; tug(Math.sign(dd) || 1); },
+        jump(i) { st.s = st.target = i; st.v = 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; },
+        setTexture(tex, count) { if (u.uTex.value)
+            u.uTex.value.dispose(); u.uTex.value = tex; st.count = Math.min(count, MAX); layout(0); },
+        dragBegin(x) { st.dragging = true; st.dragS0 = st.s; st.dragX0 = x; st.v = 0; },
+        dragMove(x) { if (!st.dragging)
+            return; const ns = st.dragS0 - (x - st.dragX0) / (2 * r * st.cfg.spacing); 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); tug(Math.sign(st.v) || 1); },
+        get dragging() { return st.dragging; },
+        hover(i) { st.hover = i; },
+    };
+    /** a tug on the rope: an impulse that runs down the line, delayed by distance from the front */
+    function tug(dir) { st.tugQueue.push({ t: 0, dir }); }
+    object.userData.gallery = controls;
+    return {
+        object, controls, lanterns, materials: [mat, ringMat, ropeMat, halo.material],
+        /** The picture under a click / the cursor: the lantern hit (a visible one), or undefined. */
+        pickPicture(hit) { const i = hit.object === lanterns ? hit.instanceId : undefined; return i !== undefined && i < st.count && state[i * 4 + 1] > 0.05 ? i : undefined; },
+        apply(cfg) { Object.assign(st.cfg, cfg); applyConfig(u, cfg); if (cfg.ringColor)
+            ringMat.color.set(cfg.ringColor); },
+        /** pointer: { x, y } on the z = 0 plane in gallery units, or null */
+        update(dt, pointer) {
+            dt = Math.min(dt, 0.05);
+            st.time += dt;
+            u.uTime.value = st.time;
+            const k = st.cfg, n = st.count;
+            if (!st.dragging) {
+                const sub = 4, hh = dt / sub;
+                for (let q = 0; q < sub; q++) {
+                    st.v += (k.stiffness * (st.target - st.s) - k.damping * st.v) * hh;
+                    st.s += st.v * hh;
+                }
+            }
+            if (k.autoplay > 0 && n > 1 && !pointer && !st.dragging) {
+                st.autoT += dt;
+                if (st.autoT >= k.autoplay)
+                    controls.next();
+            }
+            // the breeze: a slow gust field plus the cursor's wake
+            st.gustT += dt;
+            if (st.gustT > 3 + rnd() * 4) {
+                st.gustT = 0;
+                st.gust = (rnd() - 0.3) * k.wind;
+            }
+            const breeze = k.wind * (0.6 * Math.sin(st.time * 0.37) * Math.sin(st.time * 0.11 + 1.3) + 0.4 * Math.sin(st.time * 0.9)) + st.gust * Math.exp(-st.gustT * 0.8);
+            let cursorWind = 0, cx = 0;
+            if (pointer && st.prevPointer && k.pointerMode === 'breeze') {
+                cursorWind = (pointer.x - st.prevPointer.x) / dt * 0.35 * k.pointerStrength;
+                cx = pointer.x;
+            }
+            st.prevPointer = pointer ? { ...pointer } : null;
+            // pendulums (semi-implicit Euler), with the tugs running down the rope
+            for (const tq of st.tugQueue)
+                tq.t += dt;
+            const pitch = 2 * r * k.spacing;
+            for (let i = 0; i < n; i++) {
+                const d = wrap(i - st.s, n);
+                const L = k.cord + k.focusDrop * (1 - smooth(0, 0.9, Math.abs(d)));
+                let F = breeze * 0.9 * (0.7 + 0.3 * Math.sin(st.phase[i] + st.time * 0.5));
+                if (cursorWind)
+                    F += cursorWind * Math.exp(-Math.pow((d * pitch - cx) / k.pointerRadius, 2));
+                for (const tq of st.tugQueue) {
+                    const arrive = Math.abs(d) * 0.09;
+                    const dtq = tq.t - arrive;
+                    if (dtq > 0 && dtq < 0.25)
+                        F += tq.dir * k.tug * 6.0 * Math.sin(dtq / 0.25 * Math.PI);
+                }
+                // the scroll itself drags the lanterns through the air (rope acceleration)
+                F -= st.v * 0.6;
+                const acc = -(k.gravity / Math.max(0.1, L)) * Math.sin(st.th[i]) - k.swingDamping * st.om[i] + F;
+                st.om[i] += acc * dt;
+                st.th[i] += st.om[i] * dt;
+                const tacc = -12 * st.tw[i] - 1.5 * st.tv[i] + F * 0.15 * Math.sin(st.phase[i] * 3.0);
+                st.tv[i] += tacc * dt;
+                st.tw[i] += st.tv[i] * dt;
+                st.hoverT[i] += (((st.hover === i && k.pointerMode === 'glow') ? 1 : 0) - st.hoverT[i]) * (1 - Math.exp(-dt * 8));
+            }
+            st.tugQueue = st.tugQueue.filter((tq) => tq.t < 4);
+            // the lit lantern's lamp: the real light follows the front lantern
+            haloU.uHalo.value = k.lamp * k.intensity;
+            layout(dt);
+        },
+        dispose() { geo.dispose(); ringGeo.dispose(); ropeGeo.dispose(); cordGeo.dispose(); halo.geometry.dispose(); mat.dispose(); ringMat.dispose(); ropeMat.dispose(); halo.material.dispose(); if (u.uTex.value)
+            u.uTex.value.dispose(); },
+    };
+}

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

@@ -0,0 +1,193 @@
+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;
+    enabled: boolean;
+    lean: number;
+    imageUrls: any[];
+    autoplay: number;
+    intensity: number;
+    opacity: number;
+    aspect: number;
+    width: number;
+    grains: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    changeTime: number;
+    wave: number;
+    slant: number;
+    lift: number;
+    particleSize: number;
+    faded: number;
+    grain: number;
+    pointerMode: string;
+    pointerStrength: number;
+    pointerRadius: 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;
+    tip: string;
+    options?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    options?: undefined;
+} | {
+    key: string;
+    options: string[];
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        wave?: undefined;
+        lift?: undefined;
+        changeTime?: undefined;
+        particleSize?: undefined;
+        grains?: undefined;
+        slant?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        wave: number;
+        lift: number;
+        changeTime: number;
+        particleSize?: undefined;
+        grains?: undefined;
+        slant?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        particleSize: number;
+        grains: number;
+        wave: number;
+        slant: number;
+        lift?: undefined;
+        changeTime?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uTex: {
+        value: any;
+    };
+    uS: {
+        value: number;
+    };
+    uCount: {
+        value: number;
+    };
+    uTime: {
+        value: number;
+    };
+    uAct: {
+        value: Float32Array<ArrayBuffer>;
+    };
+    uSpacing: {
+        value: number;
+    };
+    uDepth: {
+        value: number;
+    };
+    uVisible: {
+        value: number;
+    };
+    uWave: {
+        value: number;
+    };
+    uSlant: {
+        value: number;
+    };
+    uLift: {
+        value: number;
+    };
+    uSize: {
+        value: number;
+    };
+    uFaded: {
+        value: number;
+    };
+    uGrain: {
+        value: number;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uW: {
+        value: number;
+    };
+    uH: {
+        value: number;
+    };
+    uGx: {
+        value: number;
+    };
+    uGy: {
+        value: number;
+    };
+    uDpr: {
+        value: number;
+    };
+    uVh: {
+        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=particleShift.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"particleShift.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/particleShift.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,OAAO;;;;;;;;;CAEiF,CAAC;AAEtG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQpB,CAAC;AACF,eAAO,MAAM,UAAU,UAA6C,CAAC;AACrE,eAAO,MAAM,aAAa,UAAY,CAAC;AACvC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;IAUf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AAEF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAU7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAM/B;AA4HD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}