@ntalmagor/3drize-viewer 0.1.2

package/dist/components/effects/SmokeRingEffect.js

@@ -0,0 +1,158 @@
+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';
+// ── Per-ring puff shader (one Points per ring — GPU computes torus positions) ──
+const ringVert = /* glsl */ `
+  attribute float aAngle;    // 0..TAU position around torus
+  attribute float aPuff;     // sub-angle within tube cross-section 0..TAU
+  attribute float aPhase;
+
+  uniform float uProgress;   // 0=born, 1=dead
+  uniform float uMaxRadius;
+  uniform float uThickness;  // tube radius
+  uniform float uRiseSpeed;  // Y lift per unit progress
+  uniform float uBaseY;
+  uniform float u_time;
+
+  varying float vAlpha;
+
+  void main() {
+    if (uProgress < 0.0 || uProgress > 1.0) {
+      gl_PointSize = 0.0;
+      gl_Position  = vec4(0.0);
+      vAlpha = 0.0;
+      return;
+    }
+
+    float ringR = uMaxRadius * uProgress;
+
+    // Tube cross-section wiggles outward slightly as ring expands
+    float tubeR = uThickness * (0.8 + 0.4 * uProgress);
+    float tubePhi = aPuff + u_time * 0.4 + aPhase;
+    float offR = tubeR * cos(tubePhi);
+    float offY = tubeR * sin(tubePhi);
+
+    float r   = ringR + offR;
+    float x   = cos(aAngle) * r;
+    float z   = sin(aAngle) * r;
+    float y   = uBaseY + uProgress * uRiseSpeed + offY;
+
+    // Puff grows then fades
+    float lifeAlpha = smoothstep(0.0, 0.12, uProgress) * smoothstep(1.0, 0.65, uProgress);
+    vAlpha = lifeAlpha;
+
+    float puffSize = uThickness * 50.0 * lifeAlpha;
+
+    vec4 mv = modelViewMatrix * vec4(x, y, z, 1.0);
+    gl_PointSize = puffSize * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const ringFrag = /* glsl */ `
+  uniform vec3  uSmokeColor;
+  uniform float uOpacity;
+  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;
+    float g = exp(-d * d * 3.0);
+    gl_FragColor = vec4(uSmokeColor, g * vAlpha * uOpacity);
+  }
+`;
+const PUFFS_PER_RING = 120;
+const SmokeRingEffect = ({ boundingRadius, config, animations }) => {
+    const { ringCount, expansionRadius, riseSpeed, intervalSeconds, smokeColor, thickness, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const N = Math.max(1, Math.min(ringCount, 4));
+    // Ring states — one per slot
+    const ringStates = useRef([]);
+    const { geos, mats } = useMemo(() => {
+        const maxR = boundingRadius * expansionRadius;
+        const tubeR = boundingRadius * thickness;
+        const riseH = boundingRadius * riseSpeed;
+        const sc = new THREE.Color(smokeColor);
+        const scv = new THREE.Vector3(sc.r, sc.g, sc.b);
+        // Stagger initial timers so rings don't all fire together
+        ringStates.current = Array.from({ length: N }, (_, i) => ({
+            progress: 0,
+            timer: (i / N) * intervalSeconds,
+            active: false,
+        }));
+        const geos = [];
+        const mats = [];
+        for (let ri = 0; ri < N; ri++) {
+            const aAngle = new Float32Array(PUFFS_PER_RING);
+            const aPuff = new Float32Array(PUFFS_PER_RING);
+            const aPhase = new Float32Array(PUFFS_PER_RING);
+            for (let i = 0; i < PUFFS_PER_RING; i++) {
+                aAngle[i] = (i / PUFFS_PER_RING) * Math.PI * 2;
+                aPuff[i] = Math.random() * Math.PI * 2;
+                aPhase[i] = Math.random() * Math.PI * 2;
+            }
+            const geo = new THREE.BufferGeometry();
+            geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(PUFFS_PER_RING * 3), 3));
+            geo.setAttribute('aAngle', new THREE.BufferAttribute(aAngle, 1));
+            geo.setAttribute('aPuff', new THREE.BufferAttribute(aPuff, 1));
+            geo.setAttribute('aPhase', new THREE.BufferAttribute(aPhase, 1));
+            geo.frustumCulled = false;
+            const mat = new THREE.ShaderMaterial({
+                vertexShader: ringVert,
+                fragmentShader: ringFrag,
+                uniforms: {
+                    uProgress: { value: -1 }, // -1 = hidden
+                    uMaxRadius: { value: maxR },
+                    uThickness: { value: tubeR * intensity },
+                    uRiseSpeed: { value: riseH },
+                    uBaseY: { value: -boundingRadius * 0.2 },
+                    u_time: { value: 0 },
+                    uSmokeColor: { value: scv },
+                    uOpacity: { value: opacity },
+                },
+                transparent: true,
+                depthWrite: false,
+                blending: THREE.NormalBlending,
+            });
+            geos.push(geo);
+            mats.push(mat);
+        }
+        return { geos, mats };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [N, boundingRadius, expansionRadius, riseSpeed, intervalSeconds, smokeColor, thickness, opacity, intensity]);
+    useFrame((state, delta) => {
+        const t = state.clock.getElapsedTime();
+        const dt = delta * speed;
+        ringStates.current.forEach((ring, ri) => {
+            const mat = mats[ri];
+            mat.uniforms.u_time.value = t;
+            if (ring.active) {
+                ring.progress += dt * 0.32;
+                if (ring.progress >= 1) {
+                    ring.active = false;
+                    ring.progress = 0;
+                    ring.timer = intervalSeconds / speed;
+                    mat.uniforms.uProgress.value = -1;
+                }
+                else {
+                    mat.uniforms.uProgress.value = ring.progress;
+                }
+            }
+            else {
+                ring.timer -= delta;
+                if (ring.timer <= 0) {
+                    ring.active = true;
+                    ring.progress = 0;
+                }
+            }
+        });
+        if (animations?.length) {
+            applyGenerativeAnimations(mats, animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsx("group", { children: geos.map((geo, i) => (_jsx("points", { geometry: geo, material: mats[i] }, i))) }));
+};
+export default SmokeRingEffect;

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

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

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

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

package/dist/components/effects/VolumetricFogEffect.js

@@ -0,0 +1,111 @@
+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';
+// ── Billboard fog puff — drifts slowly, never rises far ───────────────────────
+const fogVert = /* glsl */ `
+  attribute float aT;       // stagger offset 0..1
+  attribute vec3  aCenter;  // resting (x,y,z) position in fog layer
+  attribute float aPhase;
+  attribute float aSize;
+
+  uniform float u_time;
+  uniform float uDrift;    // horizontal drift speed
+  uniform float uFogRadius;
+
+  varying float vAlpha;
+
+  void main() {
+    float t = fract(aT + u_time * 0.05);  // very slow life cycle — fog is persistent
+
+    // Gentle horizontal drift — fog rolls around the base
+    float dx = sin(u_time * uDrift + aPhase)          * uFogRadius * 0.18;
+    float dz = cos(u_time * uDrift * 0.7 + aPhase * 1.3) * uFogRadius * 0.14;
+    // Slow vertical bob
+    float dy = sin(u_time * 0.25 + aPhase) * uFogRadius * 0.06;
+
+    vec3 pos = aCenter + vec3(dx, dy, dz);
+
+    // Puff fades in/out with its own phase to prevent popping
+    float pulse = 0.55 + 0.45 * sin(u_time * 0.35 + aPhase * 2.1);
+    vAlpha = pulse;
+
+    vec4 mv = modelViewMatrix * vec4(pos, 1.0);
+    gl_PointSize = aSize * (220.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const fogFrag = /* glsl */ `
+  uniform vec3  uFogColor;
+  uniform float uDensity;
+  varying float vAlpha;
+
+  void main() {
+    vec2  c = gl_PointCoord - 0.5;
+    float d = length(c);
+    if (d > 0.5) discard;
+
+    // Very soft — almost no hard edge at all
+    float g = exp(-d * d * 2.2);
+
+    gl_FragColor = vec4(uFogColor, g * vAlpha * uDensity);
+  }
+`;
+const VolumetricFogEffect = ({ boundingRadius, config, animations }) => {
+    const { particleCount, fogRadius, driftSpeed, fogColor, density, opacity, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const r = boundingRadius * fogRadius;
+    const { geo, mat } = useMemo(() => {
+        const N = Math.max(20, Math.min(particleCount, 200));
+        const aT = new Float32Array(N);
+        const aCenter = new Float32Array(N * 3);
+        const aPhase = new Float32Array(N);
+        const aSize = new Float32Array(N);
+        for (let i = 0; i < N; i++) {
+            aT[i] = i / N;
+            // Distribute puffs in a disc with vertical variation at base level
+            const angle = Math.random() * Math.PI * 2;
+            const rad = Math.sqrt(Math.random()) * r;
+            const yOff = (Math.random() - 0.3) * boundingRadius * 0.35; // mostly at base, slight spread
+            aCenter[i * 3] = Math.cos(angle) * rad;
+            aCenter[i * 3 + 1] = yOff - boundingRadius * 0.3; // sit at/below object base
+            aCenter[i * 3 + 2] = Math.sin(angle) * rad;
+            aPhase[i] = Math.random() * Math.PI * 2;
+            // Large puffs — fog is billowy
+            aSize[i] = (50 + Math.random() * 70) * intensity;
+        }
+        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('aCenter', new THREE.BufferAttribute(aCenter, 3));
+        g.setAttribute('aPhase', new THREE.BufferAttribute(aPhase, 1));
+        g.setAttribute('aSize', new THREE.BufferAttribute(aSize, 1));
+        g.frustumCulled = false;
+        const fc = new THREE.Color(fogColor);
+        const m = new THREE.ShaderMaterial({
+            vertexShader: fogVert,
+            fragmentShader: fogFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                uDrift: { value: driftSpeed },
+                uFogRadius: { value: r },
+                uFogColor: { value: new THREE.Vector3(fc.r, fc.g, fc.b) },
+                uDensity: { value: density * opacity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
+        });
+        return { geo: g, mat: m };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [particleCount, r, fogColor, density, driftSpeed, opacity, intensity, boundingRadius]);
+    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 VolumetricFogEffect;

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const dataCenterServer = "https://3d-rise.com/api/data/";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,kCAAkC,CAAC"}

package/dist/constants.js

@@ -0,0 +1 @@
+export const dataCenterServer = 'https://3d-rise.com/api/data/';

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":""}

package/dist/hooks/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/hooks/useAnimationEvents.d.ts

@@ -0,0 +1,10 @@
+import { type AnimationEvent } from '../../../core/src/services/AnimationsManager';
+interface AnimationEventHandlers {
+    onSequenceStart?: (event: AnimationEvent) => void;
+    onSequenceEnd?: (event: AnimationEvent) => void;
+    onStepStart?: (event: AnimationEvent) => void;
+    onStepEnd?: (event: AnimationEvent) => void;
+}
+export declare const useAnimationEvents: (handlers: AnimationEventHandlers) => void;
+export {};
+//# sourceMappingURL=useAnimationEvents.d.ts.map

package/dist/hooks/useAnimationEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationEvents.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimationEvents.ts"],"names":[],"mappings":"AACA,OAA0B,EAAE,KAAK,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAEtG,UAAU,sBAAsB;IAC9B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAI,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAM,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAQ,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,kBAAkB,GAAI,UAAU,sBAAsB,SA0BlE,CAAC"}

package/dist/hooks/useAnimationEvents.js

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import AnimationsManager from '../../../core/src/services/AnimationsManager';
+export const useAnimationEvents = (handlers) => {
+    const ref = useRef(handlers);
+    ref.current = handlers;
+    useEffect(() => {
+        const wrap = (key) => (event) => ref.current[key]?.(event);
+        const ss = wrap('onSequenceStart');
+        const se = wrap('onSequenceEnd');
+        const ts = wrap('onStepStart');
+        const te = wrap('onStepEnd');
+        if (handlers.onSequenceStart)
+            AnimationsManager.on('sequenceStart', ss);
+        if (handlers.onSequenceEnd)
+            AnimationsManager.on('sequenceEnd', se);
+        if (handlers.onStepStart)
+            AnimationsManager.on('stepStart', ts);
+        if (handlers.onStepEnd)
+            AnimationsManager.on('stepEnd', te);
+        return () => {
+            AnimationsManager.off('sequenceStart', ss);
+            AnimationsManager.off('sequenceEnd', se);
+            AnimationsManager.off('stepStart', ts);
+            AnimationsManager.off('stepEnd', te);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};

package/dist/hooks/useCameraAnimation.d.ts

@@ -0,0 +1,35 @@
+import { PerspectiveCamera } from 'three';
+import { type CameraState, type QuaternionArray, type Vector3Array } from '@ntalmagor/3drize-core';
+interface UseCameraAnimationOptions {
+    autoAnimate?: boolean;
+    defaultDuration?: number;
+    defaultEase?: string;
+    onAnimationStart?: () => void;
+    onAnimationComplete?: () => void;
+    onAnimationUpdate?: () => void;
+}
+interface CameraAnimationTarget {
+    position?: Vector3Array;
+    orientation?: QuaternionArray | Vector3Array;
+    fov?: number;
+    near?: number;
+    far?: number;
+}
+export declare const useCameraAnimation: (options?: UseCameraAnimationOptions, cameraState?: CameraState) => {
+    cameraState: CameraState;
+    isAnimating: () => boolean;
+    animateHandlers: (pointer: {
+        x: number;
+        y: number;
+    }) => void;
+    animateCamera: (target: CameraAnimationTarget, duration?: number, ease?: string, lookAtTarget?: Vector3Array) => Promise<void>;
+    animateToPosition: (position: Vector3Array, duration?: number, ease?: string) => Promise<void>;
+    animateToOrientation: (orientation: QuaternionArray, duration?: number, ease?: string) => Promise<void>;
+    animateToFov: (fov: number, duration?: number, ease?: string) => Promise<void>;
+    lookAt: (target: Vector3Array, animated?: boolean, duration?: number, ease?: string) => Promise<void>;
+    orbitAroundTarget: (target: Vector3Array, radius: number, startAngle?: number, endAngle?: number, duration?: number, ease?: string) => Promise<void>;
+    killAnimation: () => void;
+    camera: PerspectiveCamera | null;
+};
+export default useCameraAnimation;
+//# sourceMappingURL=useCameraAnimation.d.ts.map

package/dist/hooks/useCameraAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCameraAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCameraAnimation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAW,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAO5G,UAAU,yBAAyB;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,GAAG,YAAY,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB,GAAI,UAAS,yBAA8B,EAAE,cAAa,WAA+B;;;+BAwMpF;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;4BApKhD,qBAAqB,aACnB,MAAM,SACV,MAAM,iBACG,YAAY;kCAwHjB,YAAY,aACX,MAAM,SACV,MAAM;wCAgCA,eAAe,aACjB,MAAM,SACV,MAAM;wBAuCR,MAAM,aACA,MAAM,SACV,MAAM;qBAOL,YAAY,aACV,OAAO,aACN,MAAM,SACV,MAAM;gCA2BL,YAAY,UACZ,MAAM,eACF,MAAM,aACR,MAAM,aACL,MAAM,SACV,MAAM;;;CA4EhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/hooks/useCameraAnimation.js

@@ -0,0 +1,268 @@
+import { useRef, useEffect } from 'react';
+import { Quaternion } from 'three';
+import gsap from 'gsap';
+import { getType } from '@ntalmagor/3drize-core';
+import { useMouseHandlers } from './useMouseHandlers';
+import { useOrbitControls } from './useOrbitControls';
+import cameraManager from '../utils/CameraSingleton';
+export const useCameraAnimation = (options = {}, cameraState = {}) => {
+    const { autoAnimate = true, defaultDuration = 2, defaultEase = "power2.out", onAnimationStart, onAnimationComplete, onAnimationUpdate } = options;
+    // const cameraState = useAppSelector(selectCamera);
+    const { interpolateProperty } = useMouseHandlers();
+    const orbitControls = useOrbitControls();
+    const cameraRef = useRef(cameraManager.getCamera());
+    const animationRef = useRef(null);
+    const isAnimatingRef = useRef(false);
+    const handlers = cameraState.handlers;
+    // Update camera reference when Three.js camera changes
+    useEffect(() => {
+        if (!cameraRef.current) {
+            cameraRef.current = cameraManager.getCamera();
+        }
+    }, []);
+    // Kill any running animation
+    const killAnimation = () => {
+        if (animationRef.current) {
+            animationRef.current.kill();
+            animationRef.current = null;
+        }
+        isAnimatingRef.current = false;
+    };
+    // Animate camera to target values
+    const animateCamera = (target, duration = defaultDuration, ease = defaultEase, lookAtTarget) => {
+        const cam = cameraRef.current;
+        // console.log("animateCamera called with cam:", cam);
+        if (!cam)
+            return Promise.resolve();
+        // Kill any existing animation
+        killAnimation();
+        // console.log('animateCamera', duration, ease)
+        return new Promise((resolve) => {
+            // console.log("Animating camera with target:", target, "duration:", duration, "ease:", ease);
+            const timeline = gsap.timeline({
+                onStart: () => {
+                    isAnimatingRef.current = true;
+                    onAnimationStart?.();
+                },
+                onUpdate: () => {
+                    // Update projection matrix if FOV changed
+                    if (target.fov !== undefined || target.near !== undefined || target.far !== undefined) {
+                        cam.updateProjectionMatrix();
+                    }
+                    onAnimationUpdate?.();
+                },
+                onComplete: () => {
+                    isAnimatingRef.current = false;
+                    animationRef.current = null;
+                    onAnimationComplete?.();
+                    resolve();
+                }
+            });
+            // Animate position
+            if (target.position) {
+                console.log("Animating camera to position:", target.position, duration, ease);
+                timeline.to(cam.position, {
+                    x: target.position[0],
+                    y: target.position[1],
+                    z: target.position[2],
+                    duration,
+                    ease
+                }, 0);
+            }
+            // Animate orientation
+            if (target.orientation) {
+                if (target.orientation.length === 3) {
+                    // Euler angles
+                    timeline.to(cam.rotation, {
+                        x: target.orientation[0],
+                        y: target.orientation[1],
+                        z: target.orientation[2],
+                        duration,
+                        ease
+                    }, 0);
+                }
+                else if (target.orientation.length === 4) {
+                    // Quaternion - convert to current quaternion and animate
+                    const targetQuat = new Quaternion(target.orientation[0], target.orientation[1], target.orientation[2], target.orientation[3]);
+                    const currentQuat = cam.quaternion.clone();
+                    timeline.to({ t: 0 }, {
+                        t: 1,
+                        duration,
+                        ease,
+                        onUpdate: function () {
+                            const t = this.targets()[0].t;
+                            cam.quaternion.slerpQuaternions(currentQuat, targetQuat, t);
+                        }
+                    }, 0);
+                }
+            }
+            // Animate FOV
+            if (target.fov !== undefined) {
+                timeline.to(cam, {
+                    fov: target.fov,
+                    duration,
+                    ease
+                }, 0);
+            }
+            // Animate clipping planes
+            if (target.near !== undefined) {
+                timeline.to(cam, {
+                    near: target.near,
+                    duration,
+                    ease
+                }, 0);
+            }
+            if (target.far !== undefined) {
+                timeline.to(cam, {
+                    far: target.far,
+                    duration,
+                    ease
+                }, 0);
+            }
+            // If lookAt target provided, animate the controls.target
+            // console.log("Animating camera with lookAtTarget:", lookAtTarget, orbitControls);
+            if (lookAtTarget && orbitControls) {
+                timeline.to(orbitControls.target, {
+                    x: lookAtTarget[0],
+                    y: lookAtTarget[1],
+                    z: lookAtTarget[2],
+                    duration,
+                    ease
+                }, 0);
+            }
+            animationRef.current = timeline;
+        });
+    };
+    // Animate to position
+    const animateToPosition = (position, duration, ease) => {
+        return animateCamera({ position }, duration, ease);
+    };
+    const applyInterpolatedValue = (property, interpolatedValue, valueType) => {
+        switch (valueType) {
+            case 'vector3':
+                if (Array.isArray(interpolatedValue)) {
+                    cameraRef.current[property].set(interpolatedValue[0], interpolatedValue[1], interpolatedValue[2]);
+                }
+                break;
+            case 'number':
+                cameraRef.current[property] = interpolatedValue;
+                break;
+            default:
+                break;
+        }
+    };
+    // Animate to orientation
+    const animateToOrientation = (orientation, duration, ease) => {
+        return animateCamera({ orientation }, duration, ease);
+    };
+    const animateHandlers = (pointer) => {
+        if (!handlers?.onMouseMove?.enabled || !handlers.onMouseMove.properties.length || !cameraRef.current) {
+            return;
+        }
+        handlers.onMouseMove.properties.forEach(props => {
+            const { property, propertySettings } = props;
+            const { min: minValue, max: maxValue, axis, sensitivity = 1, inverted = false } = propertySettings;
+            // Determine base value and property type
+            let baseValue = cameraState[property];
+            if (!baseValue)
+                return;
+            const interpolatedValue = interpolateProperty(baseValue, minValue, maxValue, pointer, axis, sensitivity, inverted);
+            const valueType = getType(property, interpolatedValue);
+            // Update cam directly
+            if (cameraRef.current[property] !== undefined) {
+                applyInterpolatedValue(property, interpolatedValue, valueType);
+            }
+        });
+    };
+    // Animate FOV
+    const animateToFov = (fov, duration, ease) => {
+        return animateCamera({ fov }, duration, ease);
+    };
+    // Look at target
+    const lookAt = (target, animated = autoAnimate, duration, ease) => {
+        const cam = cameraRef.current;
+        if (!cam)
+            return Promise.resolve();
+        if (!animated && target.length >= 3) {
+            cam.lookAt(target[0], target[1], target[2]);
+            return Promise.resolve();
+        }
+        // Calculate target rotation for animation
+        if (target.length < 3)
+            return Promise.resolve();
+        const tempCamera = cam.clone();
+        tempCamera.lookAt(target[0], target[1], target[2]);
+        const targetOrientation = [
+            tempCamera.rotation.x,
+            tempCamera.rotation.y,
+            tempCamera.rotation.z,
+            1
+        ];
+        return animateToOrientation(targetOrientation, duration, ease);
+    };
+    // Orbit around target
+    const orbitAroundTarget = (target, radius, startAngle = 0, endAngle = Math.PI * 2, duration, ease) => {
+        const cam = cameraRef.current;
+        if (!cam)
+            return Promise.resolve();
+        killAnimation();
+        return new Promise((resolve) => {
+            const timeline = gsap.timeline({
+                onStart: () => {
+                    isAnimatingRef.current = true;
+                    onAnimationStart?.();
+                },
+                onComplete: () => {
+                    isAnimatingRef.current = false;
+                    animationRef.current = null;
+                    onAnimationComplete?.();
+                    resolve();
+                }
+            });
+            timeline.to({ angle: startAngle }, {
+                angle: endAngle,
+                duration: duration || defaultDuration,
+                ease: ease || defaultEase,
+                onUpdate: function () {
+                    if (target.length < 3)
+                        return;
+                    const angle = this.targets()[0].angle;
+                    const x = target[0] + Math.cos(angle) * radius;
+                    const z = target[2] + Math.sin(angle) * radius;
+                    cam.position.set(x, cam.position.y, z);
+                    cam.lookAt(target[0], target[1], target[2]);
+                    onAnimationUpdate?.();
+                }
+            });
+            animationRef.current = timeline;
+        });
+    };
+    // Check if camera is currently animating
+    const isAnimating = () => {
+        return isAnimatingRef.current;
+    };
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            killAnimation();
+        };
+    }, []);
+    return {
+        // State
+        cameraState,
+        isAnimating,
+        animateHandlers,
+        // Animation methods
+        animateCamera,
+        animateToPosition,
+        animateToOrientation,
+        animateToFov,
+        lookAt,
+        orbitAroundTarget,
+        // Control methods
+        killAnimation,
+        // Camera reference
+        camera: cameraRef.current
+    };
+};
+export default useCameraAnimation;

package/dist/hooks/useContinuousEffects.d.ts

@@ -0,0 +1,15 @@
+import { Object3D } from "three";
+import { type CreatedObjectSettings, type EffectState } from "@ntalmagor/3drize-core";
+export declare const DEBUG_CONTINUOUS_EFFECTS = false;
+export interface UseContinuousEffectsOptions {
+    enabled?: boolean;
+    animateMaterial?: boolean;
+    hovered?: boolean;
+}
+export interface UseContinuousEffectsResult {
+    isPathAnimating: () => boolean;
+    effectStateRef: React.MutableRefObject<EffectState | null>;
+}
+export declare const useContinuousEffects: (objectSettings: CreatedObjectSettings | null, options: UseContinuousEffectsOptions | undefined, object: Object3D) => UseContinuousEffectsResult;
+export default useContinuousEffects;
+//# sourceMappingURL=useContinuousEffects.d.ts.map