@ntalmagor/3drize-viewer 0.1.2

package/dist/components/effects/NeuralNetworkEffect.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+// Glow sprite for pulse signals and node flashes
+const pulseVert = /* glsl */ `
+  attribute float aBright;
+  uniform float   uSize;
+  varying float   vB;
+  void main() {
+    vB = aBright;
+    if (vB < 0.01) { gl_PointSize = 0.0; gl_Position = vec4(0); return; }
+    vec4 mv = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize = uSize * vB * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const pulseFrag = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uOpacity;
+  varying float vB;
+  void main() {
+    if (vB < 0.01) discard;
+    vec2  c = gl_PointCoord - 0.5;
+    if (length(c) > 0.5) discard;
+    float g = exp(-dot(c, c) * 5.5);
+    gl_FragColor = vec4(uColor, g * vB * uOpacity);
+  }
+`;
+const MAX_PULSES = 4;
+const NeuralNetworkEffect = ({ boundingRadius, config, animations }) => {
+    const { nodeCount, signalSpeed, nodeColor, pulseColor, orbitSpeed, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const groupRef = useRef(null);
+    // Node orbit state
+    const orbitAngles = useRef(new Float32Array(0));
+    const pulses = useRef([]);
+    const nextPulse = useRef(0);
+    const r = boundingRadius * 1.35;
+    const N = Math.max(8, Math.min(nodeCount, 40));
+    const scene = useMemo(() => {
+        // ── Node positions on Fibonacci sphere ────────────────────────────────
+        const basePos = [];
+        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+        for (let i = 0; i < N; i++) {
+            const y = 1 - (i / (N - 1)) * 2;
+            const rad = Math.sqrt(1 - y * y) * r;
+            const phi = i * goldenAngle;
+            basePos.push(new THREE.Vector3(Math.cos(phi) * rad, y * r, Math.sin(phi) * rad));
+        }
+        // Orbit axes — random unit vectors
+        const orbitAxes = Array.from({ length: N }, () => new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize());
+        const orbitSpeeds = Array.from({ length: N }, () => 0.4 + Math.random() * 0.6);
+        const angles = new Float32Array(N).map((_, i) => i * 0.7);
+        orbitAngles.current = angles;
+        // ── Edges — connect nearby pairs ─────────────────────────────────────
+        const MAX_DIST = r * 0.85;
+        const edges = [];
+        const degree = new Int32Array(N);
+        for (let i = 0; i < N; i++) {
+            for (let j = i + 1; j < N; j++) {
+                if (degree[i] >= 3 || degree[j] >= 3)
+                    continue;
+                if (basePos[i].distanceTo(basePos[j]) < MAX_DIST) {
+                    edges.push([i, j]);
+                    degree[i]++;
+                    degree[j]++;
+                }
+            }
+        }
+        const edgeVerts = new Float32Array(edges.length * 6);
+        const edgeCols = new Float32Array(edges.length * 6);
+        const nc = new THREE.Color(nodeColor);
+        const DIM = 0.06;
+        for (let e = 0; e < edges.length; e++) {
+            const [a, b] = edges[e];
+            edgeVerts.set([basePos[a].x, basePos[a].y, basePos[a].z, basePos[b].x, basePos[b].y, basePos[b].z], e * 6);
+            edgeCols.set([nc.r * DIM, nc.g * DIM, nc.b * DIM, nc.r * DIM, nc.g * DIM, nc.b * DIM], e * 6);
+        }
+        const edgeGeo = new THREE.BufferGeometry();
+        edgeGeo.setAttribute('position', new THREE.BufferAttribute(edgeVerts, 3));
+        edgeGeo.setAttribute('color', new THREE.BufferAttribute(edgeCols, 3));
+        const edgeMat = new THREE.LineBasicMaterial({
+            vertexColors: true, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // ── Node instanced mesh ───────────────────────────────────────────────
+        const nodeGeo = new THREE.SphereGeometry(0.055 * intensity, 8, 8);
+        const nc2 = new THREE.Color(nodeColor);
+        const nodeMat = new THREE.MeshBasicMaterial({
+            color: nc2, transparent: true, opacity: opacity * 0.55,
+            depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        const nodeMesh = new THREE.InstancedMesh(nodeGeo, nodeMat, N);
+        nodeMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+        // ── Pulse sprites ─────────────────────────────────────────────────────
+        const pulsePos = new Float32Array(MAX_PULSES * 3);
+        const pulseBright = new Float32Array(MAX_PULSES);
+        const pulseGeo = new THREE.BufferGeometry();
+        pulseGeo.setAttribute('position', new THREE.BufferAttribute(pulsePos, 3));
+        pulseGeo.setAttribute('aBright', new THREE.BufferAttribute(pulseBright, 1));
+        const pc = new THREE.Color(pulseColor);
+        const pulseMat = new THREE.ShaderMaterial({
+            vertexShader: pulseVert, fragmentShader: pulseFrag,
+            uniforms: {
+                uSize: { value: 20 * intensity },
+                uColor: { value: new THREE.Vector3(pc.r, pc.g, pc.b) },
+                uOpacity: { value: opacity },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // Initialise pulse states
+        pulses.current = Array.from({ length: MAX_PULSES }, () => ({
+            fromIdx: 0, toIdx: 1, progress: 0, active: false,
+        }));
+        return { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, edgeMat, nodeMesh, pulseGeo, pulseMat };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [N, r, nodeColor, pulseColor, opacity, intensity]);
+    const tmpMat = useMemo(() => new THREE.Matrix4(), []);
+    const tmpQuat = useMemo(() => new THREE.Quaternion(), []);
+    const tmpVec = useMemo(() => new THREE.Vector3(), []);
+    useFrame((_, delta) => {
+        if (!groupRef.current)
+            return;
+        const dt = delta * speed;
+        const { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, nodeMesh, pulseGeo, pulseMat } = scene;
+        // Rotate nodes around their individual axes
+        const angles = orbitAngles.current;
+        const curPos = [];
+        for (let i = 0; i < N; i++) {
+            angles[i] += dt * orbitSpeed * orbitSpeeds[i] * 0.4;
+            const base = basePos[i];
+            const axis = orbitAxes[i];
+            const ang = angles[i];
+            // Rodrigues rotation of base position around axis
+            const cosA = Math.cos(ang), sinA = Math.sin(ang);
+            const dot = base.dot(axis);
+            tmpVec.set(base.x * cosA + (axis.y * base.z - axis.z * base.y) * sinA + axis.x * dot * (1 - cosA), base.y * cosA + (axis.z * base.x - axis.x * base.z) * sinA + axis.y * dot * (1 - cosA), base.z * cosA + (axis.x * base.y - axis.y * base.x) * sinA + axis.z * dot * (1 - cosA));
+            curPos.push(tmpVec.clone());
+            tmpMat.compose(tmpVec, tmpQuat, new THREE.Vector3(1, 1, 1));
+            nodeMesh.setMatrixAt(i, tmpMat);
+        }
+        nodeMesh.instanceMatrix.needsUpdate = true;
+        // Update edge positions
+        const edgePosAttr = edgeGeo.attributes.position;
+        for (let e = 0; e < edges.length; e++) {
+            const [a, b] = edges[e];
+            edgePosAttr.setXYZ(e * 2, curPos[a].x, curPos[a].y, curPos[a].z);
+            edgePosAttr.setXYZ(e * 2 + 1, curPos[b].x, curPos[b].y, curPos[b].z);
+        }
+        edgePosAttr.needsUpdate = true;
+        // Pulse signals along edges
+        nextPulse.current -= delta;
+        if (nextPulse.current <= 0 && edges.length > 0) {
+            nextPulse.current = 0.4 / speed;
+            const idle = pulses.current.findIndex(p => !p.active);
+            if (idle >= 0) {
+                const e = Math.floor(Math.random() * edges.length);
+                pulses.current[idle] = { fromIdx: edges[e][0], toIdx: edges[e][1], progress: 0, active: true };
+            }
+        }
+        const ptPos = pulseGeo.attributes.position;
+        const ptBright = pulseGeo.attributes.aBright;
+        pulses.current.forEach((p, pi) => {
+            if (!p.active) {
+                ptBright.setX(pi, 0);
+                return;
+            }
+            p.progress += dt * signalSpeed * 0.9;
+            if (p.progress >= 1) {
+                p.active = false;
+                ptBright.setX(pi, 0);
+                return;
+            }
+            const pos = curPos[p.fromIdx].clone().lerp(curPos[p.toIdx], p.progress);
+            ptPos.setXYZ(pi, pos.x, pos.y, pos.z);
+            ptBright.setX(pi, 0.7 + 0.3 * Math.sin(p.progress * Math.PI));
+        });
+        ptPos.needsUpdate = true;
+        ptBright.needsUpdate = true;
+        pulseMat.uniforms.uSize.value = 20 * intensity;
+        if (animations?.length) {
+            applyGenerativeAnimations([pulseMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { ref: groupRef, children: [_jsx("lineSegments", { geometry: scene.edgeGeo, material: scene.edgeMat }), _jsx("primitive", { object: scene.nodeMesh }), _jsx("points", { geometry: scene.pulseGeo, material: scene.pulseMat })] }));
+};
+export default NeuralNetworkEffect;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { OrbConfig, AnimationOptions } from '@ntalmagor/3drize-core';
+interface OrbEffectProps {
+    boundingRadius: number;
+    config: OrbConfig;
+    animations?: AnimationOptions[];
+}
+declare const OrbEffect: React.FC<OrbEffectProps>;
+export default OrbEffect;
+//# sourceMappingURL=OrbEffect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrbEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/OrbEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI1E,UAAU,cAAc;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAyLD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqJvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/effects/OrbEffect.js

@@ -0,0 +1,291 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+// ── Shared vert (normal + viewDir) ────────────────────────────────────────────
+const sharedVert = /* glsl */ `
+  varying vec3 vNormal;
+  varying vec3 vViewDir;
+  varying vec3 vWorldNormal;
+  void main() {
+    vNormal       = normalize(normalMatrix * normal);
+    vWorldNormal  = normalize((modelMatrix * vec4(normal, 0.0)).xyz);
+    vec4 mv       = modelViewMatrix * vec4(position, 1.0);
+    vViewDir      = normalize(-mv.xyz);
+    gl_Position   = projectionMatrix * mv;
+  }
+`;
+// ── CORE: boiling solar surface ───────────────────────────────────────────────
+const coreFrag = /* glsl */ `
+  uniform float u_time;
+  uniform vec3  uInnerColor;
+  uniform vec3  uOuterColor;
+  uniform float uOpacity;
+  uniform float uNoiseAmount;
+  uniform float uIntensity;
+  uniform float uPulseSpeed;
+
+  varying vec3 vNormal;
+  varying vec3 vViewDir;
+  varying vec3 vWorldNormal;
+
+  float hash(vec3 p){ return fract(sin(dot(p,vec3(127.1,311.7,74.7)))*43758.5453); }
+  float noise(vec3 p){
+    vec3 i=floor(p); vec3 f=fract(p); f=f*f*(3.-2.*f);
+    return mix(mix(mix(hash(i),hash(i+vec3(1,0,0)),f.x),mix(hash(i+vec3(0,1,0)),hash(i+vec3(1,1,0)),f.x),f.y),
+               mix(mix(hash(i+vec3(0,0,1)),hash(i+vec3(1,0,1)),f.x),mix(hash(i+vec3(0,1,1)),hash(i+vec3(1,1,1)),f.x),f.y),f.z);
+  }
+  // 6-octave FBM for rich surface detail
+  float fbm(vec3 p){
+    float v=0., a=0.5;
+    for(int i=0;i<6;i++){ v+=a*noise(p); p=p*2.13+vec3(1.7,9.2,3.7); a*=0.5; }
+    return v;
+  }
+
+  void main() {
+    // Animated surface boiling — rotate noise field over time
+    vec3 nCoord = vWorldNormal * 5.5 + vec3(u_time * 0.35, u_time * 0.18, u_time * -0.22);
+    float f      = fbm(nCoord);
+
+    // Active regions: bright convective cells
+    float cells  = smoothstep(0.54, 0.72, f) * 4.0;
+    // Cool lanes between cells (slightly darker)
+    float cool   = (1.0 - smoothstep(0.38, 0.50, f)) * 0.3;
+    // Solar flares: ultra-sharp spikes where FBM peaks
+    float flares = smoothstep(0.70, 0.85, f) * 6.0;
+
+    float pulse  = 0.85 + 0.15 * sin(u_time * uPulseSpeed * 2.3);
+    float limb   = 1.0 - abs(dot(vNormal, vViewDir)) * 0.4; // limb darkening
+
+    // Color: white-hot core cells, outer-color cool lanes
+    vec3 col = mix(uOuterColor, uInnerColor, f * 1.8 + cells * 0.3);
+    col += uInnerColor * flares;
+    col -= uOuterColor * cool;
+    col *= pulse * limb * (1.0 + uNoiseAmount * cells);
+
+    float alpha = (0.85 + cells * 0.15) * uOpacity * uIntensity;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+// ── PLASMA SHELL: iridescent + FBM tendrils ───────────────────────────────────
+const plasmaFrag = /* glsl */ `
+  uniform float u_time;
+  uniform float uLayerIndex;   // 0..1
+  uniform vec3  uInnerColor;
+  uniform vec3  uOuterColor;
+  uniform float uOpacity;
+  uniform float uNoiseAmount;
+  uniform float uPulseSpeed;
+  uniform float uIntensity;
+
+  varying vec3 vNormal;
+  varying vec3 vViewDir;
+  varying vec3 vWorldNormal;
+
+  vec3 hsv2rgb(float h, float s, float v){
+    vec3 rgb=clamp(abs(mod(h*6.+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);
+    return v*mix(vec3(1.),rgb,s);
+  }
+  float hash(vec3 p){ return fract(sin(dot(p,vec3(127.1,311.7,74.7)))*43758.5453); }
+  float noise(vec3 p){
+    vec3 i=floor(p); vec3 f=fract(p); f=f*f*(3.-2.*f);
+    return mix(mix(mix(hash(i),hash(i+vec3(1,0,0)),f.x),mix(hash(i+vec3(0,1,0)),hash(i+vec3(1,1,0)),f.x),f.y),
+               mix(mix(hash(i+vec3(0,0,1)),hash(i+vec3(1,0,1)),f.x),mix(hash(i+vec3(0,1,1)),hash(i+vec3(1,1,1)),f.x),f.y),f.z);
+  }
+  float fbm(vec3 p){ float v=0.,a=0.5; for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.17+vec3(1.7,9.2,3.7);a*=0.5;} return v; }
+
+  void main() {
+    vec3 viewDir = normalize(vViewDir);
+    float ndv    = abs(dot(vNormal, viewDir));
+
+    // Fresnel edge glow
+    float fresnel = pow(1.0 - ndv, 2.5 - uLayerIndex);
+
+    // 5-octave FBM driven by world normal + time
+    float f = fbm(vWorldNormal * (3.0 + uLayerIndex * 2.0) + vec3(u_time * (0.15 + uLayerIndex * 0.08)));
+
+    // Iridescent hue: shifts with view angle, layer depth, and time
+    float innerHue = 0.0; // derive from innerColor
+    float hue      = mod(ndv * 0.5 - uLayerIndex * 0.2 + u_time * 0.05 + f * 0.15, 1.0);
+    vec3  iriCol   = hsv2rgb(hue, 0.9 - uLayerIndex * 0.2, 1.0);
+
+    // Electric tendrils: sharp bright streamers where FBM exceeds threshold
+    float tendril  = smoothstep(0.62 - uLayerIndex * 0.04, 0.78, f);
+    // Plasma cells: lower threshold dimmer glow
+    float plasma   = smoothstep(0.50, 0.65, f) * 0.5;
+
+    float pulse    = 0.6 + 0.4 * sin(u_time * uPulseSpeed + uLayerIndex * 2.4);
+
+    vec3 col = iriCol + iriCol * (tendril * 2.0 + plasma);
+    col      = mix(col, uInnerColor, tendril * 0.3); // brightest tendrils go white
+
+    float noiseBlend = (1.0 - uNoiseAmount) + uNoiseAmount * f;
+    float alpha = fresnel * noiseBlend * uOpacity * pulse
+                  * (1.0 - uLayerIndex * 0.28) * uIntensity;
+    if (alpha < 0.004) discard;
+
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+// ── OUTER DIFFUSE GLOW ────────────────────────────────────────────────────────
+const glowFrag = /* glsl */ `
+  uniform float u_time;
+  uniform vec3  uOuterColor;
+  uniform float uOpacity;
+  uniform float uPulseSpeed;
+
+  varying vec3 vNormal;
+  varying vec3 vViewDir;
+
+  void main() {
+    float ndv    = abs(dot(normalize(vNormal), normalize(vViewDir)));
+    float fresnel = pow(1.0 - ndv, 1.2);
+    float pulse   = 0.55 + 0.45 * sin(u_time * uPulseSpeed * 0.7 + 1.2);
+    float alpha   = fresnel * uOpacity * pulse * 0.5;
+    if (alpha < 0.003) discard;
+    // Slowly cycle hue of the outer glow
+    float hue  = mod(u_time * 0.04, 1.0);
+    vec3  tint = mix(uOuterColor, vec3(cos(hue*6.28)*0.5+0.5, cos((hue+0.33)*6.28)*0.5+0.5, cos((hue+0.67)*6.28)*0.5+0.5), 0.25);
+    gl_FragColor = vec4(tint, alpha);
+  }
+`;
+// ── CORONA RING ───────────────────────────────────────────────────────────────
+const coronaVert = /* glsl */ `
+  attribute float aAngle;
+  varying float vAngle;
+  void main() {
+    vAngle      = aAngle;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const coronaFrag = /* glsl */ `
+  uniform float u_time;
+  uniform vec3  uCoronaColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+  varying float vAngle;
+
+  vec3 hsv2rgb(float h, float s, float v){
+    vec3 rgb=clamp(abs(mod(h*6.+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);
+    return v*mix(vec3(1.),rgb,s);
+  }
+
+  void main() {
+    // Color flows around the ring over time
+    float hue    = mod(vAngle / 6.28318 + u_time * 0.15, 1.0);
+    vec3  col    = mix(uCoronaColor, hsv2rgb(hue, 0.8, 1.0), 0.6);
+    // Pulse brightness
+    float pulse  = 0.6 + 0.4 * sin(u_time * 2.5 + vAngle * 3.0);
+    float alpha  = uOpacity * pulse * uIntensity;
+    gl_FragColor = vec4(col * (1.0 + pulse), alpha);
+  }
+`;
+const OrbEffect = ({ boundingRadius, config, animations }) => {
+    const { coreSize, glowLayers, innerColor, outerColor, coronaEnabled, coronaColor, noiseAmount, pulseSpeed, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const innerColorVec = useMemo(() => { const c = new THREE.Color(innerColor); return new THREE.Vector3(c.r, c.g, c.b); }, [innerColor]);
+    const outerColorVec = useMemo(() => { const c = new THREE.Color(outerColor); return new THREE.Vector3(c.r, c.g, c.b); }, [outerColor]);
+    const coronaColorVec = useMemo(() => { const c = new THREE.Color(coronaColor); return new THREE.Vector3(c.r, c.g, c.b); }, [coronaColor]);
+    const coreR = boundingRadius * coreSize;
+    // Core material — boiling solar surface
+    const coreMat = useMemo(() => new THREE.ShaderMaterial({
+        vertexShader: sharedVert,
+        fragmentShader: coreFrag,
+        uniforms: {
+            u_time: { value: 0 },
+            uInnerColor: { value: innerColorVec },
+            uOuterColor: { value: outerColorVec },
+            uOpacity: { value: opacity },
+            uNoiseAmount: { value: noiseAmount },
+            uIntensity: { value: intensity },
+            uPulseSpeed: { value: pulseSpeed * speed },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+    }), [innerColorVec, outerColorVec, opacity, noiseAmount, intensity, pulseSpeed, speed]);
+    // Plasma shell materials — one per layer
+    const shellMats = useMemo(() => Array.from({ length: glowLayers }, (_, i) => new THREE.ShaderMaterial({
+        vertexShader: sharedVert,
+        fragmentShader: plasmaFrag,
+        uniforms: {
+            u_time: { value: 0 },
+            uLayerIndex: { value: glowLayers > 1 ? i / (glowLayers - 1) : 0 },
+            uInnerColor: { value: innerColorVec },
+            uOuterColor: { value: outerColorVec },
+            uOpacity: { value: opacity },
+            uNoiseAmount: { value: noiseAmount },
+            uPulseSpeed: { value: pulseSpeed * speed },
+            uIntensity: { value: intensity },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.BackSide,
+    })), [glowLayers, innerColorVec, outerColorVec, opacity, noiseAmount, pulseSpeed, speed, intensity]);
+    // Outer diffuse glow
+    const glowMat = useMemo(() => new THREE.ShaderMaterial({
+        vertexShader: sharedVert,
+        fragmentShader: glowFrag,
+        uniforms: {
+            u_time: { value: 0 },
+            uOuterColor: { value: outerColorVec },
+            uOpacity: { value: opacity * 0.6 },
+            uPulseSpeed: { value: pulseSpeed * speed },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.BackSide,
+    }), [outerColorVec, opacity, pulseSpeed, speed]);
+    // Corona ring geometry — torus with per-vertex angle attribute for color flow
+    const { coronaGeo, coronaMat } = useMemo(() => {
+        const tubeSegs = 80;
+        const geo = new THREE.TorusGeometry(coreR * 2.8, coreR * 0.12, 8, tubeSegs);
+        const count = geo.attributes.position.count;
+        // Per-vertex angle around the ring (0 → 2π)
+        const angles = new Float32Array(count);
+        // TorusGeometry vertices go around the major circle; approximate angle from XZ
+        const pos = geo.attributes.position;
+        for (let i = 0; i < count; i++) {
+            angles[i] = Math.atan2(pos.getZ(i), pos.getX(i)) + Math.PI;
+        }
+        geo.setAttribute('aAngle', new THREE.BufferAttribute(angles, 1));
+        const mat = new THREE.ShaderMaterial({
+            vertexShader: coronaVert,
+            fragmentShader: coronaFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                uCoronaColor: { value: coronaColorVec },
+                uOpacity: { value: opacity * 0.85 },
+                uIntensity: { value: intensity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { coronaGeo: geo, coronaMat: mat };
+    }, [coreR, coronaColorVec, opacity, intensity]);
+    const coronaGroupRef = useRef(null);
+    const allMats = useMemo(() => [coreMat, ...shellMats, glowMat, coronaMat], [coreMat, shellMats, glowMat, coronaMat]);
+    useFrame((state, delta) => {
+        const t = state.clock.getElapsedTime();
+        for (const mat of allMats)
+            mat.uniforms.u_time.value = t;
+        // Tilt the corona ring and rotate slowly
+        if (coronaGroupRef.current) {
+            coronaGroupRef.current.rotation.z += delta * speed * 0.4;
+        }
+        if (animations?.length) {
+            applyGenerativeAnimations(allMats, animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    const glowR = coreR * (3.5 + glowLayers * 0.6);
+    return (_jsxs("group", { children: [_jsx("mesh", { material: coreMat, children: _jsx("sphereGeometry", { args: [coreR, 48, 48] }) }), Array.from({ length: glowLayers }, (_, i) => {
+                const layerT = glowLayers > 1 ? i / (glowLayers - 1) : 0;
+                const r = coreR * (1.35 + layerT * layerT * 1.8);
+                return (_jsx("mesh", { material: shellMats[i], children: _jsx("sphereGeometry", { args: [r, 40, 40] }) }, i));
+            }), _jsx("mesh", { material: glowMat, children: _jsx("sphereGeometry", { args: [glowR, 32, 32] }) }), coronaEnabled && (_jsx("group", { ref: coronaGroupRef, rotation: [Math.PI * 0.18, 0, Math.PI * 0.08], children: _jsx("mesh", { geometry: coronaGeo, material: coronaMat }) }))] }));
+};
+export default OrbEffect;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { PortalConfig, AnimationOptions } from '@ntalmagor/3drize-core';
+interface PortalEffectProps {
+    boundingRadius: number;
+    config: PortalConfig;
+    animations?: AnimationOptions[];
+}
+declare const PortalEffect: React.FC<PortalEffectProps>;
+export default PortalEffect;
+//# sourceMappingURL=PortalEffect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PortalEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/PortalEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI7E,UAAU,iBAAiB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAmHD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}