feat: integrate audio waveform visualizer inside trim controls

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/ThemeProvider";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import ScrollToTop from "@/components/ScrollToTop";
 import BrandLogo from "@/components/BrandLogo";
+import SplashScreen from "@/components/SplashScreen";
 
 export const metadata: Metadata = {
   title: "Reframe — Resize, trim, and export videos in your browser",
@@ -75,6 +76,7 @@ export default function RootLayout({
           Skip to main content
         </a>
         <ThemeProvider>
+          <SplashScreen />
           <ErrorBoundary>
             <header
               role="banner"

src/components/ComparisonPreview.tsx

@@ -193,6 +193,11 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
           <video
             ref={rightVideoRef}
             className="w-full h-full object-contain"
+            style={{
+              filter: recipe
+                ? `brightness(${1 + recipe.brightness}) contrast(${recipe.contrast}) saturate(${recipe.saturation})`
+                : undefined,
+            }}
             playsInline
             muted
             autoPlay

src/components/SplashScreen.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import BrandLogo from "./BrandLogo";
+
+export default function SplashScreen() {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isFadingOut, setIsFadingOut] = useState(false);
+
+  useEffect(() => {
+    // Give the app a moment to load and display the splash screen
+    const fadeOutTimer = setTimeout(() => {
+      setIsFadingOut(true);
+    }, 1800);
+
+    // Completely unmount after fade transition
+    const removeTimer = setTimeout(() => {
+      setIsVisible(false);
+    }, 2300);
+
+    return () => {
+      clearTimeout(fadeOutTimer);
+      clearTimeout(removeTimer);
+    };
+  }, []);
+
+  // Avoid hydration mismatch by only rendering after mount
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[var(--bg)] transition-all duration-500 ease-in-out ${
+        isFadingOut ? "opacity-0 pointer-events-none scale-105" : "opacity-100 scale-100"
+      }`}
+    >
+      <div className="flex flex-col items-center gap-6 animate-[pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite]">
+        <BrandLogo 
+          size={96} 
+          className="text-film-600 drop-shadow-[0_0_20px_rgba(230,57,70,0.6)] dark:drop-shadow-[0_0_30px_rgba(230,57,70,0.8)] transition-all duration-300" 
+        />
+        <h1 className="text-6xl font-bold tracking-tighter text-[var(--text)] drop-shadow-sm">
+          Reframe
+        </h1>
+      </div>
+    </div>
+  );
+}

src/components/ThemeToggle.tsx

@@ -28,6 +28,16 @@ export function ThemeToggle() {
     );
   }
 
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        disabled
+        className="relative flex items-center justify-center w-9 h-9 rounded-full bg-[var(--surface)] text-[var(--text)] border border-[var(--border)] opacity-50"
+      />
+    );
+  }
+
   return (
     <button
        type="button"

src/components/TrimControl.tsx

@@ -178,61 +178,64 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
   return (
     <div id="trim-control" className="space-y-3">
       {duration > 0 && (
-        <div
-          role="toolbar"
-          aria-label="Trim timeline"
-          ref={trackRef}
-          className="relative h-6 flex items-center cursor-pointer select-none"
-          onClick={(e) => {
-            if (dragging.current) return;
-            const s = xToSeconds(e.clientX);
-            onChange({ trimStart: s });
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "ArrowLeft") onChange({ trimStart: Math.max(0, recipe.trimStart - 0.1) });
-            if (e.key === "ArrowRight") onChange({ trimStart: Math.min((recipe.trimEnd ?? duration) - 0.1, recipe.trimStart + 0.1) });
-          }}
-        >
-          <div className="absolute inset-x-0 h-1.5 rounded-full bg-[var(--border)]" />
+        <div className="space-y-2">
+          <WaveformCanvas samples={waveform} loading={waveformLoading} hasAudio={hasAudio} />
           <div
-            className="absolute h-1.5 rounded-full bg-film-400 opacity-60"
-            style={{
-              left: `${(recipe.trimStart / duration) * 100}%`,
-              right: `${((duration - (recipe.trimEnd ?? duration)) / duration) * 100}%`,
+            role="toolbar"
+            aria-label="Trim timeline"
+            ref={trackRef}
+            className="relative h-6 flex items-center cursor-pointer select-none"
+            onClick={(e) => {
+              if (dragging.current) return;
+              const s = xToSeconds(e.clientX);
+              onChange({ trimStart: s });
             }}
-          />
-          <div
-            role="slider"
-            aria-label="Trim start"
-            aria-valuenow={recipe.trimStart}
-            aria-valuemin={0}
-            aria-valuemax={duration}
-            tabIndex={0}
-            className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
-            style={{ left: `${(recipe.trimStart / duration) * 100}%` }}
-            onMouseDown={() => { dragging.current = "start"; }}
-            onTouchStart={() => { dragging.current = "start"; }}
             onKeyDown={(e) => {
               if (e.key === "ArrowLeft") onChange({ trimStart: Math.max(0, recipe.trimStart - 0.1) });
               if (e.key === "ArrowRight") onChange({ trimStart: Math.min((recipe.trimEnd ?? duration) - 0.1, recipe.trimStart + 0.1) });
             }}
-          />
-          <div
-            role="slider"
-            aria-label="Trim end"
-            aria-valuenow={recipe.trimEnd ?? duration}
-            aria-valuemin={0}
-            aria-valuemax={duration}
-            tabIndex={0}
-            className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
-            style={{ left: `${((recipe.trimEnd ?? duration) / duration) * 100}%` }}
-            onMouseDown={() => { dragging.current = "end"; }}
-            onTouchStart={() => { dragging.current = "end"; }}
-            onKeyDown={(e) => {
-              if (e.key === "ArrowLeft") onChange({ trimEnd: Math.max(recipe.trimStart + 0.1, (recipe.trimEnd ?? duration) - 0.1) });
-              if (e.key === "ArrowRight") onChange({ trimEnd: Math.min(duration, (recipe.trimEnd ?? duration) + 0.1) });
-            }}
-          />
+          >
+            <div className="absolute inset-x-0 h-1.5 rounded-full bg-[var(--border)]" />
+            <div
+              className="absolute h-1.5 rounded-full bg-film-400 opacity-60"
+              style={{
+                left: `${(recipe.trimStart / duration) * 100}%`,
+                right: `${((duration - (recipe.trimEnd ?? duration)) / duration) * 100}%`,
+              }}
+            />
+            <div
+              role="slider"
+              aria-label="Trim start"
+              aria-valuenow={recipe.trimStart}
+              aria-valuemin={0}
+              aria-valuemax={duration}
+              tabIndex={0}
+              className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
+              style={{ left: `${(recipe.trimStart / duration) * 100}%` }}
+              onMouseDown={() => { dragging.current = "start"; }}
+              onTouchStart={() => { dragging.current = "start"; }}
+              onKeyDown={(e) => {
+                if (e.key === "ArrowLeft") onChange({ trimStart: Math.max(0, recipe.trimStart - 0.1) });
+                if (e.key === "ArrowRight") onChange({ trimStart: Math.min((recipe.trimEnd ?? duration) - 0.1, recipe.trimStart + 0.1) });
+              }}
+            />
+            <div
+              role="slider"
+              aria-label="Trim end"
+              aria-valuenow={recipe.trimEnd ?? duration}
+              aria-valuemin={0}
+              aria-valuemax={duration}
+              tabIndex={0}
+              className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
+              style={{ left: `${((recipe.trimEnd ?? duration) / duration) * 100}%` }}
+              onMouseDown={() => { dragging.current = "end"; }}
+              onTouchStart={() => { dragging.current = "end"; }}
+              onKeyDown={(e) => {
+                if (e.key === "ArrowLeft") onChange({ trimEnd: Math.max(recipe.trimStart + 0.1, (recipe.trimEnd ?? duration) - 0.1) });
+                if (e.key === "ArrowRight") onChange({ trimEnd: Math.min(duration, (recipe.trimEnd ?? duration) + 0.1) });
+              }}
+            />
+          </div>
         </div>
       )}
       <div className="flex gap-3">

src/components/VideoEditor.tsx

@@ -506,6 +506,47 @@ export default function VideoEditor() {
                     delay={175}
                   >
                     <div className="space-y-5">
+                      {/* Creative Filter Presets */}
+                      <div className="space-y-2">
+                        <span className="text-xs font-semibold text-[var(--muted)]">Creative Presets</span>
+                        <div className="flex flex-wrap gap-1.5">
+                          {[
+                            { name: "Normal", b: 0, c: 1, s: 1 },
+                            { name: "Vibrant", b: 0.05, c: 1.1, s: 1.4 },
+                            { name: "Cinematic", b: -0.05, c: 1.2, s: 0.8 },
+                            { name: "Vintage", b: 0.05, c: 0.95, s: 0.85 },
+                            { name: "Noir", b: 0, c: 1.25, s: 0 },
+                            { name: "Faded", b: 0.1, c: 0.85, s: 0.9 },
+                          ].map((p) => {
+                            const isCurrent =
+                              recipe.brightness === p.b &&
+                              recipe.contrast === p.c &&
+                              recipe.saturation === p.s;
+                            return (
+                              <button
+                                key={p.name}
+                                type="button"
+                                onClick={() =>
+                                  updateRecipe({
+                                    brightness: p.b,
+                                    contrast: p.c,
+                                    saturation: p.s,
+                                  })
+                                }
+                                className={cn(
+                                  "px-2.5 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded-lg border transition-all duration-150 cursor-pointer",
+                                  isCurrent
+                                    ? "bg-film-600 text-white border-film-600 shadow-[0_0_8px_rgba(230,57,70,0.3)] scale-105"
+                                    : "bg-[var(--surface)] text-[var(--muted)] border-[var(--border)] hover:bg-[var(--border)]"
+                                )}
+                              >
+                                {p.name}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+
                       {/* Brightness */}
                       <div className="space-y-2">
                         <div className="flex items-center justify-between text-xs">

src/components/VideoPreview.tsx

@@ -234,6 +234,11 @@ export default function VideoPreview({
           ref={videoRef}
           controls
           className={cn("w-full h-full object-contain transition-opacity duration-300", isLoading ? "opacity-0" : "opacity-100")}
+          style={{
+            filter: recipe
+              ? `brightness(${1 + recipe.brightness}) contrast(${recipe.contrast}) saturate(${recipe.saturation})`
+              : undefined,
+          }}
           onLoadedData={() => setIsLoading(false)}
           playsInline
           muted={!recipe?.keepAudio}