@3driseai/3drise-viewer 0.1.1

package/dist/components/effects/Fire.d.ts

@@ -0,0 +1,20 @@
+import type { Object3D } from 'three';
+import { AnimationOptions, FireConfig } from "@3driseai/3drise-core";
+export interface FireProps {
+    /**
+     * Host object to wrap. When provided, the fire auto-fits the host's
+     * bounding sphere. mode 'wrap' scatters flame tongues across the host's
+     * surface; mode 'crown' keeps a single flame sitting on top.
+     *
+     * The host may live anywhere in the scene graph at any position — the fit
+     * is computed in world space and converted into this component's parent
+     * frame, so <Fire /> works as a sibling, child, or distant relative of
+     * the host.
+     */
+    hostRef?: Object3D | null;
+    config: FireConfig;
+    animations?: AnimationOptions[];
+}
+declare const Fire: ({ hostRef, config, animations }: FireProps) => import("react").JSX.Element;
+export default Fire;
+//# sourceMappingURL=Fire.d.ts.map

package/dist/components/effects/Fire.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fire.d.ts","sourceRoot":"","sources":["../../../src/components/effects/Fire.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACrE,MAAM,WAAW,SAAS;IACtB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqFD,QAAA,MAAM,IAAI,GAAI,iCAAiC,SAAS,gCAwHvD,CAAC;AACF,eAAe,IAAI,CAAC"}

package/dist/components/effects/Fire.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box3, Sphere, Color, Vector3, Matrix4, PlaneGeometry, InstancedBufferGeometry, InstancedBufferAttribute, } from 'three';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+// Add to FireConfig in 3drize-core:
+//   mode?: 'crown' | 'wrap'   // wrap scatters tongues over the host surface
+//   coverage?: number         // 0..1 — how far down the host burns (wrap)
+//   tongues?: number          // tongue count for wrap, default 36
+const _box = new Box3();
+const _sphere = new Sphere();
+const _mat = new Matrix4();
+const _anchor = new Vector3();
+const _p = new Vector3();
+const _vA = new Vector3();
+const _vB = new Vector3();
+const _vC = new Vector3();
+const _ab = new Vector3();
+const _ac = new Vector3();
+/**
+ * Area-weighted random sampling of the host's triangles, in world space.
+ * Self-contained so the core package needs no three/examples dependency.
+ */
+function sampleSurface(host, count) {
+    host.updateWorldMatrix(true, true);
+    const tris = [];
+    let total = 0;
+    host.traverse((obj) => {
+        const mesh = obj;
+        if (!mesh.isMesh)
+            return;
+        const geo = mesh.geometry;
+        const pos = geo.getAttribute('position');
+        if (!pos)
+            return;
+        const idx = geo.index;
+        const triCount = (idx ? idx.count : pos.count) / 3;
+        for (let i = 0; i < triCount; i++) {
+            const ia = idx ? idx.getX(i * 3) : i * 3;
+            const ib = idx ? idx.getX(i * 3 + 1) : i * 3 + 1;
+            const ic = idx ? idx.getX(i * 3 + 2) : i * 3 + 2;
+            _vA.fromBufferAttribute(pos, ia).applyMatrix4(mesh.matrixWorld);
+            _vB.fromBufferAttribute(pos, ib).applyMatrix4(mesh.matrixWorld);
+            _vC.fromBufferAttribute(pos, ic).applyMatrix4(mesh.matrixWorld);
+            const area = _ab.subVectors(_vB, _vA).cross(_ac.subVectors(_vC, _vA)).length() * 0.5;
+            if (area <= 0)
+                continue;
+            total += area;
+            tris.push({ a: _vA.clone(), b: _vB.clone(), c: _vC.clone(), cum: total });
+        }
+    });
+    if (!tris.length)
+        return [];
+    const points = [];
+    for (let s = 0; s < count; s++) {
+        // Binary search the cumulative-area table.
+        const r = Math.random() * total;
+        let lo = 0;
+        let hi = tris.length - 1;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (tris[mid].cum < r)
+                lo = mid + 1;
+            else
+                hi = mid;
+        }
+        const tri = tris[lo];
+        let u = Math.random();
+        let v = Math.random();
+        if (u + v > 1) {
+            u = 1 - u;
+            v = 1 - v;
+        }
+        const p = tri.a
+            .clone()
+            .multiplyScalar(1 - u - v)
+            .addScaledVector(tri.b, u)
+            .addScaledVector(tri.c, v);
+        const n = _ab
+            .subVectors(tri.b, tri.a)
+            .cross(_ac.subVectors(tri.c, tri.a))
+            .normalize()
+            .clone();
+        points.push({ p, n });
+    }
+    return points;
+}
+const Fire = ({ hostRef, config, animations }) => {
+    const group = useRef(null);
+    const material = useRef(null);
+    const lightRef = useRef(null);
+    const { radius = 1, height = 2.5, radiusScale = 1, heightScale = 1, intensity = 1, speed = 1, turbulence = 1.5, sway = 1, tint = '#ffffff', light = true, mode = 'tongues', coverage = 0.85, tongues = 36, } = config;
+    const tintColor = useMemo(() => new Color(tint), [tint]);
+    // Shared instanced quad — per-tongue attributes are (re)filled on fit.
+    const geometry = useMemo(() => {
+        const base = new PlaneGeometry(1, 1);
+        const geo = new InstancedBufferGeometry();
+        geo.index = base.index;
+        geo.setAttribute('position', base.getAttribute('position'));
+        geo.setAttribute('uv', base.getAttribute('uv'));
+        return geo;
+    }, []);
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    function setInstances(offsets, sizes, seeds) {
+        geometry.setAttribute('a_offset', new InstancedBufferAttribute(new Float32Array(offsets), 3));
+        geometry.setAttribute('a_size', new InstancedBufferAttribute(new Float32Array(sizes), 2));
+        geometry.setAttribute('a_seed', new InstancedBufferAttribute(new Float32Array(seeds), 1));
+        geometry.instanceCount = seeds.length;
+    }
+    // ── Auto-fit + tongue placement ──
+    useLayoutEffect(() => {
+        const host = hostRef;
+        // Free-standing: single tongue at the group origin.
+        if (!host) {
+            material.current.u_radius = radius * radiusScale;
+            material.current.u_height = height * heightScale;
+            setInstances([0, 0, 0], [1, 1], [Math.random() * 100]);
+            return;
+        }
+        host.updateWorldMatrix(true, true);
+        _box.setFromObject(host);
+        if (_box.isEmpty())
+            return;
+        _box.getBoundingSphere(_sphere);
+        const r = _sphere.radius;
+        const spanY = Math.max(_box.max.y - _box.min.y, 1e-4);
+        material.current.u_radius = r * 1.1 * radiusScale;
+        material.current.u_height = r * 3.2 * heightScale;
+        // The fit above is in WORLD space, but this group may be nested under
+        // transformed ancestors. Convert every world-space value into the
+        // parent's local frame so the host can sit anywhere in the scene.
+        const parentObj = group.current.parent;
+        parentObj?.updateWorldMatrix(true, false);
+        const invParent = parentObj
+            ? _mat.copy(parentObj.matrixWorld).invert()
+            : _mat.identity();
+        if (mode === 'crown') {
+            // Single flame nestled on the host's crown (campfire-style).
+            _anchor
+                .set(_sphere.center.x, _box.max.y - r * 0.15, _sphere.center.z)
+                .applyMatrix4(invParent);
+            group.current.position.copy(_anchor);
+            setInstances([0, 0, 0], [1, 1], [Math.random() * 100]);
+            return;
+        }
+        // ── wrap: scatter tongues across the host surface ──
+        _anchor.copy(_sphere.center).applyMatrix4(invParent);
+        group.current.position.copy(_anchor);
+        // Oversample, then keep points inside the coverage band (fire climbs,
+        // so the band is anchored to the top with a noisy lower edge).
+        const raw = sampleSurface(host, tongues * 4);
+        const offsets = [];
+        const sizes = [];
+        const seeds = [];
+        let kept = 0;
+        for (const sp of raw) {
+            if (kept >= tongues)
+                break;
+            const hNorm = (sp.p.y - _box.min.y) / spanY;
+            if (hNorm + (Math.random() - 0.5) * 0.25 < 1 - coverage)
+                continue;
+            // Lift slightly off the surface, then express the anchor in
+            // group-local space: parent-local point minus the group's position.
+            _p.copy(sp.p)
+                .addScaledVector(sp.n, r * 0.02)
+                .applyMatrix4(invParent)
+                .sub(_anchor);
+            offsets.push(_p.x, _p.y, _p.z);
+            // Tongues grow toward the top — convection feeds the upper flames.
+            const grow = 0.6 + 0.6 * hNorm;
+            sizes.push((0.16 + Math.random() * 0.18) * grow, (0.28 + Math.random() * 0.30) * grow);
+            seeds.push(Math.random() * 100);
+            kept++;
+        }
+        // Crown tongue: the big body of fire rising off the top.
+        _p.set(_sphere.center.x, _box.max.y - r * 0.15, _sphere.center.z)
+            .applyMatrix4(invParent)
+            .sub(_anchor);
+        offsets.push(_p.x, _p.y, _p.z);
+        sizes.push(0.8, 0.95);
+        seeds.push(Math.random() * 100);
+        setInstances(offsets, sizes, seeds);
+    }, [
+        hostRef,
+        mode,
+        coverage,
+        tongues,
+        radius,
+        height,
+        radiusScale,
+        heightScale,
+        geometry,
+    ]);
+    useFrame(({ clock }) => {
+        const t = clock.getElapsedTime();
+        material.current.u_time = t;
+        if (light && lightRef.current) {
+            // Low-frequency flicker — calm, ember-like, no strobing.
+            const flicker = 0.82 +
+                0.12 * Math.sin(t * 7.3) * Math.sin(t * 3.1) +
+                0.06 * Math.sin(t * 13.7 + 1.4);
+            lightRef.current.intensity = intensity * 14 * flicker;
+            lightRef.current.position.y =
+                material.current.u_height * (0.35 + 0.03 * Math.sin(t * 5.1));
+        }
+    });
+    return (_jsxs("group", { ref: group, children: [_jsx("mesh", { geometry: geometry, frustumCulled: false, children: _jsx("fireMaterial", { ref: material, u_intensity: intensity, u_speed: speed, u_turbulence: turbulence, u_sway: sway, u_tint: tintColor }) }), light && (_jsx("pointLight", { ref: lightRef, color: "#ff7a26", distance: 0, decay: 2 }))] }));
+};
+export default Fire;

package/dist/components/effects/FireEffect.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { FireConfig, AnimationOptions } from "@3driseai/3drise-core";
+interface FireEffectProps {
+    boundingRadius: number;
+    config: FireConfig;
+    animations?: AnimationOptions[];
+}
+declare const FireEffect: React.FC<FireEffectProps>;
+export default FireEffect;
+//# sourceMappingURL=FireEffect.d.ts.map

package/dist/components/effects/FireEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FireEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FireEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC1E,UAAU,eAAe;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAwGD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsFzC,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/effects/FireEffect.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+// ── Flame particle vertex shader ──────────────────────────────────────────────
+const flameVert = /* glsl */ `
+  attribute float aT;       // lifetime position 0..1 (base→tip)
+  attribute vec2  aBase;    // (x, z) spawn position within disc
+  attribute float aSpeed;   // per-particle rise speed variation
+  attribute float aPhase;   // noise phase offset
+
+  uniform float u_time;
+  uniform float u_speed;
+  uniform float uHeight;
+  uniform float uSpread;
+  uniform float uSize;
+
+  varying float vT;
+
+  void main() {
+    // Loop t upward continuously
+    float t = fract(aT + u_time * u_speed * aSpeed);
+    vT = t;
+
+    // Rise in Y, shrink spread toward tip
+    float spreadScale = 1.0 - t * 0.85;
+    float x = aBase.x * spreadScale * uSpread;
+    float z = aBase.y * spreadScale * uSpread;
+
+    // Turbulent horizontal sway (FBM-like with 2 sines)
+    float sway1 = sin(t * 3.8 + u_time * 1.6 + aPhase)        * 0.18 * uSpread * (1.0 - t);
+    float sway2 = sin(t * 6.2 - u_time * 2.3 + aPhase * 1.7)  * 0.09 * uSpread * (1.0 - t);
+    x += sway1 + sway2;
+    z += cos(t * 4.1 + u_time * 1.9 + aPhase * 0.8) * 0.12 * uSpread * (1.0 - t);
+
+    float y = t * uHeight - uHeight * 0.5;
+
+    // Shrink point size toward tip
+    gl_PointSize = uSize * (1.0 - t * 0.8) * (200.0 / -(modelViewMatrix * vec4(x, y, z, 1.0)).z);
+    gl_Position  = projectionMatrix * modelViewMatrix * vec4(x, y, z, 1.0);
+  }
+`;
+const flameFrag = /* glsl */ `
+  uniform vec3  uFlameColor;
+  uniform vec3  uTipColor;
+  uniform float uOpacity;
+  varying float vT;
+
+  void main() {
+    vec2  c = gl_PointCoord - 0.5;
+    float d = length(c);
+    if (d > 0.5) discard;
+    float g = exp(-d * d * 5.5);
+
+    // Color: flameColor at base → mid orange → tipColor near top → transparent
+    float t2 = vT * vT;
+    vec3 midCol = mix(uFlameColor, vec3(1.0, 0.65, 0.1), 0.5);
+    vec3 col = t2 < 0.4
+      ? mix(uFlameColor, midCol,   t2 / 0.4)
+      : mix(midCol,     uTipColor, (t2 - 0.4) / 0.6);
+
+    // Fade out at tip and base
+    float alpha = g * uOpacity * smoothstep(0.0, 0.12, vT) * (1.0 - smoothstep(0.75, 1.0, vT));
+    if (alpha < 0.01) discard;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+// ── Ember vertex shader ───────────────────────────────────────────────────────
+const emberVert = /* glsl */ `
+  attribute float aT;
+  attribute vec3  aDrift;   // (vx, vy, vz) drift velocity
+  attribute float aPhase;
+
+  uniform float u_time;
+  uniform float u_speed;
+  uniform float uHeight;
+
+  varying float vT;
+
+  void main() {
+    float t = fract(aT + u_time * u_speed * 0.4);
+    vT = t;
+
+    float x = aDrift.x * t * 1.8 + sin(t * 5.0 + aPhase) * 0.15;
+    float y = t * uHeight * 1.3 - uHeight * 0.4;
+    float z = aDrift.z * t * 1.8 + cos(t * 4.0 + aPhase) * 0.12;
+
+    gl_PointSize = (1.0 - t) * 5.0 * (200.0 / -(modelViewMatrix * vec4(x, y, z, 1.0)).z);
+    gl_Position  = projectionMatrix * modelViewMatrix * vec4(x, y, z, 1.0);
+  }
+`;
+const emberFrag = /* glsl */ `
+  uniform float uOpacity;
+  varying float vT;
+
+  void main() {
+    vec2  c = gl_PointCoord - 0.5;
+    if (length(c) > 0.5) discard;
+    float g     = exp(-dot(c, c) * 7.0);
+    float alpha = g * uOpacity * (1.0 - vT) * smoothstep(0.0, 0.08, vT);
+    if (alpha < 0.01) discard;
+    // Orange-white ember color
+    gl_FragColor = vec4(1.0, 0.65 + (1.0 - vT) * 0.35, 0.2 * (1.0 - vT), alpha);
+  }
+`;
+const FireEffect = ({ boundingRadius, config, animations }) => {
+    const { particleCount, height, spread, flameColor, tipColor, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const h = boundingRadius * height;
+    const s = boundingRadius * spread;
+    const { flameGeo, flameMat, emberGeo, emberMat } = useMemo(() => {
+        const N = Math.max(50, particleCount);
+        const E = Math.floor(N * 0.2);
+        // ── Flame geometry ─────────────────────────────────────────────────────
+        const aT = new Float32Array(N);
+        const aBase = new Float32Array(N * 2);
+        const aSpeed = new Float32Array(N);
+        const aPhase = new Float32Array(N);
+        for (let i = 0; i < N; i++) {
+            aT[i] = i / N;
+            const r = Math.sqrt(Math.random()) * s;
+            const a = Math.random() * Math.PI * 2;
+            aBase[i * 2] = Math.cos(a) * r;
+            aBase[i * 2 + 1] = Math.sin(a) * r;
+            aSpeed[i] = 0.6 + Math.random() * 0.8;
+            aPhase[i] = Math.random() * Math.PI * 2;
+        }
+        const fGeo = new THREE.BufferGeometry();
+        fGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(N * 3), 3));
+        fGeo.setAttribute('aT', new THREE.BufferAttribute(aT, 1));
+        fGeo.setAttribute('aBase', new THREE.BufferAttribute(aBase, 2));
+        fGeo.setAttribute('aSpeed', new THREE.BufferAttribute(aSpeed, 1));
+        fGeo.setAttribute('aPhase', new THREE.BufferAttribute(aPhase, 1));
+        const fc = new THREE.Color(flameColor);
+        const tc = new THREE.Color(tipColor);
+        const fMat = new THREE.ShaderMaterial({
+            vertexShader: flameVert,
+            fragmentShader: flameFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                u_speed: { value: speed },
+                uHeight: { value: h },
+                uSpread: { value: s },
+                uSize: { value: 20 * intensity },
+                uFlameColor: { value: new THREE.Vector3(fc.r, fc.g, fc.b) },
+                uTipColor: { value: new THREE.Vector3(tc.r, tc.g, tc.b) },
+                uOpacity: { value: opacity },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // ── Ember geometry ─────────────────────────────────────────────────────
+        const eT = new Float32Array(E);
+        const eDrift = new Float32Array(E * 3);
+        const ePhase = new Float32Array(E);
+        for (let i = 0; i < E; i++) {
+            eT[i] = i / E;
+            const a = Math.random() * Math.PI * 2;
+            const r = (0.2 + Math.random() * 0.8) * s;
+            eDrift[i * 3] = Math.cos(a) * r;
+            eDrift[i * 3 + 1] = 0;
+            eDrift[i * 3 + 2] = Math.sin(a) * r;
+            ePhase[i] = Math.random() * Math.PI * 2;
+        }
+        const eGeo = new THREE.BufferGeometry();
+        eGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(E * 3), 3));
+        eGeo.setAttribute('aT', new THREE.BufferAttribute(eT, 1));
+        eGeo.setAttribute('aDrift', new THREE.BufferAttribute(eDrift, 3));
+        eGeo.setAttribute('aPhase', new THREE.BufferAttribute(ePhase, 1));
+        const eMat = new THREE.ShaderMaterial({
+            vertexShader: emberVert,
+            fragmentShader: emberFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                u_speed: { value: speed },
+                uHeight: { value: h },
+                uOpacity: { value: opacity * 0.7 },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        return { flameGeo: fGeo, flameMat: fMat, emberGeo: eGeo, emberMat: eMat };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [particleCount, h, s, flameColor, tipColor, opacity, speed, intensity]);
+    useFrame((state) => {
+        const t = state.clock.getElapsedTime();
+        flameMat.uniforms.u_time.value = t;
+        emberMat.uniforms.u_time.value = t;
+        if (animations?.length) {
+            applyGenerativeAnimations([flameMat, emberMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { position: [0, boundingRadius * 0.1, 0], children: [_jsx("points", { geometry: flameGeo, material: flameMat }), _jsx("points", { geometry: emberGeo, material: emberMat })] }));
+};
+export default FireEffect;

package/dist/components/effects/ForcefieldEffect.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ForcefieldConfig, AnimationOptions } from "@3driseai/3drise-core";
+interface ForcefieldEffectProps {
+    boundingRadius: number;
+    config: ForcefieldConfig;
+    animations?: AnimationOptions[];
+}
+declare const ForcefieldEffect: React.FC<ForcefieldEffectProps>;
+export default ForcefieldEffect;
+//# sourceMappingURL=ForcefieldEffect.d.ts.map

package/dist/components/effects/ForcefieldEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForcefieldEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ForcefieldEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAChF,UAAU,qBAAqB;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA6ED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmDrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/ForcefieldEffect.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+const shieldVert = /* glsl */ `
+  varying vec3 vNormal;
+  varying vec3 vWorldPos;
+  varying vec2 vUv;
+  void main() {
+    vNormal   = normalize(normalMatrix * normal);
+    vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;
+    vUv       = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const shieldFrag = /* glsl */ `
+  uniform float u_time;
+  uniform float uHexSize;
+  uniform vec3  uShieldColor;
+  uniform vec3  uRimColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+
+  // Ripple slots (3 simultaneous)
+  uniform vec3  uHitPos[3];
+  uniform float uHitTime[3];
+
+  varying vec3 vNormal;
+  varying vec3 vWorldPos;
+  varying vec2 vUv;
+
+  // ── Analytical hex grid in 3D via world-space spherical UV ───────────────
+  vec2 hexCoord(vec2 p) {
+    const float SQRT3 = 1.7320508;
+    vec2 r = vec2(1.0, SQRT3);
+    vec2 h = r * 0.5;
+    vec2 a = mod(p,       r) - h;
+    vec2 b = mod(p + h,   r) - h;
+    return dot(a, a) < dot(b, b) ? a : b;
+  }
+
+  float hexEdge(vec2 p, float size) {
+    vec2 hc = hexCoord(p / size);
+    float d = length(hc);
+    // Edge = thin ring at cell boundary
+    return 1.0 - smoothstep(size * 0.38, size * 0.46, d);
+  }
+
+  void main() {
+    // Spherical UV from world normal
+    vec3  n   = normalize(vNormal);
+    float phi  = atan(n.z, n.x);
+    float theta = acos(clamp(n.y, -1.0, 1.0));
+    vec2  suv  = vec2(phi / 6.28318, theta / 3.14159);
+
+    float edge = hexEdge(suv, uHexSize);
+
+    // Fresnel rim
+    vec3  viewDir = normalize(cameraPosition - vWorldPos);
+    float fresnel = pow(1.0 - abs(dot(n, viewDir)), 2.5);
+
+    // Ripple contributions
+    float ripple = 0.0;
+    for (int k = 0; k < 3; k++) {
+      float age  = u_time - uHitTime[k];
+      if (age < 0.0 || age > 2.0) continue;
+      float dist = distance(vWorldPos, uHitPos[k]);
+      float wave = sin(dist * 14.0 - age * 9.0) * exp(-dist * 2.5) * exp(-age * 1.4);
+      ripple    += wave * 0.7;
+    }
+
+    vec3  col   = mix(uShieldColor, uRimColor, fresnel * 0.6 + edge * 0.4);
+    float alpha = (edge * 0.55 + fresnel * 0.3 + max(0.0, ripple) * 0.45 + 0.04)
+                  * uOpacity * uIntensity;
+    if (alpha < 0.005) discard;
+    gl_FragColor = vec4(col + uRimColor * ripple * 0.3, alpha);
+  }
+`;
+const ForcefieldEffect = ({ boundingRadius, config, animations }) => {
+    const { hexSize, rippleEnabled, shieldColor, rimColor, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const meshRef = useRef(null);
+    const hitSlot = useRef(0);
+    const nextHit = useRef(0);
+    const mat = useMemo(() => {
+        const sc = new THREE.Color(shieldColor);
+        const rc = new THREE.Color(rimColor);
+        return new THREE.ShaderMaterial({
+            vertexShader: shieldVert,
+            fragmentShader: shieldFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                uHexSize: { value: hexSize },
+                uShieldColor: { value: new THREE.Vector3(sc.r, sc.g, sc.b) },
+                uRimColor: { value: new THREE.Vector3(rc.r, rc.g, rc.b) },
+                uOpacity: { value: opacity },
+                uIntensity: { value: intensity },
+                uHitPos: { value: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()] },
+                uHitTime: { value: [-99, -99, -99] },
+            },
+            transparent: true,
+            depthWrite: false,
+            side: THREE.FrontSide,
+            blending: THREE.AdditiveBlending,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hexSize, shieldColor, rimColor, opacity, intensity]);
+    useFrame((state, delta) => {
+        const t = state.clock.getElapsedTime();
+        mat.uniforms.u_time.value = t;
+        if (rippleEnabled) {
+            nextHit.current -= delta;
+            if (nextHit.current <= 0) {
+                nextHit.current = 1.4 / speed + Math.random() * 0.8;
+                // Random point on sphere surface
+                const phi = Math.random() * Math.PI * 2;
+                const theta = Math.acos(2 * Math.random() - 1);
+                const r = boundingRadius * 1.15;
+                const slot = hitSlot.current % 3;
+                mat.uniforms.uHitPos.value[slot].set(Math.sin(theta) * Math.cos(phi) * r, Math.cos(theta) * r, Math.sin(theta) * Math.sin(phi) * r);
+                mat.uniforms.uHitTime.value[slot] = t;
+                hitSlot.current++;
+            }
+        }
+        if (animations?.length) {
+            applyGenerativeAnimations([mat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsx("mesh", { ref: meshRef, material: mat, children: _jsx("sphereGeometry", { args: [boundingRadius * 1.15, 64, 64] }) }));
+};
+export default ForcefieldEffect;

package/dist/components/effects/HologramEffect.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { HologramConfig, AnimationOptions } from "@3driseai/3drise-core";
+interface HologramEffectProps {
+    boundingRadius: number;
+    config: HologramConfig;
+    animations?: AnimationOptions[];
+}
+declare const HologramEffect: React.FC<HologramEffectProps>;
+export default HologramEffect;
+//# sourceMappingURL=HologramEffect.d.ts.map

package/dist/components/effects/HologramEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HologramEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HologramEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,UAAU,mBAAmB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqFD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsDjD,CAAC;AACF,eAAe,cAAc,CAAC"}