@ntalmagor/3drize-viewer 0.1.2

package/dist/components/Text2D.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { TextSettings } from '@ntalmagor/3drize-core';
+export interface Text2DProps {
+    textSettings: TextSettings;
+    onTextClick?: (textSettings: TextSettings) => void;
+}
+declare const Text2D: React.FC<Text2DProps>;
+export default Text2D;
+//# sourceMappingURL=Text2D.d.ts.map

package/dist/components/Text2D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text2D.d.ts","sourceRoot":"","sources":["../../src/components/Text2D.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAItE,OAAO,KAAK,EAAE,YAAY,EAA4C,MAAM,wBAAwB,CAAC;AAKrG,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;CACpD;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Text2D.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Text, useCursor } from '@react-three/drei';
+import { createDefaultEffectState, applyTransformEffects } from '@ntalmagor/3drize-core';
+import { fontManager } from '../../../core/src/services/FontManager';
+import { getTextEffectProps } from '../utils/textEffects';
+const Text2D = ({ textSettings, onTextClick }) => {
+    const groupRef = useRef(null);
+    const textRef = useRef(null);
+    const [hovered, setHovered] = useState(false);
+    const [clicked, setClicked] = useState(false);
+    const effectStateRef = useRef(null);
+    const { config, materialSettings } = textSettings;
+    const text2DConfig = config;
+    const { text } = text2DConfig;
+    const { fontSize = 0.5, lineHeight = 1.2, letterSpacing = 0, textAlign = 'center', anchorX = 'center', anchorY = 'middle', font, maxWidth, } = text2DConfig;
+    const fontInfo = font ? fontManager.getFont(font) : null;
+    const fontUrl = fontInfo?.googleFont;
+    const color = 'color' in materialSettings ? materialSettings.color : '#ffffff';
+    const opacity = 'opacity' in materialSettings ? materialSettings.opacity : 1;
+    const transformEffects = textSettings.animations?.transform?.effects || [];
+    const defaultHoverSettings = { sensitivity: 0.5, applyToChildren: true };
+    const { sensitivity = 0.5 } = defaultHoverSettings;
+    useCursor(hovered);
+    const handlePointerEnter = useCallback((e) => {
+        e.stopPropagation();
+        setHovered(true);
+    }, []);
+    const handlePointerLeave = useCallback(() => {
+        setHovered(false);
+    }, []);
+    const handleClick = useCallback((e) => {
+        e.stopPropagation();
+        onTextClick?.(textSettings);
+    }, [onTextClick, textSettings]);
+    useFrame((state, dt) => {
+        if (!groupRef.current)
+            return;
+        const time = state.clock.elapsedTime;
+        if (!effectStateRef.current) {
+            effectStateRef.current = createDefaultEffectState(groupRef.current);
+        }
+        if (transformEffects.length > 0) {
+            const enabledEffects = transformEffects.filter(e => e.enabled !== false);
+            if (enabledEffects.length > 0) {
+                applyTransformEffects(groupRef.current, enabledEffects, time, dt, effectStateRef.current, hovered, clicked, sensitivity);
+            }
+        }
+    });
+    const hasFadeEffect = transformEffects.some(e => e.type === 'fade' && e.enabled !== false);
+    const finalOpacity = hasFadeEffect ? opacity : opacity;
+    const effectProps = useMemo(() => getTextEffectProps([]), []);
+    return (_jsx("group", { ref: groupRef, name: `text2d-${textSettings.name}`, userData: { textSettings }, children: _jsx(Text, { ref: textRef, fontSize: fontSize, color: color, maxWidth: maxWidth, lineHeight: lineHeight, letterSpacing: letterSpacing, textAlign: textAlign, anchorX: anchorX, anchorY: anchorY, font: fontUrl || undefined, fillOpacity: finalOpacity, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onClick: handleClick, ...effectProps, children: text }) }));
+};
+export default Text2D;

package/dist/components/Text3D.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { TextSettings } from '@ntalmagor/3drize-core';
+import type { LetterData } from './Letter';
+export interface Text3DProps {
+    textSettings: TextSettings;
+    onLetterClick?: (letterData: LetterData) => void;
+}
+declare const Text3D: React.FC<Text3DProps>;
+export default Text3D;
+//# sourceMappingURL=Text3D.d.ts.map

package/dist/components/Text3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text3D.d.ts","sourceRoot":"","sources":["../../src/components/Text3D.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CAClD;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAcjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Text3D.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Letters from './Letters';
+const Text3D = ({ textSettings, onLetterClick }) => {
+    const { config, materialSettings } = textSettings;
+    const { text } = config;
+    return (_jsx(Letters, { text: text, config: config, materialSettings: materialSettings, hoverSettings: { sensitivity: 0.5, applyToChildren: false }, transformEffects: textSettings.animations?.transform?.effects || [], onLetterClick: onLetterClick }));
+};
+export default Text3D;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuraEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/AuraEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI3E,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAiFD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/effects/AuraEffect.js

@@ -0,0 +1,127 @@
+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';
+const vertexShader = /* 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;
+  }
+`;
+const fragmentShader = /* glsl */ `
+  uniform float u_time;
+  uniform float uFresnelPower;
+  uniform float uPulseSpeed;
+  uniform float uNoiseAmount;
+  uniform float uOpacity;
+  uniform float uLayerIndex;  // 0..1
+  uniform float uBaseHue;
+  uniform float uIntensity;
+
+  varying vec3 vNormal;
+  varying vec3 vViewDir;
+  varying vec3 vWorldNormal;
+
+  // ── HSV helper ────────────────────────────────────────────────────────────
+  vec3 hsv2rgb(float h, float s, float v) {
+    vec3 rgb = clamp(abs(mod(h*6.0+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);
+    return v * mix(vec3(1.0), rgb, s);
+  }
+
+  // ── 3D value noise + 4-octave FBM ─────────────────────────────────────────
+  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<4;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);
+
+    // ── Fresnel ────────────────────────────────────────────────────────────
+    float ndv     = abs(dot(vNormal, viewDir));
+    float fresnel = pow(1.0 - ndv, uFresnelPower);
+
+    // ── 4-octave FBM noise ─────────────────────────────────────────────────
+    float f = fbm(vWorldNormal * 3.5 + u_time * 0.18);
+
+    // ── Iridescence: hue shifts with view angle AND time ───────────────────
+    float hue     = mod(uBaseHue + ndv * 0.45 - uLayerIndex * 0.15 + u_time * 0.04, 1.0);
+    vec3  iriCol  = hsv2rgb(hue, 0.85, 1.0);
+
+    // ── Electric tendrils: sharp bright streaks where FBM exceeds threshold ─
+    float tendrils = smoothstep(0.60, 0.75, f + uLayerIndex * 0.05);
+
+    // ── Pulse per layer (staggered phase) ──────────────────────────────────
+    float pulse = 0.65 + 0.35 * sin(u_time * uPulseSpeed + uLayerIndex * 2.1);
+
+    // ── Combine ────────────────────────────────────────────────────────────
+    float noiseBlend = (1.0 - uNoiseAmount) + uNoiseAmount * f;
+    float alpha = fresnel * noiseBlend * uOpacity * pulse * (1.0 - uLayerIndex * 0.22) * uIntensity;
+    if (alpha < 0.004) discard;
+
+    vec3 col = iriCol + iriCol * tendrils * 1.8;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+const AuraEffect = ({ boundingRadius, config, animations }) => {
+    const { layerCount, fresnelPower, pulseSpeed, innerColor, outerColor, noiseAmount, sizeMultiplier, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    // Derive a single base hue from the innerColor
+    const baseHue = useMemo(() => {
+        const c = new THREE.Color(innerColor);
+        const h = { h: 0, s: 0, l: 0 };
+        c.getHSL(h);
+        return h.h;
+    }, [innerColor]);
+    const materials = useMemo(() => Array.from({ length: layerCount }, (_, i) => new THREE.ShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms: {
+            u_time: { value: 0 },
+            uFresnelPower: { value: fresnelPower },
+            uPulseSpeed: { value: pulseSpeed * speed },
+            uNoiseAmount: { value: noiseAmount },
+            uOpacity: { value: opacity },
+            uLayerIndex: { value: layerCount > 1 ? i / (layerCount - 1) : 0 },
+            uBaseHue: { value: baseHue },
+            uIntensity: { value: intensity },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.BackSide,
+    })), [layerCount, fresnelPower, pulseSpeed, speed, noiseAmount, opacity, baseHue, intensity]);
+    useFrame((state) => {
+        const t = state.clock.getElapsedTime();
+        for (const mat of materials)
+            mat.uniforms.u_time.value = t;
+        if (animations?.length) {
+            applyGenerativeAnimations(materials, animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    const baseR = boundingRadius * sizeMultiplier;
+    return (_jsx("group", { children: Array.from({ length: layerCount }, (_, i) => {
+            // Non-linear layer spacing: outer layers spread wider
+            const layerT = layerCount > 1 ? i / (layerCount - 1) : 0;
+            const r = baseR * (1 + layerT * layerT * 0.5);
+            return (_jsx("mesh", { material: materials[i], children: _jsx("sphereGeometry", { args: [r, 40, 40] }) }, i));
+        }) }));
+};
+export default AuraEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuroraEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/AuroraEffect.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;AAsDD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0E7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/effects/AuroraEffect.js

@@ -0,0 +1,112 @@
+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';
+const ribbonVert = /* glsl */ `
+  uniform float u_time;
+  uniform float uPhase;
+  uniform float u_speed;
+  uniform float uWaveAmp;
+  varying vec2  vUv;
+
+  void main() {
+    vec3 pos = position;
+    float w1 = sin(pos.y * 2.5 + u_time * u_speed + uPhase)         * uWaveAmp;
+    float w2 = sin(pos.y * 1.2 - u_time * u_speed * 0.7 + uPhase * 1.3) * uWaveAmp * 0.5;
+    float w3 = sin(pos.y * 4.1 + u_time * u_speed * 1.3 + uPhase * 2.1) * uWaveAmp * 0.18;
+    pos.x += w1 + w2 + w3;
+    pos.z += sin(pos.y * 3.0 + u_time * u_speed * 0.5 + uPhase * 0.7) * uWaveAmp * 0.3;
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  }
+`;
+const ribbonFrag = /* glsl */ `
+  uniform float u_time;
+  uniform float uHue;
+  uniform float uOpacity;
+  uniform float uIntensity;
+  varying vec2  vUv;
+
+  vec3 hsl2rgb(float h, float s, float l) {
+    vec3 rgb = clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+    return l + s * (rgb - 0.5) * (1.0 - abs(2.0 * l - 1.0));
+  }
+
+  void main() {
+    // Soft fade top and bottom
+    float fade = sin(vUv.y * 3.14159);
+    fade = pow(fade, 0.6); // bias toward middle
+
+    // Vertical shimmer bands (curtain rays)
+    float shimmer = 0.55 + 0.45 * sin(vUv.y * 22.0 + u_time * 2.4 + uHue * 9.0);
+
+    // Horizontal soft edge fade
+    float hEdge = smoothstep(0.0, 0.18, vUv.x) * smoothstep(1.0, 0.82, vUv.x);
+
+    // Color: hue drifts upward and over time
+    float hue = mod(uHue + vUv.y * 0.14 + u_time * 0.022, 1.0);
+    vec3  col = hsl2rgb(hue, 0.92, 0.58 + shimmer * 0.12);
+
+    float alpha = fade * shimmer * hEdge * uOpacity * uIntensity;
+    if (alpha < 0.005) discard;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+const AuroraEffect = ({ boundingRadius, config, animations }) => {
+    const { ribbonCount, waveAmplitude, colorShift, arcWidth, opacity, speed, intensity } = config;
+    const groupRef = useRef(null);
+    const ribbons = useMemo(() => {
+        const N = Math.max(3, Math.min(ribbonCount, 10));
+        const r = boundingRadius;
+        const w = r * 0.9;
+        const h = r * 2.2;
+        const rad = r * 1.35;
+        // Aurora spectrum: green → teal → cyan → violet
+        const hues = [0.33, 0.38, 0.45, 0.50, 0.57, 0.65, 0.72, 0.78, 0.82, 0.87];
+        return Array.from({ length: N }, (_, i) => {
+            const t = N === 1 ? 0.5 : i / (N - 1);
+            const angle = (t - 0.5) * arcWidth * Math.PI; // spread across arc
+            const hue = (colorShift + hues[i % hues.length]) % 1;
+            const geo = new THREE.PlaneGeometry(w, h, 1, 24);
+            const mat = new THREE.ShaderMaterial({
+                vertexShader: ribbonVert,
+                fragmentShader: ribbonFrag,
+                uniforms: {
+                    u_time: { value: 0 },
+                    uPhase: { value: i * 1.13 + t * Math.PI * 2 },
+                    u_speed: { value: 0.55 + Math.random() * 0.3 },
+                    uWaveAmp: { value: waveAmplitude * r * 0.55 },
+                    uHue: { value: hue },
+                    uOpacity: { value: opacity },
+                    uIntensity: { value: intensity },
+                },
+                transparent: true,
+                depthWrite: false,
+                blending: THREE.AdditiveBlending,
+                side: THREE.DoubleSide,
+            });
+            // Position ribbon in arc — tilted slightly inward to wrap over the object
+            const mesh = new THREE.Mesh(geo, mat);
+            mesh.position.set(Math.sin(angle) * rad, r * 0.55, // float above object
+            -Math.cos(angle) * rad);
+            mesh.rotation.y = angle; // face inward
+            mesh.rotation.x = 0.08; // slight forward tilt
+            return { mesh, mat };
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ribbonCount, waveAmplitude, colorShift, arcWidth, opacity, intensity, boundingRadius]);
+    const startValuesCacheRef = useRef({});
+    useFrame((state, delta) => {
+        if (!groupRef.current)
+            return;
+        const t = state.clock.getElapsedTime();
+        ribbons.forEach(({ mat }) => { mat.uniforms.u_time.value = t; });
+        groupRef.current.rotation.y += delta * speed * 0.06;
+        if (animations?.length) {
+            applyGenerativeAnimations(ribbons.map(({ mat }) => mat), animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsx("group", { ref: groupRef, children: ribbons.map(({ mesh }, i) => (_jsx("primitive", { object: mesh }, i))) }));
+};
+export default AuroraEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlackHoleEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/BlackHoleEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIhF,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAwHD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkGnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/effects/BlackHoleEffect.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, Fragment as _Fragment, 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';
+// ── Accretion disk shader ─────────────────────────────────────────────────────
+const diskVert = /* glsl */ `
+  varying vec2 vUv;
+  void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }
+`;
+const diskFrag = /* glsl */ `
+  uniform float u_time;
+  uniform float uRotSpeed;
+  uniform vec3  uDiskColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+
+  varying vec2 vUv;
+
+  vec3 tempColor(float t) {
+    // t=0 outer edge (cool red), t=1 inner edge (blue-white hot)
+    vec3 outer = uDiskColor * 0.4;
+    vec3 mid   = uDiskColor;
+    vec3 inner = vec3(0.85, 0.95, 1.0) * 2.5;
+    if (t < 0.5) return mix(outer, mid,   t * 2.0);
+    else          return mix(mid,  inner, (t - 0.5) * 2.0);
+  }
+
+  float hash(float n) { return fract(sin(n) * 43758.5453); }
+
+  void main() {
+    // Polar coordinates from ring UV
+    vec2  centered = vUv * 2.0 - 1.0;
+    float dist     = length(centered);
+    if (dist > 1.0 || dist < 0.001) discard;
+
+    float angle = atan(centered.y, centered.x);
+
+    // Normalized radial position (0=inner, 1=outer)
+    float t = 1.0 - dist;
+
+    // Spiral motion bands
+    float spiral = fract(dist * 6.0 - u_time * uRotSpeed + angle / 6.28318);
+    float bands  = pow(spiral, 2.2) * 0.6 + 0.4;
+
+    // Brightness: peaks near inner edge, falls off to rim
+    float bright = pow(t, 0.7) * bands;
+
+    // Fine-grained turbulence
+    float noise = 0.85 + 0.15 * sin(angle * 7.0 + dist * 18.0 - u_time * 2.5);
+
+    vec3  col   = tempColor(t) * bright * noise;
+    float alpha = bright * noise * uOpacity * uIntensity * smoothstep(0.0, 0.08, dist);
+    if (alpha < 0.005) discard;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+// ── Photon sphere (lensing rim) ───────────────────────────────────────────────
+const lensFrag = /* glsl */ `
+  uniform float u_time;
+  uniform vec3  uDiskColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+  varying vec3  vNormal;
+
+  void main() {
+    vec3  viewDir = normalize(cameraPosition - vNormal * 100.0);
+    float ndv     = abs(dot(normalize(vNormal), viewDir));
+    float fresnel = pow(1.0 - ndv, 2.2);
+    // Only show a bright equatorial band
+    float equator = exp(-ndv * ndv * 6.0) * 2.5;
+    float alpha   = (fresnel * 0.4 + equator * 0.6) * uOpacity * uIntensity;
+    if (alpha < 0.005) discard;
+    vec3 col = mix(uDiskColor, vec3(1.0, 0.92, 0.8), fresnel * 0.5);
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+const lensVert = /* glsl */ `
+  varying vec3 vNormal;
+  void main() {
+    vNormal = (modelMatrix * vec4(normal, 0.0)).xyz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+// ── Jet particle shader ───────────────────────────────────────────────────────
+const jetVert = /* glsl */ `
+  attribute float aT;
+  attribute float aPhase;
+  uniform float   u_time;
+  uniform float   u_speed;
+  uniform float   uLength;
+  uniform float   uDir;    // +1 or -1
+  uniform float   uRadius;
+  varying float   vT;
+  void main() {
+    float t  = fract(aT + u_time * u_speed);
+    vT = t;
+    float r  = uRadius * (1.0 - t * 0.85);
+    float a  = aPhase + t * 4.0;
+    float x  = cos(a) * r;
+    float z  = sin(a) * r;
+    float y  = uDir * t * uLength;
+    vec4  mv = modelViewMatrix * vec4(x, y, z, 1.0);
+    gl_PointSize = (1.0 - t) * 6.0 * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const jetFrag = /* glsl */ `
+  uniform vec3  uJetColor;
+  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) * 6.0);
+    float a = g * uOpacity * (1.0 - vT) * smoothstep(0.0, 0.1, vT);
+    if (a < 0.01) discard;
+    gl_FragColor = vec4(uJetColor, a);
+  }
+`;
+const BlackHoleEffect = ({ boundingRadius, config, animations }) => {
+    const { diskColor, jetEnabled, jetColor, rotationSpeed, tilt, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const groupRef = useRef(null);
+    const r = boundingRadius;
+    const { diskMat, lensMat, jetMat1, jetMat2, jetGeo } = useMemo(() => {
+        const dc = new THREE.Color(diskColor);
+        const dcv = new THREE.Vector3(dc.r, dc.g, dc.b);
+        const dMat = new THREE.ShaderMaterial({
+            vertexShader: diskVert, fragmentShader: diskFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                uRotSpeed: { value: rotationSpeed },
+                uDiskColor: { value: dcv },
+                uOpacity: { value: opacity },
+                uIntensity: { value: intensity },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide,
+        });
+        const lMat = new THREE.ShaderMaterial({
+            vertexShader: lensVert, fragmentShader: lensFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                uDiskColor: { value: dcv },
+                uOpacity: { value: opacity },
+                uIntensity: { value: intensity },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.BackSide,
+        });
+        // Jet geometry (shared, mirrored with uDir ±1)
+        const JN = 80;
+        const jT = new Float32Array(JN);
+        const jPhase = new Float32Array(JN);
+        for (let i = 0; i < JN; i++) {
+            jT[i] = i / JN;
+            jPhase[i] = Math.random() * Math.PI * 2;
+        }
+        const jGeo = new THREE.BufferGeometry();
+        jGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(JN * 3), 3));
+        jGeo.setAttribute('aT', new THREE.BufferAttribute(jT, 1));
+        jGeo.setAttribute('aPhase', new THREE.BufferAttribute(jPhase, 1));
+        jGeo.frustumCulled = false;
+        const jc = new THREE.Color(jetColor);
+        const makeJetMat = (dir) => new THREE.ShaderMaterial({
+            vertexShader: jetVert, fragmentShader: jetFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                u_speed: { value: speed },
+                uLength: { value: r * 2.2 },
+                uDir: { value: dir },
+                uRadius: { value: r * 0.12 },
+                uJetColor: { value: new THREE.Vector3(jc.r, jc.g, jc.b) },
+                uOpacity: { value: opacity * 0.8 },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        return { diskMat: dMat, lensMat: lMat, jetMat1: makeJetMat(1), jetMat2: makeJetMat(-1), jetGeo: jGeo };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [diskColor, jetColor, rotationSpeed, opacity, intensity, speed, r]);
+    useFrame((state) => {
+        const t = state.clock.getElapsedTime();
+        diskMat.uniforms.u_time.value = t;
+        lensMat.uniforms.u_time.value = t;
+        jetMat1.uniforms.u_time.value = t;
+        jetMat2.uniforms.u_time.value = t;
+        if (animations?.length) {
+            applyGenerativeAnimations([diskMat, lensMat, jetMat1, jetMat2], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    const tiltRad = (tilt * Math.PI) / 180;
+    return (_jsxs("group", { ref: groupRef, rotation: [0, 0, tiltRad], children: [_jsx("mesh", { material: lensMat, children: _jsx("sphereGeometry", { args: [r * 0.55, 48, 48] }) }), _jsx("mesh", { material: diskMat, rotation: [Math.PI / 2, 0, 0], children: _jsx("ringGeometry", { args: [r * 0.38, r * 1.15, 72] }) }), jetEnabled && (_jsxs(_Fragment, { children: [_jsx("points", { geometry: jetGeo, material: jetMat1 }), _jsx("points", { geometry: jetGeo, material: jetMat2 })] }))] }));
+};
+export default BlackHoleEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConstellationEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ConstellationEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIpF,UAAU,wBAAwB;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAqGD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0G3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}