magic-peach · magic-peach · May 19, 2026 · May 19, 2026 · May 19, 2026 · May 19, 2026
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
@@ -32,6 +32,8 @@ export default function ExportSettings({
       ? "Balanced"
       : "Small file";
 
+  const isGif = recipe.format === "gif";
+
   const estimatedSize =
     formatEstimatedSize(
       estimateExportSize(
@@ -108,8 +110,15 @@ export default function ExportSettings({
               {estimatedSize}
             </span>
           </p>
+
+          {isGif && (
+            <p className="text-xs text-amber-600 font-medium">
+              ⚠ GIF files can be very large. Keep clips under 10 s for best results.
+            </p>
+          )}
         </div>
 
+        {!isGif && (
         <div className="flex items-center justify-between mt-4">
           <label
             htmlFor="sound-on-completion"
@@ -129,6 +138,7 @@ export default function ExportSettings({
             className="accent-film-600 cursor-pointer"
           />
         </div>
+        )}
       </div>
 
       <div>

diff --git a/src/components/FormatSelector.tsx b/src/components/FormatSelector.tsx
@@ -13,6 +13,7 @@ const FORMAT_OPTIONS = [
   { id: "mp4", label: "MP4", description: "Best compatibility, smaller file size" },
   { id: "webm", label: "WebM", description: "Open format, optimized for web" },
   { id: "mkv", label: "MKV", description: "Container, maximum quality" },
+  { id: "gif", label: "GIF", description: "Animated image — keep clips under 10 s" },
 ] as const;
 
 export default function FormatSelector({ recipe, onChange }: Props) {
@@ -24,12 +25,12 @@ export default function FormatSelector({ recipe, onChange }: Props) {
           Output Format
         </div>
       </div>
-      <div className="grid grid-cols-3 gap-2">
+      <div className="grid grid-cols-4 gap-2">
         {FORMAT_OPTIONS.map((option) => (
           <button
             key={option.id}
             type="button"
-            onClick={() => onChange({ format: option.id as "mp4" | "webm" | "mkv" })}
+            onClick={() => onChange({ format: option.id as "mp4" | "webm" | "mkv" | "gif" })}
             aria-label={`Select ${option.label} format`}
             aria-pressed={recipe.format === option.id}
             className={cn(
@@ -49,4 +50,4 @@ export default function FormatSelector({ recipe, onChange }: Props) {
       </p>
     </div>
   );
-}
+}
diff --git a/src/components/PresetSelector.tsx b/src/components/PresetSelector.tsx
@@ -49,6 +49,59 @@ function RatioBox({
   );
 }
 
+const QUICK_ACTIONS = [
+  {
+    preset: "vertical-9-16",
+    label: "Reels",
+    platform: "Instagram",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
+      </svg>
+    ),
+  },
+  {
+    preset: "vertical-9-16",
+    label: "TikTok",
+    platform: "TikTok",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+        <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z"/>
+      </svg>
+    ),
+  },
+  {
+    preset: "vertical-9-16",
+    label: "Short",
+    platform: "YouTube",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+        <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+      </svg>
+    ),
+  },
+  {
+    preset: "landscape-16-9",
+    label: "YouTube",
+    platform: "YouTube",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+        <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+      </svg>
+    ),
+  },
+  {
+    preset: "twitter-hd",
+    label: "Twitter/X",
+    platform: "Twitter",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/>
+      </svg>
+    ),
+  },
+] as const;
+
 export default function PresetSelector({ recipe, onChange }: Props) {
   const [search, setSearch] = useState("");
 
@@ -82,7 +135,37 @@ export default function PresetSelector({ recipe, onChange }: Props) {
   );
 
   return (
-    <div id="preset-selector" className="space-y-3">
+    <div className="space-y-3">
+      {/* Quick-action row */}
+      <div className="grid grid-cols-5 gap-1.5">
+        {QUICK_ACTIONS.map(({ preset, label, platform, icon }) => {
+          const isActive = recipe.preset === preset;
+          return (
+            <button
+              key={`${preset}-${label}`}
+              type="button"
+              aria-label={`${platform} ${label}`}
+              aria-pressed={isActive}
+              onClick={() => onChange({ preset })}
+              className={cn(
+                "flex flex-col items-center justify-center gap-1 py-2 px-1 rounded-lg border text-center transition-all duration-150 cursor-pointer hover:scale-[1.04] active:scale-[0.97]",
+                isActive
+                  ? "border-film-500 bg-film-50 text-film-600"
+                  : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-film-300 hover:bg-film-50/30 hover:text-[var(--text)]",
+              )}
+            >
+              {icon}
+              <span className={cn(
+                "text-[9px] font-heading font-bold uppercase tracking-wide leading-none",
+                isActive ? "text-film-700" : "text-[var(--muted)]",
+              )}>
+                {label}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
       <div className="relative">
         <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
           <Search size={14} className="text-[var(--muted)]" />
@@ -246,4 +329,4 @@ export default function PresetSelector({ recipe, onChange }: Props) {
       )}
     </div>
   );
-}
+}
diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
@@ -147,10 +147,16 @@ export function useVideoEditor() {
   const [overlaySize, setOverlaySize] = useState(150);
   const [overlayOpacity, setOverlayOpacity] = useState(100);
 
-  const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
-    setRecipe((prev) => ({ ...prev, ...patch }));
-  }, []);
-
+ const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
+  setRecipe((prev) => {
+    const next = { ...prev, ...patch };
+    // GIF has no audio — force keepAudio off
+    if (next.format === "gif") {
+      next.keepAudio = false;
+    }
+    return next;
+  });
+}, []);
   useEffect(() => {
     try {
       const saved = localStorage.getItem("reframe-settings");

diff --git a/src/lib/ffmpeg.ts b/src/lib/ffmpeg.ts
@@ -162,7 +162,7 @@ function buildAudioTrimFilter(recipe: EditRecipe): string {
 
 function buildArguments(
   recipe: EditRecipe,
-  format: "mp4" | "webm" | "mkv",
+  format: "mp4" | "webm" | "mkv" | "gif",
   outputName: string,
   inputName: string,
   targetW: number,
@@ -312,14 +312,17 @@ export async function exportVideo(
         return { filename: `output_${sessionId}.webm`, mimeType: "video/webm" };
       case "mkv":
         return { filename: `output_${sessionId}.mkv`, mimeType: "video/x-matroska" };
+      case "gif":
+        return { filename: `output_${sessionId}.gif`, mimeType: "image/gif" };
       default:
         return { filename: `output_${sessionId}.mp4`, mimeType: "video/mp4" };
     }
   };
 
   const { filename: outputName, mimeType } = getOutputConfig(recipe.format);
   const fallbackOutputName = `fallback_${sessionId}.webm`;
-  const cleanupFiles = new Set<string>([inputName, outputName, fallbackOutputName]);
+  const paletteName = `palette_${sessionId}.png`;
+  const cleanupFiles = new Set<string>([inputName, outputName, fallbackOutputName, paletteName]);
 
   const handleProgress = ({ progress }: { progress: number }) => {
     onProgress(Math.min(99, Math.round(progress * 100)));
@@ -345,6 +348,45 @@ export async function exportVideo(
 
     ffmpeg.on("progress", handleProgress);
 
+    // ── Two-pass GIF export ──────────────────────────────────────────────────
+    if (recipe.format === "gif") {
+      const vf = buildVideoFilter(recipe, targetW, targetH);
+      const vfWithPalette = vf ? `${vf},palettegen` : "palettegen";
+      const vfWithPaletteUse = vf
+        ? `[0:v]${vf}[x];[x][1:v]paletteuse`
+        : "[0:v][1:v]paletteuse";
+
+      // Pass 1: generate colour palette
+      const pass1Code = await ffmpeg.exec(
+        ["-i", inputName, "-vf", vfWithPalette, "-y", paletteName],
+        undefined,
+        { signal }
+      );
+      if (pass1Code !== 0) throw new Error("GIF palette generation failed");
+
+      // Pass 2: render GIF using the palette
+      const pass2Code = await ffmpeg.exec(
+        ["-i", inputName, "-i", paletteName, "-lavfi", vfWithPaletteUse, "-y", outputName],
+        undefined,
+        { signal }
+      );
+      if (pass2Code !== 0) throw new Error("GIF export failed");
+
+      const data = await ffmpeg.readFile(outputName, undefined, { signal });
+      const blob = new Blob([new Uint8Array(data as Uint8Array)], { type: "image/gif" });
+
+      ffmpeg.off("progress", handleProgress);
+      onProgress(100);
+      return {
+        blobUrl: URL.createObjectURL(blob),
+        size: blob.size,
+        width: targetW,
+        height: targetH,
+        format: "gif" as const,
+      };
+    }
+    // ────────────────────────────────────────────────────────────────────────
+
     let missingAudioDetected = false;
     const logListener = ({ message }: { message: string }) => {
       const msg = message.toLowerCase();

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -9,7 +9,7 @@ export interface EditRecipe {
   keepAudio: boolean;
   speed: number;
   quality: number;
-  format: "mp4" | "webm" | "mkv";
+  format: "mp4" | "webm" | "mkv" | "gif";
   stabilization: boolean;
   brightness: number;
   contrast: number;
@@ -42,7 +42,7 @@ export interface ExportResult {
   size: number;
   width: number;
   height: number;
-  format: "mp4" | "webm" | "mkv";
+  format: "mp4" | "webm" | "mkv" | "gif";
 }
 
 export type ExportStatus =