shadow effect

src/components/video-editor/SettingsPanel.tsx

@@ -32,6 +32,8 @@ interface SettingsPanelProps {
   onZoomDepthChange?: (depth: ZoomDepth) => void;
   selectedZoomId?: string | null;
   onZoomDelete?: (id: string) => void;
+  showShadow?: boolean;
+  onShadowChange?: (showShadow: boolean) => void;
 }
 
 const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
@@ -42,7 +44,7 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
   { depth: 5, label: "3.5×" },
 ];
 
-export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete }: SettingsPanelProps) {
+export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete, showShadow, onShadowChange }: SettingsPanelProps) {
   const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
   const [gradient, setGradient] = useState<string>(GRADIENTS[0]);
 
@@ -106,7 +108,10 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
       </div>
       <div className="mb-6">
         <div className="flex items-center gap-2 mb-4">
-          <Switch/>
+          <Switch
+            checked={showShadow}
+            onCheckedChange={onShadowChange}
+          />
           <div className="text-sm">Shadow</div>
         </div>
       </div>

src/components/video-editor/VideoEditor.tsx

@@ -27,6 +27,7 @@ export default function VideoEditor() {
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   const [wallpaper, setWallpaper] = useState<string>(WALLPAPER_PATHS[0]);
+  const [showShadow, setShowShadow] = useState(false);
   const [zoomRegions, setZoomRegions] = useState<ZoomRegion[]>([]);
   const [selectedZoomId, setSelectedZoomId] = useState<string | null>(null);
 
@@ -185,6 +186,7 @@ export default function VideoEditor() {
                   onSelectZoom={handleSelectZoom}
                   onZoomFocusChange={handleZoomFocusChange}
                   isPlaying={isPlaying}
+                  showShadow={showShadow}
                 />
               </div>
               <PlaybackControls
@@ -216,6 +218,8 @@ export default function VideoEditor() {
         onZoomDepthChange={handleZoomDepthChange}
         selectedZoomId={selectedZoomId}
         onZoomDelete={handleZoomDelete}
+        showShadow={showShadow}
+        onShadowChange={setShowShadow}
       />
     </div>
   );

src/components/video-editor/VideoPlayback.tsx

@@ -23,6 +23,7 @@ interface VideoPlaybackProps {
   onSelectZoom: (id: string | null) => void;
   onZoomFocusChange: (id: string, focus: ZoomFocus) => void;
   isPlaying: boolean;
+  showShadow?: boolean;
 }
 
 export interface VideoPlaybackRef {
@@ -44,6 +45,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
   onSelectZoom,
   onZoomFocusChange,
   isPlaying,
+  showShadow,
 }, ref) => {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -528,7 +530,15 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
       className="relative aspect-video rounded-sm overflow-hidden bg-cover bg-center"
       style={{ ...backgroundStyle, width: '100%' }}
     >
-      <div ref={containerRef} className="absolute inset-0" />
+      <div
+        ref={containerRef}
+        className="absolute inset-0"
+        style={{
+          filter: showShadow
+            ? 'drop-shadow(0 8px 32px rgba(0,0,0,0.55)) drop-shadow(0 2px 8px rgba(0,0,0,0.25))'
+            : 'none',
+        }}
+      />
       <div
         ref={overlayRef}
         className="absolute inset-0 select-none"