@ntalmagor/3drize-viewer 0.1.2

package/dist/components/effects/PortalEffect.js

@@ -0,0 +1,191 @@
+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';
+// Multi-layer vortex disc
+const discVertShader = /* glsl */ `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const discFragShader = /* glsl */ `
+  uniform float u_time;
+  uniform float uSpiralTurns;
+  uniform float uRotationSpeed;
+  uniform vec3  uInnerColor;
+  uniform vec3  uOuterColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+
+  varying vec2 vUv;
+
+  float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+
+  void main() {
+    vec2  centered = vUv * 2.0 - 1.0;
+    float dist     = length(centered);
+    if (dist > 1.0) discard;
+
+    float angle = atan(centered.y, centered.x);
+    const float TAU = 6.28318530718;
+    float t     = u_time * uRotationSpeed;
+
+    // Three counter-rotating spiral layers
+    float s1 = fract(dist * uSpiralTurns        - angle / TAU + t);
+    float s2 = fract(dist * uSpiralTurns * 0.6  + angle / TAU - t * 1.4);
+    float s3 = fract(dist * uSpiralTurns * 2.2  - angle / TAU * 1.5 + t * 2.1);
+
+    float w3    = pow(1.0 - dist, 2.0);
+    float vortex = s1 * 0.45 + s2 * 0.30 * (1.0 - w3) + s3 * 0.60 * w3;
+
+    // Gravitational lensing rim
+    float rimRing = exp(-pow((dist - 0.92) / 0.04, 2.0)) * 3.0;
+    float rim     = pow(smoothstep(0.85, 1.0, dist), 0.7) * 1.5;
+
+    // Singularity core
+    float core        = exp(-dist * dist * 22.0) * 4.0;
+    float singularity = exp(-dist * dist * 90.0) * 8.0;
+
+    float edgeFade = 1.0 - smoothstep(0.72, 1.0, dist);
+    float noise    = hash(vec2(dist * 8.0 + t * 0.3, angle));
+    float flux     = 0.85 + 0.15 * noise;
+
+    vec3 rimLight = mix(uOuterColor * 2.0, vec3(1.0, 0.9, 0.7), rimRing * 0.5);
+    vec3 col      = mix(rimLight, uInnerColor, vortex * 0.7 + core * 0.3) * flux;
+    col += vec3(1.0, 0.95, 0.85) * (singularity + core * 0.4);
+    col += uOuterColor * rim * 0.8;
+
+    float alpha = (vortex * 0.5 + edgeFade * 0.25 + core * 0.5 + rim * 0.4 + singularity * 0.3)
+                  * uOpacity * uIntensity;
+    if (alpha < 0.008) discard;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+// ── Event-horizon dust — GPU animated, all motion in vertex shader ────────────
+// Each particle orbits independently at a slightly perturbed radius, height, and speed.
+const dustVertShader = /* glsl */ `
+  attribute float aAngle;     // initial angle 0..TAU
+  attribute float aRadiusOff; // -0.12..+0.12 (fractional deviation from rim radius)
+  attribute float aHeightOff; // -0.08..+0.08 relative height deviation
+  attribute float aSpeed;     // orbit speed multiplier 0.3..1.7
+  attribute float aPhase;     // twinkle phase
+
+  uniform float u_time;
+  uniform float uRadius;
+  uniform float uPointSize;
+  uniform float u_speed;
+
+  varying float vAlpha;
+
+  void main() {
+    const float TAU = 6.28318530718;
+
+    float angle = aAngle + u_time * u_speed * aSpeed;
+    float r     = uRadius * (1.0 + aRadiusOff);
+    float y     = uRadius * aHeightOff * sin(angle * 2.3 + aPhase + u_time * 0.7);
+
+    vec3 pos = vec3(cos(angle) * r, y, sin(angle) * r);
+
+    // Subtle twinkle — most dust is nearly invisible, occasionally flickers bright
+    float twinkle = pow(max(0.0, sin(u_time * 1.8 + aPhase)), 6.0); // sharp spikes
+    float base    = 0.08 + 0.12 * (0.5 + 0.5 * sin(aPhase + u_time * 0.4));
+    vAlpha        = base + twinkle * 0.7;
+
+    vec4 mv      = modelViewMatrix * vec4(pos, 1.0);
+    gl_PointSize = uPointSize * (0.4 + twinkle * 1.6) * (180.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const dustFragShader = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uOpacity;
+  varying float vAlpha;
+
+  void main() {
+    vec2  coord = gl_PointCoord - 0.5;
+    float dist  = length(coord);
+    if (dist > 0.5) discard;
+    float glow  = exp(-dist * dist * 9.0);
+    gl_FragColor = vec4(uColor, vAlpha * uOpacity * glow);
+  }
+`;
+const PortalEffect = ({ boundingRadius, config, animations }) => {
+    const { radius, spiralTurns, innerGlowColor, outerGlowColor, rotationSpeed, particleRingEnabled, particleCount, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const r = boundingRadius * radius;
+    const innerColorVec = useMemo(() => { const c = new THREE.Color(innerGlowColor); return new THREE.Vector3(c.r, c.g, c.b); }, [innerGlowColor]);
+    const outerColorVec = useMemo(() => { const c = new THREE.Color(outerGlowColor); return new THREE.Vector3(c.r, c.g, c.b); }, [outerGlowColor]);
+    const discMaterial = useMemo(() => new THREE.ShaderMaterial({
+        vertexShader: discVertShader,
+        fragmentShader: discFragShader,
+        uniforms: {
+            u_time: { value: 0 },
+            uSpiralTurns: { value: spiralTurns },
+            uRotationSpeed: { value: rotationSpeed * speed },
+            uInnerColor: { value: innerColorVec },
+            uOuterColor: { value: outerColorVec },
+            uOpacity: { value: opacity },
+            uIntensity: { value: intensity },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.DoubleSide,
+    }), [spiralTurns, rotationSpeed, speed, innerColorVec, outerColorVec, opacity, intensity]);
+    // ── Event-horizon dust ──────────────────────────────────────────────────────
+    const { dustGeo, dustMat } = useMemo(() => {
+        const count = particleCount;
+        const angles = new Float32Array(count);
+        const radOffsets = new Float32Array(count);
+        const heightOffs = new Float32Array(count);
+        const speeds = new Float32Array(count);
+        const phases = new Float32Array(count);
+        for (let i = 0; i < count; i++) {
+            angles[i] = (i / count) * Math.PI * 2 + Math.random() * 0.2;
+            radOffsets[i] = (Math.random() - 0.5) * 0.24;
+            heightOffs[i] = (Math.random() - 0.5) * 0.16;
+            speeds[i] = 0.3 + Math.random() * 1.4; // wide speed spread
+            phases[i] = Math.random() * Math.PI * 2;
+        }
+        const geo = new THREE.BufferGeometry();
+        // Positions are computed entirely in vertex shader; use dummy zero positions
+        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(count * 3), 3));
+        geo.setAttribute('aAngle', new THREE.BufferAttribute(angles, 1));
+        geo.setAttribute('aRadiusOff', new THREE.BufferAttribute(radOffsets, 1));
+        geo.setAttribute('aHeightOff', new THREE.BufferAttribute(heightOffs, 1));
+        geo.setAttribute('aSpeed', new THREE.BufferAttribute(speeds, 1));
+        geo.setAttribute('aPhase', new THREE.BufferAttribute(phases, 1));
+        // Dust color: mostly white, very slightly tinted toward innerGlowColor
+        const dustCol = new THREE.Color(innerGlowColor).lerp(new THREE.Color('#ffffff'), 0.75);
+        const dustColVec = new THREE.Vector3(dustCol.r, dustCol.g, dustCol.b);
+        const mat = new THREE.ShaderMaterial({
+            vertexShader: dustVertShader,
+            fragmentShader: dustFragShader,
+            uniforms: {
+                u_time: { value: 0 },
+                uRadius: { value: r },
+                uPointSize: { value: 5 * intensity },
+                u_speed: { value: speed * 0.5 },
+                uColor: { value: dustColVec },
+                uOpacity: { value: opacity * 0.6 },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { dustGeo: geo, dustMat: mat };
+    }, [particleCount, r, innerGlowColor, intensity, speed, opacity]);
+    useFrame((state) => {
+        const t = state.clock.getElapsedTime();
+        discMaterial.uniforms.u_time.value = t;
+        dustMat.uniforms.u_time.value = t;
+        if (animations?.length) {
+            applyGenerativeAnimations([discMaterial, dustMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { rotation: [-Math.PI / 2, 0, 0], position: [0, -boundingRadius * 0.75, 0], children: [_jsx("mesh", { material: discMaterial, children: _jsx("circleGeometry", { args: [r, 80] }) }), particleRingEnabled && (_jsx("points", { geometry: dustGeo, material: dustMat }))] }));
+};
+export default PortalEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShockwaveEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ShockwaveEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,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;AAyFD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0HnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/effects/ShockwaveEffect.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useMemo, useEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations';
+// Ring vertex — organic warp + vertical ripple
+const vertexShader = /* glsl */ `
+  uniform float uProgress;
+  uniform float uExpansionScale;
+
+  void main() {
+    vec3 pos = position;
+    float expansion = 1.0 + uProgress * uExpansionScale;
+    pos.x *= expansion;
+    pos.y *= expansion;
+
+    // Organic warp: slight Z ripple based on angle along the torus
+    float angle = atan(pos.y, pos.x);
+    float warp = sin(angle * 8.0 + uProgress * 18.0) * 0.018 * (1.0 - uProgress);
+    pos.z += warp;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  }
+`;
+const fragmentShader = /* glsl */ `
+  uniform float uProgress;
+  uniform vec3  uColor;
+  uniform vec3  uRimColor;
+  uniform float uOpacity;
+  uniform float u_time;
+
+  // Cheap 1D noise for surface texture
+  float hash(float n){ return fract(sin(n) * 43758.5453); }
+
+  void main() {
+    // Core fade
+    float fade   = 1.0 - uProgress;
+
+    // Leading-edge corona: ultra-bright blast front
+    float corona = exp(-uProgress * 6.0) * 2.5;
+
+    // High-frequency energy shimmer on the ring surface
+    float shimmer = 0.75 + 0.25 * hash(uProgress * 40.0 + u_time * 7.0);
+
+    // Rim glow (raised power = tighter, brighter rim)
+    float rim     = pow(max(0.0, 1.0 - uProgress), 4.0);
+
+    // Chromatic split — push rim color toward white at the leading edge
+    vec3 rimBoosted = mix(uRimColor, vec3(1.4, 1.4, 1.6), corona * 0.5);
+    vec3 finalColor  = mix(uColor, rimBoosted, rim + corona * 0.4);
+    finalColor      += rimBoosted * corona * 0.6;
+
+    float alpha = fade * uOpacity * shimmer;
+    if (alpha < 0.005) discard;
+
+    gl_FragColor = vec4(finalColor, alpha);
+  }
+`;
+// Flash disc at ring birth — bright flat burst that fades in ~0.2 progress
+const flashFrag = /* glsl */ `
+  uniform float uProgress;
+  uniform vec3  uColor;
+  uniform float uOpacity;
+
+  varying vec2 vUv;
+
+  void main() {
+    vec2 c = vUv * 2.0 - 1.0;
+    float dist = length(c);
+    if (dist > 1.0) discard;
+    float fade = exp(-uProgress * 12.0);
+    float radial = 1.0 - smoothstep(0.4, 1.0, dist);
+    float alpha = fade * radial * uOpacity * 0.9;
+    if (alpha < 0.005) discard;
+    gl_FragColor = vec4(uColor * 2.0, alpha);
+  }
+`;
+const flashVert = /* glsl */ `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const ShockwaveEffect = ({ boundingRadius, config, animations }) => {
+    const { ringCount, expansionRadius, thickness, intervalSeconds, color, rimColor, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const meshRefs = useRef([]);
+    const flashRefs = useRef([]);
+    const makeRingStates = (count, interval) => Array.from({ length: count }, (_, i) => ({
+        progress: 0,
+        cooldown: (i / Math.max(count, 1)) * interval,
+    }));
+    const ringStates = useRef(makeRingStates(ringCount, intervalSeconds));
+    useEffect(() => {
+        ringStates.current = makeRingStates(ringCount, intervalSeconds);
+    }, [ringCount, intervalSeconds]);
+    const colorVec = useMemo(() => { const c = new THREE.Color(color); return new THREE.Vector3(c.r, c.g, c.b); }, [color]);
+    const rimColorVec = useMemo(() => { const c = new THREE.Color(rimColor); return new THREE.Vector3(c.r, c.g, c.b); }, [rimColor]);
+    const materials = useMemo(() => Array.from({ length: ringCount }, () => new THREE.ShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms: {
+            uProgress: { value: 0 },
+            uExpansionScale: { value: (expansionRadius - 1) * intensity },
+            uColor: { value: colorVec },
+            uRimColor: { value: rimColorVec },
+            uOpacity: { value: opacity },
+            u_time: { value: 0 },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.DoubleSide,
+    })), [ringCount, expansionRadius, intensity, colorVec, rimColorVec, opacity]);
+    const flashMaterials = useMemo(() => Array.from({ length: ringCount }, () => new THREE.ShaderMaterial({
+        vertexShader: flashVert,
+        fragmentShader: flashFrag,
+        uniforms: {
+            uProgress: { value: 0 },
+            uColor: { value: colorVec },
+            uOpacity: { value: opacity },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.DoubleSide,
+    })), [ringCount, colorVec, opacity]);
+    const r = boundingRadius;
+    useFrame((state, delta) => {
+        const t = state.clock.getElapsedTime();
+        for (let i = 0; i < ringCount; i++) {
+            const state_ = ringStates.current[i];
+            const mat = materials[i];
+            const fMat = flashMaterials[i];
+            mat.uniforms.u_time.value = t;
+            if (state_.cooldown > 0) {
+                state_.cooldown -= delta;
+                mat.uniforms.uProgress.value = 1;
+                fMat.uniforms.uProgress.value = 1;
+                continue;
+            }
+            state_.progress += delta * speed;
+            const p = Math.min(state_.progress, 1);
+            mat.uniforms.uProgress.value = p;
+            fMat.uniforms.uProgress.value = p;
+            if (state_.progress >= 1) {
+                state_.progress = 0;
+                state_.cooldown = intervalSeconds / speed;
+            }
+        }
+        if (animations?.length) {
+            applyGenerativeAnimations([...materials, ...flashMaterials], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    const flashR = r * 1.05;
+    return (_jsx("group", { children: Array.from({ length: ringCount }, (_, i) => (_jsxs("group", { children: [_jsx("mesh", { ref: el => { meshRefs.current[i] = el; }, material: materials[i], rotation: [-Math.PI / 2, 0, 0], children: _jsx("torusGeometry", { args: [r, thickness * intensity, 10, 80] }) }), _jsx("mesh", { ref: el => { flashRefs.current[i] = el; }, material: flashMaterials[i], rotation: [-Math.PI / 2, 0, 0], children: _jsx("circleGeometry", { args: [flashR, 48] }) })] }, i))) }));
+};
+export default ShockwaveEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmokePlumeEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/SmokePlumeEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIjF,UAAU,qBAAqB;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AA8ED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqErD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/SmokePlumeEffect.js

@@ -0,0 +1,141 @@
+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';
+// ── Fully GPU-animated smoke puff vertex shader ───────────────────────────────
+// Each particle has a lifetime t ∈ [0,1). It rises, expands, and billows.
+// All motion driven by u_time — zero CPU writes per frame.
+const smokeVert = /* glsl */ `
+  attribute float aT;       // birth offset 0..1 → staggered spawn
+  attribute vec2  aBase;    // (x,z) spawn footprint
+  attribute float aPhase;   // per-particle noise phase
+  attribute float aRotOff;  // per-particle billboard rotation offset
+  attribute float aSize;    // per-particle max size
+
+  uniform float u_time;
+  uniform float u_speed;
+  uniform float uHeight;
+  uniform float uSpread;
+  uniform float uTurb;
+  uniform float uSizeScale;
+
+  varying float vLife;   // 0=just born, 1=about to die
+  varying float vAlpha;
+
+  void main() {
+    // Age loops continuously
+    float life = fract(aT + u_time * u_speed * 0.22);
+    vLife = life;
+
+    // Footprint expands as smoke rises and dissipates
+    float expand  = 1.0 + life * 2.5;
+    float x = aBase.x * expand * uSpread;
+    float z = aBase.y * expand * uSpread;
+
+    // Turbulent horizontal drift — two layers of sine turbulence
+    float t1 = sin(life * 4.2 + aPhase)               * uTurb * uSpread * life * 0.9;
+    float t2 = sin(life * 7.1 + aPhase * 1.7 + 1.3)   * uTurb * uSpread * life * 0.4;
+    float t3 = cos(life * 3.5 - aPhase * 0.8)          * uTurb * uSpread * life * 0.3;
+    x += t1 + t2;
+    z += t3 + t2 * 0.5;
+
+    float y = life * uHeight - uHeight * 0.45;
+
+    // Particle grows from tiny to large, then fades to nothing
+    float growFade = smoothstep(0.0, 0.15, life) * smoothstep(1.0, 0.6, life);
+    float sz = aSize * uSizeScale * growFade;
+
+    // Alpha: ramp in quickly, stay opaque, fade out
+    vAlpha = growFade * growFade;
+
+    vec4 mv = modelViewMatrix * vec4(x, y, z, 1.0);
+    gl_PointSize = sz * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const smokeFrag = /* glsl */ `
+  uniform vec3  uSmokeColor;
+  uniform float uOpacity;
+  varying float vLife;
+  varying float vAlpha;
+
+  void main() {
+    if (vAlpha < 0.01) discard;
+
+    vec2  c = gl_PointCoord - 0.5;
+    float d = length(c);
+    if (d > 0.5) discard;
+
+    // Soft gaussian puff — not a crisp disc
+    float g = exp(-d * d * 3.8);
+
+    // Slightly darken as smoke ages (hot white → grey → dark)
+    float darkening = 1.0 - vLife * 0.45;
+    vec3  col = uSmokeColor * darkening;
+
+    gl_FragColor = vec4(col, g * vAlpha * uOpacity);
+  }
+`;
+const SmokePlumeEffect = ({ boundingRadius, config, animations }) => {
+    const { particleCount, height, spread, smokeColor, turbulence, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const h = boundingRadius * height;
+    const s = boundingRadius * spread;
+    const { geo, mat } = useMemo(() => {
+        const N = Math.max(40, particleCount);
+        const aT = new Float32Array(N);
+        const aBase = new Float32Array(N * 2);
+        const aPhase = new Float32Array(N);
+        const aRotOff = new Float32Array(N);
+        const aSize = new Float32Array(N);
+        for (let i = 0; i < N; i++) {
+            aT[i] = i / N;
+            // Concentrate spawns near center, sparse toward edges
+            const r = Math.pow(Math.random(), 0.6) * s;
+            const a = Math.random() * Math.PI * 2;
+            aBase[i * 2] = Math.cos(a) * r;
+            aBase[i * 2 + 1] = Math.sin(a) * r;
+            aPhase[i] = Math.random() * Math.PI * 2;
+            aRotOff[i] = Math.random() * Math.PI * 2;
+            aSize[i] = 35 + Math.random() * 45; // puff screen size
+        }
+        const g = new THREE.BufferGeometry();
+        g.setAttribute('position', new THREE.BufferAttribute(new Float32Array(N * 3), 3));
+        g.setAttribute('aT', new THREE.BufferAttribute(aT, 1));
+        g.setAttribute('aBase', new THREE.BufferAttribute(aBase, 2));
+        g.setAttribute('aPhase', new THREE.BufferAttribute(aPhase, 1));
+        g.setAttribute('aRotOff', new THREE.BufferAttribute(aRotOff, 1));
+        g.setAttribute('aSize', new THREE.BufferAttribute(aSize, 1));
+        g.frustumCulled = false;
+        const sc = new THREE.Color(smokeColor);
+        const m = new THREE.ShaderMaterial({
+            vertexShader: smokeVert,
+            fragmentShader: smokeFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                u_speed: { value: speed },
+                uHeight: { value: h },
+                uSpread: { value: s },
+                uTurb: { value: turbulence },
+                uSizeScale: { value: intensity },
+                uSmokeColor: { value: new THREE.Vector3(sc.r, sc.g, sc.b) },
+                uOpacity: { value: opacity },
+            },
+            transparent: true,
+            depthWrite: false,
+            // Normal blending (not additive) — smoke should look opaque/grey, not glowy
+            blending: THREE.NormalBlending,
+        });
+        return { geo: g, mat: m };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [particleCount, h, s, smokeColor, turbulence, opacity, speed, intensity]);
+    useFrame((state) => {
+        mat.uniforms.u_time.value = state.clock.getElapsedTime();
+        if (animations?.length) {
+            applyGenerativeAnimations([mat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return _jsx("points", { geometry: geo, material: mat });
+};
+export default SmokePlumeEffect;

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

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

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

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