fix: render image overlay in live preview window

src/app/page.tsx

@@ -1,5 +1,6 @@
 import VideoEditor from "@/components/VideoEditor";
 import Footer from "@/components/Footer"; 
+import PrivacyBanner from "@/components/PrivacyBanner";
 
 export default function Home() {
   return (

src/components/PrivacyBanner.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const STORAGE_KEY = "privacy-banner-dismissed";
+
+export default function PrivacyBanner() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const dismissed = localStorage.getItem(
+      STORAGE_KEY,
+    );
+
+    if (!dismissed) {
+      setVisible(true);
+    }
+  }, []);
+
+  const handleDismiss = () => {
+    localStorage.setItem(
+      STORAGE_KEY,
+      "true",
+    );
+
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className="mx-4 mt-4 rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4 text-sm shadow-sm">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="font-semibold">
+            Your videos never leave your
+            device.
+          </p>
+
+          <p className="mt-1 text-[var(--muted)]">
+            Reframe processes videos fully
+            in-browser using FFmpeg.wasm —
+            no uploads, no servers, 100%
+            private.
+          </p>
+        </div>
+
+        <button
+          onClick={handleDismiss}
+          aria-label="Dismiss privacy banner"
+          className="text-[var(--muted)] hover:text-white"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/VideoEditor.tsx

@@ -195,17 +195,26 @@ export default function VideoEditor() {
           <div className="space-y-4 min-w-0">
             <div className="bg-[var(--surface)] rounded-xl p-5 border border-[var(--border)] animate-fade-in">
               <FileUpload onFileSelect={handleFileSelect} currentFile={file} fileError={fileError} duration={duration} />
-
               {!file && (
                 <div className="text-center text-[var(--muted)] py-6">
                   <p>Upload a video to get started</p>
-                  <p className="text-sm">Supports MP4, MOV, WebM and more</p>
+                  <p className="text-sm">
+                    Supports MP4, MOV, WebM and more
+                  </p>
                 </div>
               )}
 
               {file && (
                 <div className="mt-4 animate-fade-in">
-                  <VideoPreview file={file} recipe={recipe} videoRef={videoRef} />
+                  <VideoPreview
+                    file={file}
+                    recipe={recipe}
+                    videoRef={videoRef}
+                    overlayFile={overlayFile}
+                    overlayPosition={overlayPosition}
+                    overlaySize={overlaySize}
+                    overlayOpacity={overlayOpacity}
+                  />
 
                   <div className="mt-3">
                     <ThumbnailStrip
@@ -237,7 +246,7 @@ export default function VideoEditor() {
                       recipe={recipe}
                       onChange={updateRecipe}
                       duration={duration}
-                      file={file} 
+                      file={file}
                     />
                   </Section>
                   <Section icon={<RotateCw size={12} />} title="Rotate" delay={100}>
@@ -466,4 +475,4 @@ export default function VideoEditor() {
       </div>
     </div>
   );
-}
+}