Upload 10 files

remotion/Scene.tsx

@@ -1,4 +1,4 @@
-import { AbsoluteFill, Img, Video, useCurrentFrame, useVideoConfig, interpolate, Easing, Audio } from 'remotion';
+import { AbsoluteFill, Img, OffthreadVideo, useCurrentFrame, useVideoConfig, interpolate, Easing, Audio } from 'remotion';
 import { SceneApi, ProjectSettings } from './types';
 import { AudioWave } from './AudioWave';
 
@@ -47,34 +47,54 @@ export const Scene: React.FC<Props> = ({ scene, settings }) => {
         }
     };
 
-    // Ken Burns Effect (Slow Zoom)
-    const scale = interpolate(
-        frame,
-        [0, durationFrames],
-        [1, 1.15], // Zoom from 100% to 115%
-        { easing: Easing.bezier(0.25, 1, 0.5, 1) }
-    );
-
-    // Slight Pan (Random direction simulation using order_index as seed logic)
-    // Simple pan right for now
-    const translateX = interpolate(
-        frame,
-        [0, durationFrames],
-        [0, -20]
-    );
+    // Camera Movement Logic
+    const movements = settings.cameraMovements || ['zoom_in'];
+    // Pick movement based on scene index to ensure stable pseudo-randomness or sequentiality
+    const movementType = movements[scene.order_index % movements.length];
+
+    let scale = 1;
+    let translateX = 0;
+    let translateY = 0;
+
+    switch (movementType) {
+        case 'zoom_in':
+            scale = interpolate(frame, [0, durationFrames], [1, 1.15], { easing: Easing.bezier(0.25, 1, 0.5, 1) });
+            break;
+        case 'zoom_out':
+            scale = interpolate(frame, [0, durationFrames], [1.15, 1], { easing: Easing.bezier(0.25, 1, 0.5, 1) });
+            break;
+        case 'pan_left':
+            scale = 1.15; // Zoom in slightly to allow panning without black bars
+            translateX = interpolate(frame, [0, durationFrames], [0, -40]); // Pan right-to-left
+            break;
+        case 'pan_right':
+            scale = 1.15;
+            translateX = interpolate(frame, [0, durationFrames], [-40, 0]); // Pan left-to-right (corrected logic)
+            break;
+        case 'pan_up':
+            scale = 1.15;
+            translateY = interpolate(frame, [0, durationFrames], [0, -40]);
+            break;
+        case 'pan_down':
+            scale = 1.15;
+            translateY = interpolate(frame, [0, durationFrames], [-40, 0]);
+            break;
+        case 'static':
+        default:
+            scale = 1;
+            break;
+    }
 
     return (
         <AbsoluteFill style={{ overflow: 'hidden', ...getTransitionStyle() }}>
             {/* Background Image with Ken Burns */}
             {scene.image_url ? (
-                <AbsoluteFill style={{ transform: `scale(${scale}) translateX(${translateX}px)` }}>
+                <AbsoluteFill style={{ transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)` }}>
                     {(scene.media_type === 'video' || scene.image_url.includes('.mp4')) ? (
-                        <Video
+                        <OffthreadVideo
                             src={scene.image_url}
                             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                             muted={true}
-                            // Loop video if shorter than scene duration
-                            loop
                         />
                     ) : (
                         <Img