Merge pull request #119 from IdrisGit/docs-move-issue-templates-from-markdown-to-yaml-forms

docs: move issue templates to YAML forms
Merge pull request #121 from IdrisGit/docs-readme-cleanup
2026-11-02 21:55:16 +08:00 · 2026-01-31 20:55:21 -08:00 · 2026-01-31 20:53:32 -08:00 · 2026-01-31 20:15:52 -08:00 · 2026-01-31 20:05:19 -08:00 · 2026-01-27 20:53:36 +05:30
40 changed files with 3673 additions and 1009 deletions
@@ -1,38 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
---
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
@@ -0,0 +1,149 @@
+name: Bug Report
+description: Create a report to help us improve
+title: "[Bug]: "
+labels: ["bug", "triage"]
+body:
+  - type: checkboxes
+    attributes:
+      label: Search existing issues
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+      placeholder: e.g., When I click submit, nothing happens...
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+      placeholder: e.g., The form should submit and show a success message
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: To Reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: false
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your problem.
+      placeholder: Drag and drop images here or paste them
+    validations:
+      required: false
+
+  - type: dropdown
+    id: os-type
+    attributes:
+      label: OS
+      description: Operating system
+      options:
+        - Windows
+        - macOS
+        - Linux
+        - iOS
+        - Android
+        - Other
+    validations:
+      required: false
+
+  - type: input
+    id: os-version
+    attributes:
+      label: OS Version
+      description: Please specify your OS version
+      placeholder: e.g., Windows 11, macOS Sonoma, Ubuntu 22.04
+    validations:
+      required: false
+
+  - type: input
+    id: os-other
+    attributes:
+      label: Other OS
+      description: If you selected "Other" for OS, please specify your operating system
+      placeholder: e.g., FreeBSD, Solaris
+    validations:
+      required: false
+
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: What browser are you using?
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Edge
+        - Other
+    validations:
+      required: false
+
+  - type: input
+    id: browser-version
+    attributes:
+      label: Browser Version
+      description: Please specify your browser version
+      placeholder: e.g., 120.0, 121.0.1
+    validations:
+      required: false
+
+  - type: input
+    id: browser-other
+    attributes:
+      label: Other Browser
+      description: If you selected "Other" for Browser, please specify your browser
+      placeholder: e.g., Brave, Vivaldi, Opera
+    validations:
+      required: false
+
+  - type: dropdown
+    id: device-type
+    attributes:
+      label: Device Type
+      description: Device category
+      options:
+        - Desktop
+        - Laptop
+        - Tablet
+        - Mobile
+        - Other
+    validations:
+      required: false
+
+  - type: input
+    id: device-other
+    attributes:
+      label: Other Device
+      description: If you selected "Other" for Device Type, please specify your device
+      placeholder: e.g., Smart TV, IoT device
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+      placeholder: Links, references, or any additional information
+    validations:
+      required: false
@@ -1,20 +0,0 @@
---
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
---
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
@@ -0,0 +1,48 @@
+name: Feature Request
+description: Suggest an idea for this project
+title: "[Feature]: "
+labels: ["enhancement", "feature-request"]
+body:
+  - type: checkboxes
+    attributes:
+      label: Search existing issues
+      description: Please search to see if an issue already exists for this feature request.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: Is your feature request related to a problem?
+      description: A clear and concise description of what the problem is.
+      placeholder: e.g., I'm always frustrated when I have to...
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution-description
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+      placeholder: Describe the feature or change you're proposing
+    validations:
+      required: false
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+      placeholder: Have you considered any workarounds or alternative approaches?
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+      placeholder: Links, mockups, or any additional information
+    validations:
+      required: false
@@ -23,5 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 release/**
-
+*.kiro/
 # npx electron-builder --mac --win
@@ -1,83 +1,84 @@
-<p align="center">
-	<img src="openscreen.png" alt="OpenScreen Logo" width="64" />
-</p>
-
-
-# <p align="center">OpenScreen</p>
-
-<p align="center"><strong>OpenScreen is your free, open-source alternative to Screen Studio (sort of).</strong></p>
-
-
-If you don't want to pay $29/month for Screen Studio but want a much simpler version that does what most people seem to need, making beautiful product demos and walkthroughs, here's a free-to-use app for you. OpenScreen does not offer all Screen Studio features, but covers the basics well!
-
-Screen Studio is an awesome product and this is definitely not a 1:1 clone. OpenScreen is a much simpler take, just the basics for folks who want control and don't want to pay. If you need all the fancy features, your best bet is to support Screen Studio (they really do a great job, haha). But if you just want something free (no gotchas) and open, this project does the job!
-
-OpenScreen is 100% free for personal and commercial use. Use it, modify it, distribute it. (Just be cool 😁 and give a shoutout if you feel like it !)
-
-
-
-**⚠️ DISCLAIMER: This is very much in beta and might be buggy here and there (but hope you have a good experience!).**
-
-</p>
-<p align="center">
-	<img src="preview.png" alt="OpenScreen App Preview" style="height: 320px; margin-right: 12px;" />
-	<img src="preview2.png" alt="OpenScreen App Preview 2" style="height: 320px; margin-right: 12px;" />
-	<img src="preview3.png" alt="OpenScreen App Preview 3" style="height: 320px; margin-right: 12px;" />
-	<img src="preview4.png" alt="OpenScreen App Preview 4" style="height: 320px; margin-right: 12px;" />
-	
-</p>
-</p>
-
-## Core Features
- Record your whole screen or specific apps
- Add manual zooms (customizable depth levels)
- Customize the duration and position of zooms however you please
- Crop video recordings to hide parts
- Choose between wallpapers, solid colors, gradients or your own picture for your background
- Motion blur for smoother pan and zoom effects
- Add annotations (text, arrows, images)
- Trim sections of the clip
- Export in different aspect ratios and resolutions
-
-## Installation
-
-Download the latest installer for your platform from the [GitHub Releases](https://github.com/siddharthvaddem/openscreen/releases) page.
-
-### macOS
-
-If you encounter issues with macOS Gatekeeper blocking the app (since it does not come with a developer certificate), you can bypass this by running the following command in your terminal after installation:
-
-```bash
-xattr -rd com.apple.quarantine /Applications/Openscreen.app
-```
-
-After running this command, proceed to **System Preferences > Security & Privacy** to grant the necessary permissions for "screen recording" and "accessibility". Once permissions are granted, you can launch the app.
-
-### Linux
-
-Download the `.AppImage` file from the releases page. Make it executable and run:
-
-```bash
-chmod +x Openscreen-Linux-*.AppImage
-./Openscreen-Linux-*.AppImage
-```
-
-You may need to grant screen recording permissions depending on your desktop environment.
-
-## Built with
- Electron
- React
- TypeScript
- Vite
- PixiJS
- dnd-timeline
-
---
-
-
-_I'm new to open source, idk what I'm doing lol. If something is wrong please raise an issue 🙏_
-
-## License
-
-
-This project is licensed under the [MIT License](./LICENSE). By using this software, you agree that the authors are not liable for any issues, damages, or claims arising from its use.
+> [!WARNING]
+> This is very much in beta and might be buggy here and there (but hope you have a good experience!).
+
+<p align="center">
+  <img src="public/openscreen.png" alt="OpenScreen Logo" width="64" />
+  <br />
+  <br />
+  <a href="https://deepwiki.com/siddharthvaddem/openscreen">
+    <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" />
+  </a>
+</p>
+
+# <p align="center">OpenScreen</p>
+
+<p align="center"><strong>OpenScreen is your free, open-source alternative to Screen Studio (sort of).</strong></p>
+
+If you don't want to pay $29/month for Screen Studio but want a much simpler version that does what most people seem to need, making beautiful product demos and walkthroughs, here's a free-to-use app for you. OpenScreen does not offer all Screen Studio features, but covers the basics well!
+
+Screen Studio is an awesome product and this is definitely not a 1:1 clone. OpenScreen is a much simpler take, just the basics for folks who want control and don't want to pay. If you need all the fancy features, your best bet is to support Screen Studio (they really do a great job, haha). But if you just want something free (no gotchas) and open, this project does the job!
+
+OpenScreen is 100% free for personal and commercial use. Use it, modify it, distribute it. (Just be cool 😁 and give a shoutout if you feel like it !)
+
+<p align="center">
+  <img src="public/preview.png" alt="OpenScreen App Preview" style="height: 320px; margin-right: 12px;" />
+	<img src="public/preview2.png" alt="OpenScreen App Preview 2" style="height: 320px; margin-right: 12px;" />
+	<img src="public/preview3.png" alt="OpenScreen App Preview 3" style="height: 320px; margin-right: 12px;" />
+	<img src="public/preview4.png" alt="OpenScreen App Preview 4" style="height: 320px; margin-right: 12px;" />
+</p>
+
+## Core Features
+- Record your whole screen or specific apps
+- Add manual zooms (customizable depth levels)
+- Customize the duration and position of zooms however you please
+- Crop video recordings to hide parts
+- Choose between wallpapers, solid colors, gradients or your own picture for your background
+- Motion blur for smoother pan and zoom effects
+- Add annotations (text, arrows, images)
+- Trim sections of the clip
+- Export in different aspect ratios and resolutions
+
+## Installation
+
+Download the latest installer for your platform from the [GitHub Releases](https://github.com/siddharthvaddem/openscreen/releases) page.
+
+### macOS
+
+If you encounter issues with macOS Gatekeeper blocking the app (since it does not come with a developer certificate), you can bypass this by running the following command in your terminal after installation:
+
+```bash
+xattr -rd com.apple.quarantine /Applications/Openscreen.app
+```
+
+After running this command, proceed to **System Preferences > Security & Privacy** to grant the necessary permissions for "screen recording" and "accessibility". Once permissions are granted, you can launch the app.
+
+### Linux
+
+Download the `.AppImage` file from the releases page. Make it executable and run:
+
+```bash
+chmod +x Openscreen-Linux-*.AppImage
+./Openscreen-Linux-*.AppImage
+```
+
+You may need to grant screen recording permissions depending on your desktop environment.
+
+## Built with
+- Electron
+- React
+- TypeScript
+- Vite
+- PixiJS
+- dnd-timeline
+
+---
+
+_I'm new to open source, idk what I'm doing lol. If something is wrong please raise an issue 🙏_
+
+## Contributing
+
+Contributions are welcome! If you’d like to help out or see what’s currently being worked on, take a look at the open issues and the [project roadmap](https://github.com/users/siddharthvaddem/projects/3) to understand the current direction of the project and find ways to contribute.
+
+## License
+
+This project is licensed under the [MIT License](./LICENSE). By using this software, you agree that the authors are not liable for any issues, damages, or claims arising from its use.
@@ -60,13 +60,16 @@ function createHudOverlayWindow() {
  return win;
 }
 function createEditorWindow() {
+  const isMac = process.platform === "darwin";
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
-    titleBarStyle: "hiddenInset",
-    trafficLightPosition: { x: 12, y: 12 },
+    ...isMac && {
+      titleBarStyle: "hiddenInset",
+      trafficLightPosition: { x: 12, y: 12 }
+    },
    transparent: false,
    resizable: true,
    alwaysOnTop: false,
@@ -223,12 +226,12 @@ function registerIpcHandlers(createEditorWindow2, createSourceSelectorWindow2, g
  });
  ipcMain.handle("save-exported-video", async (_, videoData, fileName) => {
    try {
+      const isGif = fileName.toLowerCase().endsWith(".gif");
+      const filters = isGif ? [{ name: "GIF Image", extensions: ["gif"] }] : [{ name: "MP4 Video", extensions: ["mp4"] }];
      const result = await dialog.showSaveDialog({
-        title: "Save Exported Video",
+        title: isGif ? "Save Exported GIF" : "Save Exported Video",
        defaultPath: path.join(app.getPath("downloads"), fileName),
-        filters: [
-          { name: "MP4 Video", extensions: ["mp4"] }
-        ],
+        filters,
        properties: ["createDirectory", "showOverwriteConfirmation"]
      });
      if (result.canceled || !result.filePath) {
@@ -316,19 +319,26 @@ let mainWindow = null;
 let sourceSelectorWindow = null;
 let tray = null;
 let selectedSourceName = "";
+const defaultTrayIcon = getTrayIcon("openscreen.png");
+const recordingTrayIcon = getTrayIcon("rec-button.png");
 function createWindow() {
  mainWindow = createHudOverlayWindow();
 }
 function createTray() {
-  const iconPath = path.join(process.env.VITE_PUBLIC || RENDERER_DIST, "rec-button.png");
-  let icon = nativeImage.createFromPath(iconPath);
-  icon = icon.resize({ width: 24, height: 24, quality: "best" });
-  tray = new Tray(icon);
-  updateTrayMenu();
+  tray = new Tray(defaultTrayIcon);
 }
-function updateTrayMenu() {
+function getTrayIcon(filename) {
+  return nativeImage.createFromPath(path.join(process.env.VITE_PUBLIC || RENDERER_DIST, filename)).resize({
+    width: 24,
+    height: 24,
+    quality: "best"
+  });
+}
+function updateTrayMenu(recording = false) {
  if (!tray) return;
-  const menuTemplate = [
+  const trayIcon = recording ? recordingTrayIcon : defaultTrayIcon;
+  const trayToolTip = recording ? `Recording: ${selectedSourceName}` : "OpenScreen";
+  const menuTemplate = recording ? [
    {
      label: "Stop Recording",
      click: () => {
@@ -337,10 +347,27 @@ function updateTrayMenu() {
        }
      }
    }
+  ] : [
+    {
+      label: "Open",
+      click: () => {
+        if (mainWindow && !mainWindow.isDestroyed()) {
+          mainWindow.isMinimized() && mainWindow.restore();
+        } else {
+          createWindow();
+        }
+      }
+    },
+    {
+      label: "Quit",
+      click: () => {
+        app.quit();
+      }
+    }
  ];
-  const contextMenu = Menu.buildFromTemplate(menuTemplate);
-  tray.setContextMenu(contextMenu);
-  tray.setToolTip(`Recording: ${selectedSourceName}`);
+  tray.setImage(trayIcon);
+  tray.setToolTip(trayToolTip);
+  tray.setContextMenu(Menu.buildFromTemplate(menuTemplate));
 }
 function createEditorWindowWrapper() {
  if (mainWindow) {
@@ -366,10 +393,10 @@ app.on("activate", () => {
 app.whenReady().then(async () => {
  const { ipcMain: ipcMain2 } = await import("electron");
  ipcMain2.on("hud-overlay-close", () => {
-    if (process.platform === "darwin") {
-      app.quit();
-    }
+    app.quit();
  });
+  createTray();
+  updateTrayMenu();
  await ensureRecordingsDir();
  registerIpcHandlers(
    createEditorWindowWrapper,
@@ -378,14 +405,9 @@ app.whenReady().then(async () => {
    () => sourceSelectorWindow,
    (recording, sourceName) => {
      selectedSourceName = sourceName;
-      if (recording) {
-        if (!tray) createTray();
-        updateTrayMenu();
-      } else {
-        if (tray) {
-          tray.destroy();
-          tray = null;
-        }
+      if (!tray) createTray();
+      updateTrayMenu(recording);
+      if (!recording) {
        if (mainWindow) mainWindow.restore();
      }
    }
@@ -6,7 +6,7 @@
  "productName": "Openscreen",
  "npmRebuild": true,
  "buildDependenciesFromSource": true,
-  "compression": "maximum",
+  "compression": "normal",
  "directories": {
    "output": "release/${version}"
  },
@@ -130,12 +130,16 @@ export function registerIpcHandlers(

  ipcMain.handle('save-exported-video', async (_, videoData: ArrayBuffer, fileName: string) => {
    try {
+      // Determine file type from extension
+      const isGif = fileName.toLowerCase().endsWith('.gif');
+      const filters = isGif 
+        ? [{ name: 'GIF Image', extensions: ['gif'] }]
+        : [{ name: 'MP4 Video', extensions: ['mp4'] }];
+
      const result = await dialog.showSaveDialog({
-        title: 'Save Exported Video',
+        title: isGif ? 'Save Exported GIF' : 'Save Exported Video',
        defaultPath: path.join(app.getPath('downloads'), fileName),
-        filters: [
-          { name: 'MP4 Video', extensions: ['mp4'] }
-        ],
+        filters,
        properties: ['createDirectory', 'showOverwriteConfirmation']
      });

@@ -146,8 +150,9 @@ export function registerIpcHandlers(
          message: 'Export cancelled'
        };
      }
+
      await fs.writeFile(result.filePath, Buffer.from(videoData));
-      
+
      return {
        success: true,
        path: result.filePath,
@@ -45,33 +45,63 @@ let sourceSelectorWindow: BrowserWindow | null = null
 let tray: Tray | null = null
 let selectedSourceName = ''

+// Tray Icons
+const defaultTrayIcon = getTrayIcon('openscreen.png');
+const recordingTrayIcon = getTrayIcon('rec-button.png');
+
 function createWindow() {
  mainWindow = createHudOverlayWindow()
 }

 function createTray() {
-  const iconPath = path.join(process.env.VITE_PUBLIC || RENDERER_DIST, 'rec-button.png');
-  let icon = nativeImage.createFromPath(iconPath);
-  icon = icon.resize({ width: 24, height: 24, quality: 'best' });
-  tray = new Tray(icon);
-  updateTrayMenu();
+  tray = new Tray(defaultTrayIcon);
 }

-function updateTrayMenu() {
+function getTrayIcon(filename: string) {
+  return nativeImage.createFromPath(path.join(process.env.VITE_PUBLIC || RENDERER_DIST, filename)).resize({
+    width: 24,
+    height: 24,
+    quality: 'best'
+  });
+}
+
+
+function updateTrayMenu(recording: boolean = false) {
  if (!tray) return;
-  const menuTemplate = [
-    {
-      label: 'Stop Recording',
-      click: () => {
-        if (mainWindow && !mainWindow.isDestroyed()) {
-          mainWindow.webContents.send('stop-recording-from-tray');
-        }
-      }
-    }
-  ];
-  const contextMenu = Menu.buildFromTemplate(menuTemplate);
-  tray.setContextMenu(contextMenu);
-  tray.setToolTip(`Recording: ${selectedSourceName}`);
+  const trayIcon = recording ? recordingTrayIcon : defaultTrayIcon;
+  const trayToolTip = recording ? `Recording: ${selectedSourceName}` : "OpenScreen";
+  const menuTemplate = recording
+    ? [
+        {
+          label: "Stop Recording",
+          click: () => {
+            if (mainWindow && !mainWindow.isDestroyed()) {
+              mainWindow.webContents.send("stop-recording-from-tray");
+            }
+          },
+        },
+      ]
+    : [
+        {
+          label: "Open",
+          click: () => {
+            if (mainWindow && !mainWindow.isDestroyed()) {
+              mainWindow.isMinimized() && mainWindow.restore();
+            } else {
+              createWindow();
+            }
+          },
+        },
+        {
+          label: "Quit",
+          click: () => {
+            app.quit();
+          },
+        },
+      ];
+  tray.setImage(trayIcon);
+  tray.setToolTip(trayToolTip);
+  tray.setContextMenu(Menu.buildFromTemplate(menuTemplate));
 }

 function createEditorWindowWrapper() {
@@ -113,6 +143,8 @@ app.whenReady().then(async () => {
    ipcMain.on('hud-overlay-close', () => {
      app.quit();
    });
+    createTray()
+    updateTrayMenu()
  // Ensure recordings directory exists
  await ensureRecordingsDir()

@@ -123,14 +155,9 @@ app.whenReady().then(async () => {
    () => sourceSelectorWindow,
    (recording: boolean, sourceName: string) => {
      selectedSourceName = sourceName
-      if (recording) {
-        if (!tray) createTray();
-        updateTrayMenu();
-      } else {
-        if (tray) {
-          tray.destroy();
-          tray = null;
-        }
+      if (!tray) createTray();
+      updateTrayMenu(recording);
+      if (!recording) {
        if (mainWindow) mainWindow.restore();
      }
    }
@@ -1,7 +1,7 @@
 {
  "name": "openscreen",
  "private": true,
-  "version": "1.0.2",
+  "version": "1.1.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -10,11 +10,14 @@
    "preview": "vite preview",
    "build:mac": "tsc && vite build && electron-builder --mac",
    "build:win": "tsc && vite build && electron-builder --win",
-    "build:linux": "tsc && vite build && electron-builder --linux"
+    "build:linux": "tsc && vite build && electron-builder --linux",
+    "test": "vitest --run",
+    "test:watch": "vitest"
  },
  "dependencies": {
    "@fix-webm-duration/fix": "^1.0.1",
    "@pixi/filter-drop-shadow": "^5.2.0",
+    "@radix-ui/react-accordion": "^1.2.12",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-popover": "^1.1.15",
@@ -25,6 +28,7 @@
    "@radix-ui/react-tabs": "^1.1.13",
    "@radix-ui/react-toggle": "^1.1.10",
    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@types/gif.js": "^0.2.5",
    "@uiw/color-convert": "^2.9.2",
    "@uiw/react-color-block": "^2.9.2",
    "class-variance-authority": "^0.7.1",
@@ -32,6 +36,7 @@
    "dnd-timeline": "^2.2.0",
    "emoji-picker-react": "^4.16.1",
    "fix-webm-duration": "^1.0.6",
+    "gif.js": "^0.2.0",
    "gsap": "^3.13.0",
    "lucide-react": "^0.545.0",
    "mediabunny": "^1.25.1",
@@ -49,6 +54,7 @@
    "uuid": "^13.0.0"
  },
  "devDependencies": {
+    "@types/node": "^25.0.3",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@types/uuid": "^10.0.0",
@@ -56,20 +62,22 @@
    "@typescript-eslint/parser": "^7.1.1",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.21",
-    "electron": "^30.0.1",
+    "electron": "^39.2.7",
    "electron-builder": "^24.13.3",
    "electron-icon-builder": "^2.0.1",
    "electron-rebuild": "^3.2.9",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
+    "fast-check": "^4.5.2",
    "postcss": "^8.5.6",
    "tailwindcss": "^3.4.18",
    "terser": "^5.44.1",
    "typescript": "^5.2.2",
    "vite": "^5.1.6",
    "vite-plugin-electron": "^0.28.6",
-    "vite-plugin-electron-renderer": "^0.14.5"
+    "vite-plugin-electron-renderer": "^0.14.5",
+    "vitest": "^4.0.16"
  },
  "main": "dist-electron/main.js"
 }
@@ -1,34 +0,0 @@
-<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M63.9202 127.84C99.2223 127.84 127.84 99.2223 127.84 63.9202C127.84 28.6181 99.2223 0 63.9202 0C28.6181 0 0 28.6181 0 63.9202C0 99.2223 28.6181 127.84 63.9202 127.84Z" fill="url(#paint0_linear_103_2)"/>
-<g id="not-lightning" clip-path="url(#clip0_103_2)">
-<animateTransform
-  attributeName="transform"
-  attributeType="XML"
-  type="rotate"
-  from="0 64 64"
-  to="360 64 64"
-  dur="20s"
-  repeatCount="indefinite"/>
-<path d="M51.3954 39.5028C52.3733 39.6812 53.3108 39.033 53.4892 38.055C53.6676 37.0771 53.0194 36.1396 52.0414 35.9612L51.3954 39.5028ZM28.9393 60.9358C29.4332 61.7985 30.5329 62.0976 31.3957 61.6037C32.2585 61.1098 32.5575 60.0101 32.0636 59.1473L28.9393 60.9358ZM37.6935 66.7457C37.025 66.01 35.8866 65.9554 35.1508 66.6239C34.415 67.2924 34.3605 68.4308 35.029 69.1666L37.6935 66.7457ZM96.9206 89.515C97.7416 88.9544 97.9526 87.8344 97.3919 87.0135C96.8313 86.1925 95.7113 85.9815 94.8904 86.5422L96.9206 89.515ZM52.0414 35.9612C46.4712 34.9451 41.2848 34.8966 36.9738 35.9376C32.6548 36.9806 29.0841 39.1576 27.0559 42.6762L30.1748 44.4741C31.5693 42.0549 34.1448 40.3243 37.8188 39.4371C41.5009 38.5479 46.1547 38.5468 51.3954 39.5028L52.0414 35.9612ZM27.0559 42.6762C24.043 47.9029 25.2781 54.5399 28.9393 60.9358L32.0636 59.1473C28.6579 53.1977 28.1088 48.0581 30.1748 44.4741L27.0559 42.6762ZM35.029 69.1666C39.6385 74.24 45.7158 79.1355 52.8478 83.2597L54.6499 80.1432C47.8081 76.1868 42.0298 71.5185 37.6935 66.7457L35.029 69.1666ZM52.8478 83.2597C61.344 88.1726 70.0465 91.2445 77.7351 92.3608C85.359 93.4677 92.2744 92.6881 96.9206 89.515L94.8904 86.5422C91.3255 88.9767 85.4902 89.849 78.2524 88.7982C71.0793 87.7567 62.809 84.8612 54.6499 80.1432L52.8478 83.2597ZM105.359 84.9077C105.359 81.4337 102.546 78.6127 99.071 78.6127V82.2127C100.553 82.2127 101.759 83.4166 101.759 84.9077H105.359ZM99.071 78.6127C95.5956 78.6127 92.7831 81.4337 92.7831 84.9077H96.3831C96.3831 83.4166 97.5892 82.2127 99.071 82.2127V78.6127ZM92.7831 84.9077C92.7831 88.3817 95.5956 91.2027 99.071 91.2027V87.6027C97.5892 87.6027 96.3831 86.3988 96.3831 84.9077H92.7831ZM99.071 91.2027C102.546 91.2027 105.359 88.3817 105.359 84.9077H101.759C101.759 86.3988 100.553 87.6027 99.071 87.6027V91.2027Z" fill="#A2ECFB"/>
-<path d="M91.4873 65.382C90.8456 66.1412 90.9409 67.2769 91.7002 67.9186C92.4594 68.5603 93.5951 68.465 94.2368 67.7058L91.4873 65.382ZM84.507 35.2412C83.513 35.2282 82.6967 36.0236 82.6838 37.0176C82.6708 38.0116 83.4661 38.8279 84.4602 38.8409L84.507 35.2412ZM74.9407 39.8801C75.9127 39.6716 76.5315 38.7145 76.323 37.7425C76.1144 36.7706 75.1573 36.1517 74.1854 36.3603L74.9407 39.8801ZM25.5491 80.9047C25.6932 81.8883 26.6074 82.5688 27.5911 82.4247C28.5747 82.2806 29.2552 81.3664 29.1111 80.3828L25.5491 80.9047ZM94.2368 67.7058C97.8838 63.3907 100.505 58.927 101.752 54.678C103.001 50.4213 102.9 46.2472 100.876 42.7365L97.7574 44.5344C99.1494 46.9491 99.3603 50.0419 98.2974 53.6644C97.2323 57.2945 94.9184 61.3223 91.4873 65.382L94.2368 67.7058ZM100.876 42.7365C97.9119 37.5938 91.7082 35.335 84.507 35.2412L84.4602 38.8409C91.1328 38.9278 95.7262 41.0106 97.7574 44.5344L100.876 42.7365ZM74.1854 36.3603C67.4362 37.8086 60.0878 40.648 52.8826 44.8146L54.6847 47.931C61.5972 43.9338 68.5948 41.2419 74.9407 39.8801L74.1854 36.3603ZM52.8826 44.8146C44.1366 49.872 36.9669 56.0954 32.1491 62.3927C27.3774 68.63 24.7148 75.2115 25.5491 80.9047L29.1111 80.3828C28.4839 76.1026 30.4747 70.5062 35.0084 64.5802C39.496 58.7143 46.2839 52.7889 54.6847 47.931L52.8826 44.8146Z" fill="#A2ECFB"/>
-<path d="M49.0825 87.2295C48.7478 86.2934 47.7176 85.8059 46.7816 86.1406C45.8455 86.4753 45.358 87.5055 45.6927 88.4416L49.0825 87.2295ZM78.5635 96.4256C79.075 95.5732 78.7988 94.4675 77.9464 93.9559C77.0941 93.4443 75.9884 93.7205 75.4768 94.5729L78.5635 96.4256ZM79.5703 85.1795C79.2738 86.1284 79.8027 87.1379 80.7516 87.4344C81.7004 87.7308 82.71 87.2019 83.0064 86.2531L79.5703 85.1795ZM69.156 22.5301C68.2477 22.1261 67.1838 22.535 66.7799 23.4433C66.3759 24.3517 66.7848 25.4155 67.6931 25.8194L69.156 22.5301ZM45.6927 88.4416C47.5994 93.7741 50.1496 98.2905 53.2032 101.505C56.2623 104.724 59.9279 106.731 63.9835 106.731V103.131C61.1984 103.131 58.4165 101.765 55.8131 99.0249C53.2042 96.279 50.8768 92.2477 49.0825 87.2295L45.6927 88.4416ZM63.9835 106.731C69.8694 106.731 74.8921 102.542 78.5635 96.4256L75.4768 94.5729C72.0781 100.235 68.0122 103.131 63.9835 103.131V106.731ZM83.0064 86.2531C85.0269 79.7864 86.1832 72.1831 86.1832 64.0673H82.5832C82.5832 71.8536 81.4723 79.0919 79.5703 85.1795L83.0064 86.2531ZM86.1832 64.0673C86.1832 54.1144 84.4439 44.922 81.4961 37.6502C78.5748 30.4436 74.3436 24.8371 69.156 22.5301L67.6931 25.8194C71.6364 27.5731 75.3846 32.1564 78.1598 39.0026C80.9086 45.7836 82.5832 54.507 82.5832 64.0673H86.1832Z" fill="#A2ECFB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103.559 84.9077C103.559 82.4252 101.55 80.4127 99.071 80.4127C96.5924 80.4127 94.5831 82.4252 94.5831 84.9077C94.5831 87.3902 96.5924 89.4027 99.071 89.4027C101.55 89.4027 103.559 87.3902 103.559 84.9077Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.8143 89.4027C31.2929 89.4027 33.3023 87.3902 33.3023 84.9077C33.3023 82.4252 31.2929 80.4127 28.8143 80.4127C26.3357 80.4127 24.3264 82.4252 24.3264 84.9077C24.3264 87.3902 26.3357 89.4027 28.8143 89.4027Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path d="M63.9835 27.6986C66.4621 27.6986 68.4714 25.6861 68.4714 23.2036C68.4714 20.7211 66.4621 18.7086 63.9835 18.7086C61.5049 18.7086 59.4956 20.7211 59.4956 23.2036C59.4956 25.6861 61.5049 27.6986 63.9835 27.6986Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-</g>
-<path d="M70.7175 48.0096L56.3133 50.676C56.0766 50.7199 55.9013 50.9094 55.887 51.1369L55.001 65.2742C54.9801 65.6072 55.3038 65.8656 55.6478 65.7907L59.6582 64.9163C60.0334 64.8346 60.3724 65.1468 60.2953 65.5033L59.1038 71.0151C59.0237 71.386 59.3923 71.7032 59.7758 71.5932L62.2528 70.8822C62.6368 70.7721 63.0057 71.0902 62.9245 71.4615L61.031 80.1193C60.9126 80.6608 61.6751 80.9561 61.9931 80.4918L62.2055 80.1817L73.9428 58.053C74.1393 57.6825 73.8004 57.26 73.3696 57.3385L69.2417 58.0912C68.8538 58.1618 68.5237 57.8206 68.6332 57.462L71.3274 48.6385C71.437 48.2794 71.1058 47.9378 70.7175 48.0096Z" fill="url(#paint1_linear_103_2)"/>
-<defs>
-<linearGradient id="paint0_linear_103_2" x1="1.43824" y1="7.91009" x2="56.3296" y2="82.4569" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear_103_2" x1="60.3173" y1="48.7336" x2="64.237" y2="77.1962" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-<clipPath id="clip0_103_2">
-<rect width="128" height="128" fill="white"/>
-</clipPath>
-</defs>
-</svg>
@@ -1,26 +0,0 @@
-<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_103_2)">
-<path d="M63.9202 127.84C99.2223 127.84 127.84 99.2223 127.84 63.9202C127.84 28.6181 99.2223 0 63.9202 0C28.6181 0 0 28.6181 0 63.9202C0 99.2223 28.6181 127.84 63.9202 127.84Z" fill="url(#paint0_linear_103_2)"/>
-<path d="M51.3954 39.5028C52.3733 39.6812 53.3108 39.033 53.4892 38.055C53.6676 37.0771 53.0194 36.1396 52.0414 35.9612L51.3954 39.5028ZM28.9393 60.9358C29.4332 61.7985 30.5329 62.0976 31.3957 61.6037C32.2585 61.1098 32.5575 60.0101 32.0636 59.1473L28.9393 60.9358ZM37.6935 66.7457C37.025 66.01 35.8866 65.9554 35.1508 66.6239C34.415 67.2924 34.3605 68.4308 35.029 69.1666L37.6935 66.7457ZM96.9206 89.515C97.7416 88.9544 97.9526 87.8344 97.3919 87.0135C96.8313 86.1925 95.7113 85.9815 94.8904 86.5422L96.9206 89.515ZM52.0414 35.9612C46.4712 34.9451 41.2848 34.8966 36.9738 35.9376C32.6548 36.9806 29.0841 39.1576 27.0559 42.6762L30.1748 44.4741C31.5693 42.0549 34.1448 40.3243 37.8188 39.4371C41.5009 38.5479 46.1547 38.5468 51.3954 39.5028L52.0414 35.9612ZM27.0559 42.6762C24.043 47.9029 25.2781 54.5399 28.9393 60.9358L32.0636 59.1473C28.6579 53.1977 28.1088 48.0581 30.1748 44.4741L27.0559 42.6762ZM35.029 69.1666C39.6385 74.24 45.7158 79.1355 52.8478 83.2597L54.6499 80.1432C47.8081 76.1868 42.0298 71.5185 37.6935 66.7457L35.029 69.1666ZM52.8478 83.2597C61.344 88.1726 70.0465 91.2445 77.7351 92.3608C85.359 93.4677 92.2744 92.6881 96.9206 89.515L94.8904 86.5422C91.3255 88.9767 85.4902 89.849 78.2524 88.7982C71.0793 87.7567 62.809 84.8612 54.6499 80.1432L52.8478 83.2597ZM105.359 84.9077C105.359 81.4337 102.546 78.6127 99.071 78.6127V82.2127C100.553 82.2127 101.759 83.4166 101.759 84.9077H105.359ZM99.071 78.6127C95.5956 78.6127 92.7831 81.4337 92.7831 84.9077H96.3831C96.3831 83.4166 97.5892 82.2127 99.071 82.2127V78.6127ZM92.7831 84.9077C92.7831 88.3817 95.5956 91.2027 99.071 91.2027V87.6027C97.5892 87.6027 96.3831 86.3988 96.3831 84.9077H92.7831ZM99.071 91.2027C102.546 91.2027 105.359 88.3817 105.359 84.9077H101.759C101.759 86.3988 100.553 87.6027 99.071 87.6027V91.2027Z" fill="#A2ECFB"/>
-<path d="M91.4873 65.382C90.8456 66.1412 90.9409 67.2769 91.7002 67.9186C92.4594 68.5603 93.5951 68.465 94.2368 67.7058L91.4873 65.382ZM84.507 35.2412C83.513 35.2282 82.6967 36.0236 82.6838 37.0176C82.6708 38.0116 83.4661 38.8279 84.4602 38.8409L84.507 35.2412ZM74.9407 39.8801C75.9127 39.6716 76.5315 38.7145 76.323 37.7425C76.1144 36.7706 75.1573 36.1517 74.1854 36.3603L74.9407 39.8801ZM25.5491 80.9047C25.6932 81.8883 26.6074 82.5688 27.5911 82.4247C28.5747 82.2806 29.2552 81.3664 29.1111 80.3828L25.5491 80.9047ZM94.2368 67.7058C97.8838 63.3907 100.505 58.927 101.752 54.678C103.001 50.4213 102.9 46.2472 100.876 42.7365L97.7574 44.5344C99.1494 46.9491 99.3603 50.0419 98.2974 53.6644C97.2323 57.2945 94.9184 61.3223 91.4873 65.382L94.2368 67.7058ZM100.876 42.7365C97.9119 37.5938 91.7082 35.335 84.507 35.2412L84.4602 38.8409C91.1328 38.9278 95.7262 41.0106 97.7574 44.5344L100.876 42.7365ZM74.1854 36.3603C67.4362 37.8086 60.0878 40.648 52.8826 44.8146L54.6847 47.931C61.5972 43.9338 68.5948 41.2419 74.9407 39.8801L74.1854 36.3603ZM52.8826 44.8146C44.1366 49.872 36.9669 56.0954 32.1491 62.3927C27.3774 68.63 24.7148 75.2115 25.5491 80.9047L29.1111 80.3828C28.4839 76.1026 30.4747 70.5062 35.0084 64.5802C39.496 58.7143 46.2839 52.7889 54.6847 47.931L52.8826 44.8146Z" fill="#A2ECFB"/>
-<path d="M49.0825 87.2295C48.7478 86.2934 47.7176 85.8059 46.7816 86.1406C45.8455 86.4753 45.358 87.5055 45.6927 88.4416L49.0825 87.2295ZM78.5635 96.4256C79.075 95.5732 78.7988 94.4675 77.9464 93.9559C77.0941 93.4443 75.9884 93.7205 75.4768 94.5729L78.5635 96.4256ZM79.5703 85.1795C79.2738 86.1284 79.8027 87.1379 80.7516 87.4344C81.7004 87.7308 82.71 87.2019 83.0064 86.2531L79.5703 85.1795ZM69.156 22.5301C68.2477 22.1261 67.1838 22.535 66.7799 23.4433C66.3759 24.3517 66.7848 25.4155 67.6931 25.8194L69.156 22.5301ZM45.6927 88.4416C47.5994 93.7741 50.1496 98.2905 53.2032 101.505C56.2623 104.724 59.9279 106.731 63.9835 106.731V103.131C61.1984 103.131 58.4165 101.765 55.8131 99.0249C53.2042 96.279 50.8768 92.2477 49.0825 87.2295L45.6927 88.4416ZM63.9835 106.731C69.8694 106.731 74.8921 102.542 78.5635 96.4256L75.4768 94.5729C72.0781 100.235 68.0122 103.131 63.9835 103.131V106.731ZM83.0064 86.2531C85.0269 79.7864 86.1832 72.1831 86.1832 64.0673H82.5832C82.5832 71.8536 81.4723 79.0919 79.5703 85.1795L83.0064 86.2531ZM86.1832 64.0673C86.1832 54.1144 84.4439 44.922 81.4961 37.6502C78.5748 30.4436 74.3436 24.8371 69.156 22.5301L67.6931 25.8194C71.6364 27.5731 75.3846 32.1564 78.1598 39.0026C80.9086 45.7836 82.5832 54.507 82.5832 64.0673H86.1832Z" fill="#A2ECFB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103.559 84.9077C103.559 82.4252 101.55 80.4127 99.071 80.4127C96.5924 80.4127 94.5831 82.4252 94.5831 84.9077C94.5831 87.3902 96.5924 89.4027 99.071 89.4027C101.55 89.4027 103.559 87.3902 103.559 84.9077Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.8143 89.4027C31.2929 89.4027 33.3023 87.3902 33.3023 84.9077C33.3023 82.4252 31.2929 80.4127 28.8143 80.4127C26.3357 80.4127 24.3264 82.4252 24.3264 84.9077C24.3264 87.3902 26.3357 89.4027 28.8143 89.4027Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path d="M63.9835 27.6986C66.4621 27.6986 68.4714 25.6861 68.4714 23.2036C68.4714 20.7211 66.4621 18.7086 63.9835 18.7086C61.5049 18.7086 59.4956 20.7211 59.4956 23.2036C59.4956 25.6861 61.5049 27.6986 63.9835 27.6986Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path d="M70.7175 48.0096L56.3133 50.676C56.0766 50.7199 55.9013 50.9094 55.887 51.1369L55.001 65.2742C54.9801 65.6072 55.3038 65.8656 55.6478 65.7907L59.6582 64.9163C60.0334 64.8346 60.3724 65.1468 60.2953 65.5033L59.1038 71.0151C59.0237 71.386 59.3923 71.7032 59.7758 71.5932L62.2528 70.8822C62.6368 70.7721 63.0057 71.0902 62.9245 71.4615L61.031 80.1193C60.9126 80.6608 61.6751 80.9561 61.9931 80.4918L62.2055 80.1817L73.9428 58.053C74.1393 57.6825 73.8004 57.26 73.3696 57.3385L69.2417 58.0912C68.8538 58.1618 68.5237 57.8206 68.6332 57.462L71.3274 48.6385C71.437 48.2794 71.1058 47.9378 70.7175 48.0096Z" fill="url(#paint1_linear_103_2)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_103_2" x1="1.43824" y1="7.91009" x2="56.3296" y2="82.4569" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear_103_2" x1="60.3173" y1="48.7336" x2="64.237" y2="77.1962" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-<clipPath id="clip0_103_2">
-<rect width="128" height="128" fill="white"/>
-</clipPath>
-</defs>
-</svg>
@@ -75,7 +75,7 @@ export function SourceSelector() {
            <TabsTrigger value="screens" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Screens</TabsTrigger>
            <TabsTrigger value="windows" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Windows</TabsTrigger>
          </TabsList>
-            <div className="h-60 flex flex-col justify-stretch">
+            <div className="h-72 flex flex-col justify-stretch">
            <TabsContent value="screens" className="h-full">
              <div className="grid grid-cols-2 gap-2 h-full overflow-y-auto pr-1 relative">
                {screenSources.map(source => (
@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-white/5", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-3 text-sm font-medium text-slate-200 transition-all hover:text-white [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-slate-400 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
@@ -10,6 +10,7 @@ interface ExportDialogProps {
  isExporting: boolean;
  error: string | null;
  onCancel?: () => void;
+  exportFormat?: 'mp4' | 'gif';
 }

 export function ExportDialog({
@@ -19,9 +20,24 @@ export function ExportDialog({
  isExporting,
  error,
  onCancel,
+  exportFormat = 'mp4',
 }: ExportDialogProps) {
  const [showSuccess, setShowSuccess] = useState(false);

+  // Reset showSuccess when a new export starts or dialog reopens
+  useEffect(() => {
+    if (isExporting) {
+      setShowSuccess(false);
+    }
+  }, [isExporting]);
+
+  // Reset showSuccess when dialog opens fresh
+  useEffect(() => {
+    if (isOpen && !isExporting && !progress) {
+      setShowSuccess(false);
+    }
+  }, [isOpen, isExporting, progress]);
+
  useEffect(() => {
    if (!isExporting && progress && progress.percentage >= 100 && !error) {
      setShowSuccess(true);
@@ -35,6 +51,32 @@ export function ExportDialog({

  if (!isOpen) return null;

+  const formatLabel = exportFormat === 'gif' ? 'GIF' : 'Video';
+  
+  // Determine if we're in the compiling phase (frames done but still exporting)
+  const isCompiling = isExporting && progress && progress.percentage >= 100 && exportFormat === 'gif';
+  const isFinalizing = progress?.phase === 'finalizing';
+  const renderProgress = progress?.renderProgress;
+  
+  // Get status message based on phase
+  const getStatusMessage = () => {
+    if (error) return 'Please try again';
+    if (isCompiling || isFinalizing) {
+      if (renderProgress !== undefined && renderProgress > 0) {
+        return `Compiling GIF... ${renderProgress}%`;
+      }
+      return 'Compiling GIF... This may take a while';
+    }
+    return 'This may take a moment...';
+  };
+
+  // Get title based on phase
+  const getTitle = () => {
+    if (error) return 'Export Failed';
+    if (isCompiling || isFinalizing) return 'Compiling GIF';
+    return `Exporting ${formatLabel}`;
+  };
+
  return (
    <>
      <div 
@@ -42,7 +84,7 @@ export function ExportDialog({
        onClick={isExporting ? undefined : onClose}
      />
      <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-md animate-in zoom-in-95 duration-200">
-        <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-4">
            {showSuccess ? (
              <>
@@ -51,7 +93,7 @@ export function ExportDialog({
                </div>
                <div>
                  <span className="text-xl font-bold text-slate-200 block">Export Complete</span>
-                  <span className="text-sm text-slate-400">Your video is ready</span>
+                  <span className="text-sm text-slate-400">Your {formatLabel.toLowerCase()} is ready</span>
                </div>
              </>
            ) : (
@@ -67,10 +109,10 @@ export function ExportDialog({
                )}
                <div>
                  <span className="text-xl font-bold text-slate-200 block">
-                    {error ? 'Export Failed' : isExporting ? 'Exporting Video' : 'Export Video'}
+                    {getTitle()}
                  </span>
                  <span className="text-sm text-slate-400">
-                    {error ? 'Please try again' : isExporting ? 'This may take a moment...' : 'Ready to start'}
+                    {getStatusMessage()}
                  </span>
                </div>
              </>
@@ -103,23 +145,68 @@ export function ExportDialog({
          <div className="space-y-6">
            <div className="space-y-2">
              <div className="flex justify-between text-xs font-medium text-slate-400 uppercase tracking-wider">
-                <span>Progress</span>
-                <span className="font-mono text-slate-200">{progress.percentage.toFixed(0)}%</span>
+                <span>{isCompiling || isFinalizing ? 'Compiling' : 'Rendering Frames'}</span>
+                <span className="font-mono text-slate-200">
+                  {isCompiling || isFinalizing ? (
+                    renderProgress !== undefined && renderProgress > 0 ? (
+                      `${renderProgress}%`
+                    ) : (
+                      <span className="flex items-center gap-2">
+                        <Loader2 className="w-3 h-3 animate-spin" />
+                        Processing...
+                      </span>
+                    )
+                  ) : (
+                    `${progress.percentage.toFixed(0)}%`
+                  )}
+                </span>
              </div>
              <div className="h-2 bg-white/5 rounded-full overflow-hidden border border-white/5">
-                <div
-                  className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
-                  style={{ width: `${Math.min(progress.percentage, 100)}%` }}
-                />
+                {isCompiling || isFinalizing ? (
+                  // Show render progress if available, otherwise animated indeterminate bar
+                  renderProgress !== undefined && renderProgress > 0 ? (
+                    <div
+                      className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
+                      style={{ width: `${renderProgress}%` }}
+                    />
+                  ) : (
+                    <div className="h-full w-full relative overflow-hidden">
+                      <div 
+                        className="absolute h-full w-1/3 bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)]"
+                        style={{
+                          animation: 'indeterminate 1.5s ease-in-out infinite',
+                        }}
+                      />
+                      <style>{`
+                        @keyframes indeterminate {
+                          0% { transform: translateX(-100%); }
+                          100% { transform: translateX(400%); }
+                        }
+                      `}</style>
+                    </div>
+                  )
+                ) : (
+                  <div
+                    className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
+                    style={{ width: `${Math.min(progress.percentage, 100)}%` }}
+                  />
+                )}
              </div>
            </div>

-            <div className="grid grid-cols-1 gap-4">
+            <div className="grid grid-cols-2 gap-4">
              <div className="bg-white/5 rounded-xl p-3 border border-white/5">
-                <div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Status</div>
-                <div className="text-slate-200 font-medium text-sm flex items-center gap-2 h-[28px]">
-                  <span className="w-2 h-2 rounded-full bg-[#34B27B] animate-pulse" />
-                  Processing
+                <div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
+                  {isCompiling || isFinalizing ? 'Status' : 'Format'}
+                </div>
+                <div className="text-slate-200 font-medium text-sm">
+                  {isCompiling || isFinalizing ? 'Compiling...' : formatLabel}
+                </div>
+              </div>
+              <div className="bg-white/5 rounded-xl p-3 border border-white/5">
+                <div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Frames</div>
+                <div className="text-slate-200 font-medium text-sm">
+                  {progress.currentFrame} / {progress.totalFrames}
                </div>
              </div>
            </div>
@@ -140,7 +227,9 @@ export function ExportDialog({

        {showSuccess && (
          <div className="text-center py-4 animate-in zoom-in-95">
-            <p className="text-lg text-slate-200 font-medium">Video saved successfully!</p>
+            <p className="text-lg text-slate-200 font-medium">
+              {formatLabel} saved successfully!
+            </p>
          </div>
        )}
      </div>
@@ -0,0 +1,77 @@
+import { Film, Image } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ExportFormat } from '@/lib/exporter/types';
+
+interface FormatSelectorProps {
+  selectedFormat: ExportFormat;
+  onFormatChange: (format: ExportFormat) => void;
+  disabled?: boolean;
+}
+
+interface FormatOption {
+  value: ExportFormat;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+const formatOptions: FormatOption[] = [
+  {
+    value: 'mp4',
+    label: 'MP4 Video',
+    description: 'High quality video file',
+    icon: <Film className="w-5 h-5" />,
+  },
+  {
+    value: 'gif',
+    label: 'GIF Animation',
+    description: 'Animated image for sharing',
+    icon: <Image className="w-5 h-5" />,
+  },
+];
+
+export function FormatSelector({
+  selectedFormat,
+  onFormatChange,
+  disabled = false,
+}: FormatSelectorProps) {
+  return (
+    <div className="grid grid-cols-2 gap-3">
+      {formatOptions.map((option) => {
+        const isSelected = selectedFormat === option.value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            disabled={disabled}
+            onClick={() => onFormatChange(option.value)}
+            className={cn(
+              'relative flex flex-col items-center gap-2 p-4 rounded-xl border transition-all duration-200',
+              'focus:outline-none focus:ring-2 focus:ring-[#34B27B]/50 focus:ring-offset-2 focus:ring-offset-[#09090b]',
+              isSelected
+                ? 'bg-[#34B27B]/10 border-[#34B27B]/50 text-white'
+                : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20 hover:text-slate-200',
+              disabled && 'opacity-50 cursor-not-allowed'
+            )}
+          >
+            <div
+              className={cn(
+                'w-10 h-10 rounded-full flex items-center justify-center transition-colors',
+                isSelected ? 'bg-[#34B27B]/20 text-[#34B27B]' : 'bg-white/5'
+              )}
+            >
+              {option.icon}
+            </div>
+            <div className="text-center">
+              <div className="font-medium text-sm">{option.label}</div>
+              <div className="text-xs text-slate-500 mt-0.5">{option.description}</div>
+            </div>
+            {isSelected && (
+              <div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34B27B]" />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,110 @@
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { GIF_FRAME_RATES, GIF_SIZE_PRESETS, type GifFrameRate, type GifSizePreset } from '@/lib/exporter/types';
+
+interface GifOptionsPanelProps {
+  frameRate: GifFrameRate;
+  onFrameRateChange: (rate: GifFrameRate) => void;
+  loop: boolean;
+  onLoopChange: (loop: boolean) => void;
+  sizePreset: GifSizePreset;
+  onSizePresetChange: (preset: GifSizePreset) => void;
+  outputDimensions: { width: number; height: number };
+  disabled?: boolean;
+}
+
+export function GifOptionsPanel({
+  frameRate,
+  onFrameRateChange,
+  loop,
+  onLoopChange,
+  sizePreset,
+  onSizePresetChange,
+  outputDimensions,
+  disabled = false,
+}: GifOptionsPanelProps) {
+  const sizePresetOptions = Object.entries(GIF_SIZE_PRESETS).map(([key, value]) => ({
+    value: key as GifSizePreset,
+    label: value.label,
+  }));
+
+  return (
+    <div className="space-y-4 animate-in slide-in-from-bottom-2 duration-200">
+      {/* Frame Rate */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
+          Frame Rate
+        </label>
+        <Select
+          value={String(frameRate)}
+          onValueChange={(value) => onFrameRateChange(Number(value) as GifFrameRate)}
+          disabled={disabled}
+        >
+          <SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
+            {GIF_FRAME_RATES.map((rate) => (
+              <SelectItem
+                key={rate.value}
+                value={String(rate.value)}
+                className="text-slate-200 focus:bg-white/10 focus:text-white"
+              >
+                {rate.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Size Preset */}
+      <div className="space-y-2">
+        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
+          Output Size
+        </label>
+        <Select
+          value={sizePreset}
+          onValueChange={(value) => onSizePresetChange(value as GifSizePreset)}
+          disabled={disabled}
+        >
+          <SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
+            {sizePresetOptions.map((option) => (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                className="text-slate-200 focus:bg-white/10 focus:text-white"
+              >
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <div className="text-xs text-slate-500">
+          Output: {outputDimensions.width} × {outputDimensions.height}px
+        </div>
+      </div>
+
+      {/* Loop Toggle */}
+      <div className="flex items-center justify-between py-2">
+        <div>
+          <label className="text-sm font-medium text-slate-200">Loop Animation</label>
+          <p className="text-xs text-slate-500">GIF will play continuously</p>
+        </div>
+        <Switch
+          checked={loop}
+          onCheckedChange={onLoopChange}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+}
@@ -7,14 +7,16 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
 import Block from '@uiw/react-color-block';
-import { Trash2, Download, Crop, X, Bug, Upload, Star } from "lucide-react";
+import { Trash2, Download, Crop, X, Bug, Upload, Star, Film, Image, Sparkles, Palette } from "lucide-react";
 import { toast } from "sonner";
 import type { ZoomDepth, CropRegion, AnnotationRegion, AnnotationType } from "./types";
 import { CropControl } from "./CropControl";
 import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
 import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
 import { type AspectRatio } from "@/utils/aspectRatioUtils";
-import type { ExportQuality } from "@/lib/exporter";
+import type { ExportQuality, ExportFormat, GifFrameRate, GifSizePreset } from "@/lib/exporter";
+import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";

 const WALLPAPER_COUNT = 18;
 const WALLPAPER_RELATIVE = Array.from({ length: WALLPAPER_COUNT }, (_, i) => `wallpapers/wallpaper${i + 1}.jpg`);
@@ -70,6 +72,16 @@ interface SettingsPanelProps {
  videoElement?: HTMLVideoElement | null;
  exportQuality?: ExportQuality;
  onExportQualityChange?: (quality: ExportQuality) => void;
+  // Export format settings
+  exportFormat?: ExportFormat;
+  onExportFormatChange?: (format: ExportFormat) => void;
+  gifFrameRate?: GifFrameRate;
+  onGifFrameRateChange?: (rate: GifFrameRate) => void;
+  gifLoop?: boolean;
+  onGifLoopChange?: (loop: boolean) => void;
+  gifSizePreset?: GifSizePreset;
+  onGifSizePresetChange?: (preset: GifSizePreset) => void;
+  gifOutputDimensions?: { width: number; height: number };
  onExport?: () => void;
  selectedAnnotationId?: string | null;
  annotationRegions?: AnnotationRegion[];
@@ -104,7 +116,7 @@ export function SettingsPanel({
  onShadowChange, 
  showBlur, 
  onBlurChange, 
-  motionBlurEnabled = true, 
+  motionBlurEnabled = false,
  onMotionBlurChange, 
  borderRadius = 0, 
  onBorderRadiusChange, 
@@ -116,6 +128,15 @@ export function SettingsPanel({
  videoElement, 
  exportQuality = 'good',
  onExportQualityChange,
+  exportFormat = 'mp4',
+  onExportFormatChange,
+  gifFrameRate = 15,
+  onGifFrameRateChange,
+  gifLoop = true,
+  onGifLoopChange,
+  gifSizePreset = 'medium',
+  onGifSizePresetChange,
+  gifOutputDimensions = { width: 1280, height: 720 },
  onExport,
  selectedAnnotationId,
  annotationRegions = [],
@@ -233,157 +254,288 @@ export function SettingsPanel({
  }

  return (
-    <div className="flex-[2] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl p-4 flex flex-col shadow-xl h-full overflow-y-auto custom-scrollbar">
-      <div className="mb-6">
-        <div className="flex items-center justify-between mb-4">
-          <span className="text-sm font-medium text-slate-200">Zoom Level</span>
-          <div className="flex items-center gap-3">
-            {zoomEnabled && selectedZoomDepth && (
-              <span className="text-[10px] uppercase tracking-wider font-medium text-[#34B27B] bg-[#34B27B]/10 px-2 py-1 rounded-full">
-                {ZOOM_DEPTH_OPTIONS.find(o => o.depth === selectedZoomDepth)?.label} Active
-              </span>
-            )}
-            <KeyboardShortcutsHelp />
+    <div className="flex-[2] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl flex flex-col shadow-xl h-full overflow-hidden">
+      <div className="flex-1 overflow-y-auto custom-scrollbar p-4 pb-0">
+        <div className="mb-4">
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-sm font-medium text-slate-200">Zoom Level</span>
+            <div className="flex items-center gap-2">
+              {zoomEnabled && selectedZoomDepth && (
+                <span className="text-[10px] uppercase tracking-wider font-medium text-[#34B27B] bg-[#34B27B]/10 px-2 py-0.5 rounded-full">
+                  {ZOOM_DEPTH_OPTIONS.find(o => o.depth === selectedZoomDepth)?.label}
+                </span>
+              )}
+              <KeyboardShortcutsHelp />
+            </div>
          </div>
+          <div className="grid grid-cols-6 gap-1.5">
+            {ZOOM_DEPTH_OPTIONS.map((option) => {
+              const isActive = selectedZoomDepth === option.depth;
+              return (
+                <Button
+                  key={option.depth}
+                  type="button"
+                  disabled={!zoomEnabled}
+                  onClick={() => onZoomDepthChange?.(option.depth)}
+                  className={cn(
+                    "h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all",
+                    "duration-200 ease-out",
+                    zoomEnabled ? "opacity-100 cursor-pointer" : "opacity-40 cursor-not-allowed",
+                    isActive
+                      ? "border-[#34B27B] bg-[#34B27B] text-white shadow-[#34B27B]/20"
+                      : "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200"
+                  )}
+                >
+                  <span className="text-xs font-semibold">{option.label}</span>
+                </Button>
+              );
+            })}
+          </div>
+          {!zoomEnabled && (
+            <p className="text-[10px] text-slate-500 mt-2 text-center">Select a zoom region to adjust</p>
+          )}
+          {zoomEnabled && (
+            <Button
+              onClick={handleDeleteClick}
+              variant="destructive"
+              size="sm"
+              className="mt-2 w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+            >
+              <Trash2 className="w-3 h-3" />
+              Delete Zoom
+            </Button>
+          )}
        </div>
-        <div className="grid grid-cols-6 gap-2">
-          {ZOOM_DEPTH_OPTIONS.map((option) => {
-            const isActive = selectedZoomDepth === option.depth;
-            return (
-              <Button
-                key={option.depth}
-                type="button"
-                disabled={!zoomEnabled}
-                onClick={() => onZoomDepthChange?.(option.depth)}
-                className={cn(
-                  "h-auto w-full rounded-xl border px-1 py-3 text-center shadow-sm transition-all flex flex-col items-center justify-center gap-1.5",
-                  "duration-200 ease-out",
-                  zoomEnabled ? "opacity-100 cursor-pointer" : "opacity-40 cursor-not-allowed",
-                  isActive
-                    ? "border-[#34B27B] bg-[#34B27B] text-white shadow-[#34B27B]/20 scale-105 ring-2 ring-[#34B27B]/20"
-                    : "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200"
-                )}
-              >
-                <span className={cn("text-sm font-semibold tracking-tight")}>{option.label}</span>
-              </Button>
-            );
-          })}
-        </div>
-        {!zoomEnabled && (
-          <p className="text-xs text-slate-500 mt-3 text-center">Select a zoom region in the timeline to adjust depth.</p>
-        )}
-        {zoomEnabled && (
-          <Button
-            onClick={handleDeleteClick}
-            variant="destructive"
-            size="sm"
-            className="mt-4 w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all"
-          >
-            <Trash2 className="w-4 h-4" />
-            Delete Zoom Region
-          </Button>
-        )}
-      </div>

-      {/* Trim Delete Section */}
-      <div className="mb-6">
        {trimEnabled && (
-          <Button
-            onClick={handleTrimDeleteClick}
-            variant="destructive"
-            size="sm"
-            className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all"
-          >
-            <Trash2 className="w-4 h-4" />
-            Delete Trim Region
-          </Button>
+          <div className="mb-4">
+            <Button
+              onClick={handleTrimDeleteClick}
+              variant="destructive"
+              size="sm"
+              className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+            >
+              <Trash2 className="w-3 h-3" />
+              Delete Trim Region
+            </Button>
+          </div>
        )}
+
+        <Accordion type="multiple" defaultValue={["effects", "background"]} className="space-y-1">
+          <AccordionItem value="effects" className="border-white/5 rounded-xl bg-white/[0.02] px-3">
+            <AccordionTrigger className="py-2.5 hover:no-underline">
+              <div className="flex items-center gap-2">
+                <Sparkles className="w-4 h-4 text-[#34B27B]" />
+                <span className="text-xs font-medium">Video Effects</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="pb-3">
+              <div className="grid grid-cols-2 gap-2 mb-3">
+                <div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
+                  <div className="text-[10px] font-medium text-slate-300">Motion Blur</div>
+                  <Switch
+                    checked={motionBlurEnabled}
+                    onCheckedChange={onMotionBlurChange}
+                    className="data-[state=checked]:bg-[#34B27B] scale-90"
+                  />
+                </div>
+                <div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
+                  <div className="text-[10px] font-medium text-slate-300">Blur BG</div>
+                  <Switch
+                    checked={showBlur}
+                    onCheckedChange={onBlurChange}
+                    className="data-[state=checked]:bg-[#34B27B] scale-90"
+                  />
+                </div>
+              </div>
+              
+              <div className="grid grid-cols-2 gap-2">
+                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
+                  <div className="flex items-center justify-between mb-1">
+                    <div className="text-[10px] font-medium text-slate-300">Shadow</div>
+                    <span className="text-[10px] text-slate-500 font-mono">{Math.round(shadowIntensity * 100)}%</span>
+                  </div>
+                  <Slider
+                    value={[shadowIntensity]}
+                    onValueChange={(values) => onShadowChange?.(values[0])}
+                    min={0}
+                    max={1}
+                    step={0.01}
+                    className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+                  />
+                </div>
+                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
+                  <div className="flex items-center justify-between mb-1">
+                    <div className="text-[10px] font-medium text-slate-300">Roundness</div>
+                    <span className="text-[10px] text-slate-500 font-mono">{borderRadius}px</span>
+                  </div>
+                  <Slider
+                    value={[borderRadius]}
+                    onValueChange={(values) => onBorderRadiusChange?.(values[0])}
+                    min={0}
+                    max={16}
+                    step={0.5}
+                    className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+                  />
+                </div>
+                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
+                  <div className="flex items-center justify-between mb-1">
+                    <div className="text-[10px] font-medium text-slate-300">Padding</div>
+                    <span className="text-[10px] text-slate-500 font-mono">{padding}%</span>
+                  </div>
+                  <Slider
+                    value={[padding]}
+                    onValueChange={(values) => onPaddingChange?.(values[0])}
+                    min={0}
+                    max={100}
+                    step={1}
+                    className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+                  />
+                </div>
+              </div>
+
+              <Button
+                onClick={() => setShowCropDropdown(!showCropDropdown)}
+                variant="outline"
+                className="w-full mt-2 gap-1.5 bg-white/5 text-slate-200 border-white/10 hover:bg-white/10 hover:border-white/20 hover:text-white text-[10px] h-8 transition-all"
+              >
+                <Crop className="w-3 h-3" />
+                Crop Video
+              </Button>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="background" className="border-white/5 rounded-xl bg-white/[0.02] px-3">
+            <AccordionTrigger className="py-2.5 hover:no-underline">
+              <div className="flex items-center gap-2">
+                <Palette className="w-4 h-4 text-[#34B27B]" />
+                <span className="text-xs font-medium">Background</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="pb-3">
+              <Tabs defaultValue="image" className="w-full">
+                <TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
+                  <TabsTrigger value="image" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all">Image</TabsTrigger>
+                  <TabsTrigger value="color" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all">Color</TabsTrigger>
+                  <TabsTrigger value="gradient" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all">Gradient</TabsTrigger>
+                </TabsList>
+                
+                <div className="max-h-[min(200px,25vh)] overflow-y-auto custom-scrollbar">
+                  <TabsContent value="image" className="mt-0 space-y-2">
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      onChange={handleImageUpload}
+                      accept=".jpg,.jpeg,image/jpeg"
+                      className="hidden"
+                    />
+                    <Button
+                      onClick={() => fileInputRef.current?.click()}
+                      variant="outline"
+                      className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#34B27B] hover:text-white hover:border-[#34B27B] transition-all h-7 text-[10px]"
+                    >
+                      <Upload className="w-3 h-3" />
+                      Upload Custom
+                    </Button>
+
+                    <div className="grid grid-cols-7 gap-1.5">
+                      {customImages.map((imageUrl, idx) => {
+                        const isSelected = selected === imageUrl;
+                        return (
+                          <div
+                            key={`custom-${idx}`}
+                            className={cn(
+                              "aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 relative group shadow-sm",
+                              isSelected
+                                ? "border-[#34B27B] ring-1 ring-[#34B27B]/30"
+                                : "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5"
+                            )}
+                            style={{ backgroundImage: `url(${imageUrl})`, backgroundSize: "cover", backgroundPosition: "center" }}
+                            onClick={() => onWallpaperChange(imageUrl)}
+                            role="button"
+                          >
+                            <button
+                              onClick={(e) => handleRemoveCustomImage(imageUrl, e)}
+                              className="absolute top-0.5 right-0.5 w-3 h-3 bg-red-500/90 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
+                            >
+                              <X className="w-2 h-2 text-white" />
+                            </button>
+                          </div>
+                        );
+                      })}
+
+                      {(wallpaperPaths.length > 0 ? wallpaperPaths : WALLPAPER_RELATIVE.map(p => `/${p}`)).map((path) => {
+                        const isSelected = (() => {
+                          if (!selected) return false;
+                          if (selected === path) return true;
+                          try {
+                            const clean = (s: string) => s.replace(/^file:\/\//, '').replace(/^\//, '')
+                            if (clean(selected).endsWith(clean(path))) return true;
+                            if (clean(path).endsWith(clean(selected))) return true;
+                          } catch {}
+                          return false;
+                        })();
+                        return (
+                          <div
+                            key={path}
+                            className={cn(
+                              "aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
+                              isSelected
+                                ? "border-[#34B27B] ring-1 ring-[#34B27B]/30"
+                                : "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5"
+                            )}
+                            style={{ backgroundImage: `url(${path})`, backgroundSize: "cover", backgroundPosition: "center" }}
+                            onClick={() => onWallpaperChange(path)}
+                            role="button"
+                          />
+                        )
+                      })}
+                    </div>
+                  </TabsContent>
+                  
+                  <TabsContent value="color" className="mt-0">
+                    <div className="p-1">
+                      <Block
+                        color={selectedColor}
+                        colors={colorPalette}
+                        onChange={(color) => {
+                          setSelectedColor(color.hex);
+                          onWallpaperChange(color.hex);
+                        }}
+                        style={{
+                          width: '100%',
+                          borderRadius: '8px',
+                        }}
+                      />
+                    </div>
+                  </TabsContent>
+                  
+                  <TabsContent value="gradient" className="mt-0">
+                    <div className="grid grid-cols-7 gap-1.5">
+                      {GRADIENTS.map((g, idx) => (
+                        <div
+                          key={g}
+                          className={cn(
+                            "aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
+                            gradient === g 
+                              ? "border-[#34B27B] ring-1 ring-[#34B27B]/30" 
+                              : "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5"
+                          )}
+                          style={{ background: g }}
+                          aria-label={`Gradient ${idx + 1}`}
+                          onClick={() => { setGradient(g); onWallpaperChange(g); }}
+                          role="button"
+                        />
+                      ))}
+                    </div>
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
      </div>

-      <div className="mb-6">
-        <div className="grid grid-cols-2 gap-3">
-          {/* Motion Blur Switch */}
-          <div className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
-            <div className="text-xs font-medium text-slate-200">Motion Blur</div>
-            <Switch
-              checked={motionBlurEnabled}
-              onCheckedChange={onMotionBlurChange}
-              className="data-[state=checked]:bg-[#34B27B]"
-            />
-          </div>
-          {/* Blur Background Switch */}
-          <div className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
-            <div className="text-xs font-medium text-slate-200">Blur</div>
-            <Switch
-              checked={showBlur}
-              onCheckedChange={onBlurChange}
-              className="data-[state=checked]:bg-[#34B27B]"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="mb-4">
-        <div className="grid grid-cols-2 gap-2.5">
-          {/* Drop Shadow Slider */}
-          <div className="p-2.5 rounded-xl bg-white/5 border border-white/5 space-y-1.5">
-            <div className="flex items-center justify-between">
-              <div className="text-xs font-medium text-slate-200">Shadow</div>
-              <span className="text-[10px] text-slate-400 font-mono">{Math.round(shadowIntensity * 100)}%</span>
-            </div>
-            <Slider
-              value={[shadowIntensity]}
-              onValueChange={(values) => onShadowChange?.(values[0])}
-              min={0}
-              max={1}
-              step={0.01}
-              className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B]"
-            />
-          </div>
-          {/* Corner Roundness Slider */}
-          <div className="p-2.5 rounded-xl bg-white/5 border border-white/5 space-y-1.5">
-            <div className="flex items-center justify-between">
-              <div className="text-xs font-medium text-slate-200">Roundness</div>
-              <span className="text-[10px] text-slate-400 font-mono">{borderRadius}px</span>
-            </div>
-            <Slider
-              value={[borderRadius]}
-              onValueChange={(values) => onBorderRadiusChange?.(values[0])}
-              min={0}
-              max={16}
-              step={0.5}
-              className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B]"
-            />
-          </div>
-          {/* Padding Slider */}
-          <div className="p-2.5 rounded-xl bg-white/5 border border-white/5 space-y-1.5">
-            <div className="flex items-center justify-between">
-              <div className="text-xs font-medium text-slate-200">Padding</div>
-              <span className="text-[10px] text-slate-400 font-mono">{padding}%</span>
-            </div>
-            <Slider
-              value={[padding]}
-              onValueChange={(values) => onPaddingChange?.(values[0])}
-              min={0}
-              max={100}
-              step={1}
-              className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B]"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="mb-4">
-        <Button
-          onClick={() => setShowCropDropdown(!showCropDropdown)}
-          variant="outline"
-          className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-white/10 hover:border-white/20 hover:text-white h-9 transition-all"
-        >
-          <Crop className="w-4 h-4" />
-          Crop Video
-        </Button>
-      </div>
-      
      {showCropDropdown && cropRegion && onCropChange && (
        <>
          <div 
@@ -424,199 +576,142 @@ export function SettingsPanel({
        </>
      )}

-      <Tabs defaultValue="image" className="flex-1 flex flex-col min-h-0">
-        <TabsList className="mb-4 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
-          <TabsTrigger value="image" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all">Image</TabsTrigger>
-          <TabsTrigger value="color" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all">Color</TabsTrigger>
-          <TabsTrigger value="gradient" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all">Gradient</TabsTrigger>
-        </TabsList>
-        
-        <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar pr-2">
-          <TabsContent value="image" className="mt-0 space-y-3 px-2">
-            {/* Upload Button */}
-            <input
-              type="file"
-              ref={fileInputRef}
-              onChange={handleImageUpload}
-              accept=".jpg,.jpeg,image/jpeg"
-              className="hidden"
-            />
-            <Button
-              onClick={() => fileInputRef.current?.click()}
-              variant="outline"
-              className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#34B27B] hover:text-white hover:border-[#34B27B] transition-all"
+      <div className="flex-shrink-0 p-4 pt-3 border-t border-white/5 bg-[#09090b]">
+        <div className="flex items-center gap-2 mb-3">
+          <button
+            onClick={() => onExportFormatChange?.('mp4')}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
+              exportFormat === 'mp4'
+                ? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
+                : "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200"
+            )}
+          >
+            <Film className="w-3.5 h-3.5" />
+            MP4
+          </button>
+          <button
+            onClick={() => onExportFormatChange?.('gif')}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
+              exportFormat === 'gif'
+                ? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
+                : "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200"
+            )}
+          >
+            <Image className="w-3.5 h-3.5" />
+            GIF
+          </button>
+        </div>
+
+        {exportFormat === 'mp4' && (
+          <div className="mb-3 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
+            <button
+              onClick={() => onExportQualityChange?.('medium')}
+              className={cn(
+                "rounded-md transition-all text-[10px] font-medium",
+                exportQuality === 'medium' ? "bg-white text-black" : "text-slate-400 hover:text-slate-200"
+              )}
            >
-              <Upload className="w-4 h-4" />
-              Upload Custom Image
-            </Button>
+              Low
+            </button>
+            <button
+              onClick={() => onExportQualityChange?.('good')}
+              className={cn(
+                "rounded-md transition-all text-[10px] font-medium",
+                exportQuality === 'good' ? "bg-white text-black" : "text-slate-400 hover:text-slate-200"
+              )}
+            >
+              Medium
+            </button>
+            <button
+              onClick={() => onExportQualityChange?.('source')}
+              className={cn(
+                "rounded-md transition-all text-[10px] font-medium",
+                exportQuality === 'source' ? "bg-white text-black" : "text-slate-400 hover:text-slate-200"
+              )}
+            >
+              High
+            </button>
+          </div>
+        )}

-            <div className="grid grid-cols-6 gap-2.5">
-              {/* Custom Images */}
-              {customImages.map((imageUrl, idx) => {
-                const isSelected = selected === imageUrl;
-                return (
-                  <div
-                    key={`custom-${idx}`}
+        {exportFormat === 'gif' && (
+          <div className="mb-3 space-y-2">
+            <div className="flex items-center gap-2">
+              <div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-4 h-7 rounded-lg">
+                {GIF_FRAME_RATES.map((rate) => (
+                  <button
+                    key={rate.value}
+                    onClick={() => onGifFrameRateChange?.(rate.value)}
                    className={cn(
-                      "aspect-square w-12 h-12 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 relative group shadow-sm",
-                      isSelected
-                        ? "border-[#34B27B] ring-2 ring-[#34B27B]/30 scale-105 shadow-lg shadow-[#34B27B]/10"
-                        : "border-white/10 hover:border-[#34B27B]/40 hover:scale-105 opacity-80 hover:opacity-100 bg-white/5"
+                      "rounded-md transition-all text-[10px] font-medium",
+                      gifFrameRate === rate.value ? "bg-white text-black" : "text-slate-400 hover:text-slate-200"
                    )}
-                    style={{ backgroundImage: `url(${imageUrl})`, backgroundSize: "cover", backgroundPosition: "center" }}
-                    aria-label={`Custom Image ${idx + 1}`}
-                    onClick={() => onWallpaperChange(imageUrl)}
-                    role="button"
                  >
-                    <button
-                      onClick={(e) => handleRemoveCustomImage(imageUrl, e)}
-                      className="absolute top-1 right-1 w-4 h-4 bg-red-500/90 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
-                      aria-label="Remove custom image"
-                    >
-                      <X className="w-2.5 h-2.5 text-white" />
-                    </button>
-                  </div>
-                );
-              })}
-
-              {/* Preset Wallpapers */}
-              {(wallpaperPaths.length > 0 ? wallpaperPaths : WALLPAPER_RELATIVE.map(p => `/${p}`)).map((path, idx) => {
-                const isSelected = (() => {
-                  if (!selected) return false;
-                  if (selected === path) return true;
-                  try {
-                    const clean = (s: string) => s.replace(/^file:\/\//, '').replace(/^\//, '')
-                    if (clean(selected).endsWith(clean(path))) return true;
-                    if (clean(path).endsWith(clean(selected))) return true;
-                  } catch {}
-                  return false;
-                })();
-                return (
-                  <div
-                    key={path}
+                    {rate.value}
+                  </button>
+                ))}
+              </div>
+              <div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-3 h-7 rounded-lg">
+                {Object.entries(GIF_SIZE_PRESETS).map(([key, _preset]) => (
+                  <button
+                    key={key}
+                    onClick={() => onGifSizePresetChange?.(key as GifSizePreset)}
                    className={cn(
-                      "aspect-square w-12 h-12 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
-                      isSelected
-                        ? "border-[#34B27B] ring-2 ring-[#34B27B]/30 scale-105 shadow-lg shadow-[#34B27B]/10"
-                        : "border-white/10 hover:border-[#34B27B]/40 hover:scale-105 opacity-80 hover:opacity-100 bg-white/5"
+                      "rounded-md transition-all text-[10px] font-medium",
+                      gifSizePreset === key ? "bg-white text-black" : "text-slate-400 hover:text-slate-200"
                    )}
-                    style={{ backgroundImage: `url(${path})`, backgroundSize: "cover", backgroundPosition: "center" }}
-                    aria-label={`Wallpaper ${idx + 1}`}
-                    onClick={() => onWallpaperChange(path)}
-                    role="button"
-                  />
-                )
-              })}
+                  >
+                    {key === 'original' ? 'Orig' : key.charAt(0).toUpperCase() + key.slice(1, 3)}
+                  </button>
+                ))}
+              </div>
            </div>
-          </TabsContent>
-          
-          <TabsContent value="color" className="mt-0 px-2">
-            <div className="p-1">
-              <Block
-                color={selectedColor}
-                colors={colorPalette}
-                onChange={(color) => {
-                  setSelectedColor(color.hex);
-                  onWallpaperChange(color.hex);
-                }}
-                style={{
-                  width: '100%',
-                  borderRadius: '12px',
-                }}
-              />
-            </div>
-          </TabsContent>
-          
-          <TabsContent value="gradient" className="mt-0 px-2">
-            <div className="grid grid-cols-6 gap-2.5">
-              {GRADIENTS.map((g, idx) => (
-                <div
-                  key={g}
-                  className={cn(
-                    "aspect-square w-12 h-12 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
-                    gradient === g 
-                      ? "border-[#34B27B] ring-2 ring-[#34B27B]/30 scale-105 shadow-lg shadow-[#34B27B]/10" 
-                      : "border-white/10 hover:border-[#34B27B]/40 hover:scale-105 opacity-80 hover:opacity-100 bg-white/5"
-                  )}
-                  style={{ background: g }}
-                  aria-label={`Gradient ${idx + 1}`}
-                  onClick={() => { setGradient(g); onWallpaperChange(g); }}
-                  role="button"
+            <div className="flex items-center justify-between">
+              <span className="text-[10px] text-slate-500">{gifOutputDimensions.width} × {gifOutputDimensions.height}px</span>
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] text-slate-400">Loop</span>
+                <Switch
+                  checked={gifLoop}
+                  onCheckedChange={onGifLoopChange}
+                  className="data-[state=checked]:bg-[#34B27B] scale-75"
                />
-              ))}
+              </div>
            </div>
-          </TabsContent>
-        </div>
-      </Tabs>
-
-      <div className="mt-4 pt-4 border-t border-white/5">
-        <div className="mb-2 text-xs font-medium text-slate-400">Export Quality</div>
-        {/* Export Quality Button Group */}
-        <div className="mb-2.5 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
-          <button
-            onClick={() => onExportQualityChange?.('medium')}
-            className={cn(
-              "py-2 rounded-lg transition-all text-xs font-medium",
-              exportQuality === 'medium'
-                ? "bg-white text-black"
-                : "text-slate-400 hover:text-slate-200"
-            )}
-          >
-            Low
-          </button>
-          <button
-            onClick={() => onExportQualityChange?.('good')}
-            className={cn(
-              "py-2 rounded-lg transition-all text-xs font-medium",
-              exportQuality === 'good'
-                ? "bg-white text-black"
-                : "text-slate-400 hover:text-slate-200"
-            )}
-          >
-            Medium
-          </button>
-          <button
-            onClick={() => onExportQualityChange?.('source')}
-            className={cn(
-              "py-2 rounded-lg transition-all text-xs font-medium",
-              exportQuality === 'source'
-                ? "bg-white text-black"
-                : "text-slate-400 hover:text-slate-200"
-            )}
-          >
-            High
-          </button>
-        </div>
+          </div>
+        )}
        
        <Button
          type="button"
          size="lg"
          onClick={onExport}
-          className="w-full py-6 text-lg font-semibold flex items-center justify-center gap-3 bg-[#34B27B] text-white rounded-xl shadow-lg shadow-[#34B27B]/20 hover:bg-[#34B27B]/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
+          className="w-full py-5 text-sm font-semibold flex items-center justify-center gap-2 bg-[#34B27B] text-white rounded-xl shadow-lg shadow-[#34B27B]/20 hover:bg-[#34B27B]/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
        >
-          <Download className="w-5 h-5" />
-          <span>Export Video</span>
+          <Download className="w-4 h-4" />
+          Export {exportFormat === 'gif' ? 'GIF' : 'Video'}
        </Button>
-        <div className="flex gap-2 mt-4">
+
+        <div className="flex gap-2 mt-3">
          <button
            type="button"
            onClick={() => {
              window.electronAPI?.openExternalUrl('https://github.com/siddharthvaddem/openscreen/issues/new/choose');
            }}
-            className="flex-1 flex items-center justify-center gap-2 text-xs py-2"
+            className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
          >
            <Bug className="w-3 h-3 text-[#34B27B]" />
-            <span>Report a Bug</span>
+            Report Bug
          </button>
          <button
            type="button"
            onClick={() => {
              window.electronAPI?.openExternalUrl('https://github.com/siddharthvaddem/openscreen');
            }}
-            className="flex-1 flex items-center justify-center gap-2 text-xs"
+            className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
          >
            <Star className="w-3 h-3 text-yellow-400" />
-            <span>Star on GitHub</span>
+            Star on GitHub
          </button>
        </div>
      </div>
@@ -0,0 +1,145 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { HelpCircle, Scissors, ArrowRight } from "lucide-react";
+
+export function TutorialHelp() {
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs text-slate-400 hover:text-slate-200 hover:bg-white/10 transition-all gap-1.5"
+                >
+                    <HelpCircle className="w-3.5 h-3.5" />
+                    <span className="font-medium">How trimming works</span>
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-2xl bg-[#09090b] border-white/10 [&>button]:text-slate-400 [&>button:hover]:text-white">
+                <DialogHeader>
+                    <DialogTitle className="text-xl font-semibold text-slate-200 flex items-center gap-2">
+                        <Scissors className="w-5 h-5 text-[#ef4444]" /> How Trimming Works
+                    </DialogTitle>
+                    <DialogDescription className="text-slate-400">
+                        Understanding how to cut out unwanted parts of your video.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="mt-4 space-y-8">
+                    {/* Explanation */}
+                    <div className="bg-white/5 rounded-lg p-4 border border-white/5">
+                        <p className="text-slate-300 leading-relaxed">
+                            The Trim tool works by defining the segments you want to
+                            <span className="text-[#ef4444] font-bold"> remove</span>. Any part
+                            of the timeline that is
+                            <span className="text-[#ef4444] font-bold"> covered</span> by a red
+                            trim segment will be cut out when you export.
+                        </p>
+                    </div>
+                    {/* Visual Illustration */}
+                    <div className="space-y-2">
+                        <h3 className="text-sm font-medium text-slate-400 uppercase tracking-wider">
+                            Visual Example
+                        </h3>
+                        <div className="relative h-24 bg-[#000] rounded-lg border border-white/10 flex items-center px-4 overflow-hidden select-none">
+                            {/* Background track (Kept parts) */}
+                            <div className="absolute inset-x-4 h-2 bg-slate-600 rounded-full overflow-hidden">
+                                {/* Solid line representing video */}
+                            </div>
+                            {/* Removed Segment 1 */}
+                            <div
+                                className="absolute left-[20%] h-8 bg-[#ef4444]/20 border border-[#ef4444] rounded flex flex-col items-center justify-center z-10"
+                                style={{ width: "20%" }}
+                            >
+                                <span className="text-[10px] font-bold text-[#ef4444] bg-black/50 px-1 rounded">
+                                    REMOVED
+                                </span>
+                            </div>
+                            {/* Removed Segment 2 */}
+                            <div
+                                className="absolute left-[65%] h-8 bg-[#ef4444]/20 border border-[#ef4444] rounded flex flex-col items-center justify-center z-10"
+                                style={{ width: "15%" }}
+                            >
+                                <span className="text-[10px] font-bold text-[#ef4444] bg-black/50 px-1 rounded">
+                                    REMOVED
+                                </span>
+                            </div>
+                            {/* Labels for kept parts */}
+                            <div className="absolute left-[5%] text-[10px] text-slate-400 font-medium">
+                                Kept
+                            </div>
+                            <div className="absolute left-[50%] text-[10px] text-slate-400 font-medium">
+                                Kept
+                            </div>
+                            <div className="absolute left-[90%] text-[10px] text-slate-400 font-medium">
+                                Kept
+                            </div>
+                        </div>
+                        <div className="flex justify-center mt-2">
+
+                            <ArrowRight className="w-4 h-4 text-slate-600 rotate-90" />
+                        </div>
+                        {/* Result */}
+                        <div className="relative h-12 bg-[#000] rounded-lg border border-white/10 flex items-center justify-center gap-1 px-4 select-none">
+                            <div
+                                className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
+                                style={{ width: "30%" }}
+                            >
+                                <span className="text-[10px] text-white font-medium">
+                                    Part 1
+                                </span>
+                            </div>
+                            <div
+                                className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
+                                style={{ width: "30%" }}
+                            >
+                                <span className="text-[10px] text-white font-medium">
+                                    Part 2
+                                </span>
+                            </div>
+                            <div
+                                className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
+                                style={{ width: "30%" }}
+                            >
+                                <span className="text-[10px] text-white font-medium">
+                                    Part 3
+                                </span>
+                            </div>
+                            <span className="absolute right-4 text-xs text-slate-400">
+                                Final Video
+                            </span>
+                        </div>
+                    </div>
+                    {/* Steps */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="p-3 rounded bg-white/5 border border-white/5">
+                            <div className="text-[#ef4444] font-bold mb-1">
+                                1. Add Trim
+                            </div>
+                            <p className="text-xs text-slate-400">
+                                Press
+                                <kbd className="bg-white/10 px-1 rounded text-slate-300">T</kbd>
+                                or click the scissors icon to mark a section for removal.
+                            </p>
+                        </div>
+                        <div className="p-3 rounded bg-white/5 border border-white/5">
+                            <div className="text-[#ef4444] font-bold mb-1">
+                                2. Adjust
+                            </div>
+                            <p className="text-xs text-slate-400">
+                                Drag the edges of the red region to cover exactly what you want
+                                to cut out.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}
@@ -28,7 +28,7 @@ import {
  type CropRegion,
  type FigureData,
 } from "./types";
-import { VideoExporter, type ExportProgress, type ExportQuality } from "@/lib/exporter";
+import { VideoExporter, GifExporter, type ExportProgress, type ExportQuality, type ExportSettings, type ExportFormat, type GifFrameRate, type GifSizePreset, GIF_SIZE_PRESETS, calculateOutputDimensions } from "@/lib/exporter";
 import { type AspectRatio, getAspectRatioValue } from "@/utils/aspectRatioUtils";
 import { getAssetPath } from "@/lib/assetPath";

@@ -45,7 +45,7 @@ export default function VideoEditor() {
  const [wallpaper, setWallpaper] = useState<string>(WALLPAPER_PATHS[0]);
  const [shadowIntensity, setShadowIntensity] = useState(0);
  const [showBlur, setShowBlur] = useState(false);
-  const [motionBlurEnabled, setMotionBlurEnabled] = useState(true);
+  const [motionBlurEnabled, setMotionBlurEnabled] = useState(false);
  const [borderRadius, setBorderRadius] = useState(0);
  const [padding, setPadding] = useState(50);
  const [cropRegion, setCropRegion] = useState<CropRegion>(DEFAULT_CROP_REGION);
@@ -61,6 +61,10 @@ export default function VideoEditor() {
  const [showExportDialog, setShowExportDialog] = useState(false);
  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('16:9');
  const [exportQuality, setExportQuality] = useState<ExportQuality>('good');
+  const [exportFormat, setExportFormat] = useState<ExportFormat>('mp4');
+  const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(15);
+  const [gifLoop, setGifLoop] = useState(true);
+  const [gifSizePreset, setGifSizePreset] = useState<GifSizePreset>('medium');

  const videoPlaybackRef = useRef<VideoPlaybackRef>(null);
  const nextZoomIdRef = useRef(1);
@@ -316,7 +320,7 @@ export default function VideoEditor() {
      });
      return updated;
    });
-  }, []);;
+  }, []);

  const handleAnnotationTypeChange = useCallback((id: string, type: AnnotationRegion['type']) => {
    setAnnotationRegions((prev) => {
@@ -434,7 +438,7 @@ export default function VideoEditor() {
    }
  }, [selectedAnnotationId, annotationRegions]);

-  const handleExport = useCallback(async () => {
+  const handleExport = useCallback(async (settings: ExportSettings) => {
    if (!videoPath) {
      toast.error('No video loaded');
      return;
@@ -446,7 +450,6 @@ export default function VideoEditor() {
      return;
    }

-    setShowExportDialog(true);
    setIsExporting(true);
    setExportProgress(null);
    setExportError(null);
@@ -457,149 +460,191 @@ export default function VideoEditor() {
        videoPlaybackRef.current?.pause();
      }

-      // Get actual video dimensions to match recording resolution
-      const video = videoPlaybackRef.current?.video;
-      if (!video) {
-        toast.error('Video not ready');
-        return;
-      }
-      
      const aspectRatioValue = getAspectRatioValue(aspectRatio);
      const sourceWidth = video.videoWidth || 1920;
      const sourceHeight = video.videoHeight || 1080;
-      
-      let exportWidth: number;
-      let exportHeight: number;
-      let bitrate: number;
-
-      if (exportQuality === 'source') {
-        // Use source resolution
-        exportWidth = sourceWidth;
-        exportHeight = sourceHeight;
-
-        if (aspectRatioValue === 1) {
-          // Square (1:1): use smaller dimension to avoid codec limits
-          const baseDimension = Math.floor(Math.min(sourceWidth, sourceHeight) / 2) * 2;
-          exportWidth = baseDimension;
-          exportHeight = baseDimension;
-        } else if (aspectRatioValue > 1) {
-          // Landscape: find largest even dimensions that exactly match aspect ratio
-          const baseWidth = Math.floor(sourceWidth / 2) * 2;
-          // Iterate down from baseWidth to find exact match
-          let found = false;
-          for (let w = baseWidth; w >= 100 && !found; w -= 2) {
-            const h = Math.round(w / aspectRatioValue);
-            if (h % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
-              exportWidth = w;
-              exportHeight = h;
-              found = true;
-            }
-          }
-          if (!found) {
-            exportWidth = baseWidth;
-            exportHeight = Math.floor((baseWidth / aspectRatioValue) / 2) * 2;
-          }
-        } else {
-          // Portrait: find largest even dimensions that exactly match aspect ratio
-          const baseHeight = Math.floor(sourceHeight / 2) * 2;
-          // Iterate down from baseHeight to find exact match
-          let found = false;
-          for (let h = baseHeight; h >= 100 && !found; h -= 2) {
-            const w = Math.round(h * aspectRatioValue);
-            if (w % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
-              exportWidth = w;
-              exportHeight = h;
-              found = true;
-            }
-          }
-          if (!found) {
-            exportHeight = baseHeight;
-            exportWidth = Math.floor((baseHeight * aspectRatioValue) / 2) * 2;
-          }
-        }
-
-        // Calculate visually lossless bitrate matching screen recording optimization
-        const totalPixels = exportWidth * exportHeight;
-        bitrate = 30_000_000;
-        if (totalPixels > 1920 * 1080 && totalPixels <= 2560 * 1440) {
-          bitrate = 50_000_000;
-        } else if (totalPixels > 2560 * 1440) {
-          bitrate = 80_000_000;
-        }
-      } else {
-        // Use quality-based target resolution
-        const targetHeight = exportQuality === 'medium' ? 720 : 1080;
-        
-        // Calculate dimensions maintaining aspect ratio
-        exportHeight = Math.floor(targetHeight / 2) * 2; // Ensure even
-        exportWidth = Math.floor((exportHeight * aspectRatioValue) / 2) * 2; // Ensure even
-        
-        // Adjust bitrate for lower resolutions
-        const totalPixels = exportWidth * exportHeight;
-        if (totalPixels <= 1280 * 720) {
-          bitrate = 10_000_000; // 10 Mbps for 720p
-        } else if (totalPixels <= 1920 * 1080) {
-          bitrate = 20_000_000; // 20 Mbps for 1080p
-        } else {
-          bitrate = 30_000_000;
-        }
-      }

      // Get preview CONTAINER dimensions for scaling
-      // Annotations render in HTML overlay matching container, not PixiJS canvas
      const playbackRef = videoPlaybackRef.current;
      const containerElement = playbackRef?.containerRef?.current;
      const previewWidth = containerElement?.clientWidth || 1920;
      const previewHeight = containerElement?.clientHeight || 1080;

+      if (settings.format === 'gif' && settings.gifConfig) {
+        // GIF Export
+        const gifExporter = new GifExporter({
+          videoUrl: videoPath,
+          width: settings.gifConfig.width,
+          height: settings.gifConfig.height,
+          frameRate: settings.gifConfig.frameRate,
+          loop: settings.gifConfig.loop,
+          sizePreset: settings.gifConfig.sizePreset,
+          wallpaper,
+          zoomRegions,
+          trimRegions,
+          showShadow: shadowIntensity > 0,
+          shadowIntensity,
+          showBlur,
+          motionBlurEnabled,
+          borderRadius,
+          padding,
+          videoPadding: padding,
+          cropRegion,
+          annotationRegions,
+          previewWidth,
+          previewHeight,
+          onProgress: (progress: ExportProgress) => {
+            setExportProgress(progress);
+          },
+        });

+        exporterRef.current = gifExporter as unknown as VideoExporter;
+        const result = await gifExporter.export();

-      const exporter = new VideoExporter({
-        videoUrl: videoPath,
-        width: exportWidth,
-        height: exportHeight,
-        frameRate: 60,
-        bitrate,
-        codec: 'avc1.640033',
-        wallpaper,
-        zoomRegions,
-        trimRegions,
-        showShadow: shadowIntensity > 0,
-        shadowIntensity,
-        showBlur,
-        motionBlurEnabled,
-        borderRadius,
-        padding,
-        cropRegion,
-        annotationRegions,
-        previewWidth,
-        previewHeight,
-        onProgress: (progress: ExportProgress) => {
-          setExportProgress(progress);
-        },
-      });
+        if (result.success && result.blob) {
+          const arrayBuffer = await result.blob.arrayBuffer();
+          const timestamp = Date.now();
+          const fileName = `export-${timestamp}.gif`;

-      exporterRef.current = exporter;
-      const result = await exporter.export();
+          const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);

-      if (result.success && result.blob) {
-        const arrayBuffer = await result.blob.arrayBuffer();
-        const timestamp = Date.now();
-        const fileName = `export-${timestamp}.mp4`;
-        
-        const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
-        
-        if (saveResult.cancelled) {
-          toast.info('Export cancelled');
-        } else if (saveResult.success) {
-          toast.success(`Video exported successfully to ${saveResult.path}`);
+          if (saveResult.cancelled) {
+            toast.info('Export cancelled');
+          } else if (saveResult.success) {
+            toast.success(`GIF exported successfully to ${saveResult.path}`);
+          } else {
+            setExportError(saveResult.message || 'Failed to save GIF');
+            toast.error(saveResult.message || 'Failed to save GIF');
+          }
        } else {
-          setExportError(saveResult.message || 'Failed to save video');
-          toast.error(saveResult.message || 'Failed to save video');
+          setExportError(result.error || 'GIF export failed');
+          toast.error(result.error || 'GIF export failed');
        }
      } else {
-        setExportError(result.error || 'Export failed');
-        toast.error(result.error || 'Export failed');
+        // MP4 Export
+        const quality = settings.quality || exportQuality;
+        let exportWidth: number;
+        let exportHeight: number;
+        let bitrate: number;
+
+        if (quality === 'source') {
+          // Use source resolution
+          exportWidth = sourceWidth;
+          exportHeight = sourceHeight;
+
+          if (aspectRatioValue === 1) {
+            // Square (1:1): use smaller dimension to avoid codec limits
+            const baseDimension = Math.floor(Math.min(sourceWidth, sourceHeight) / 2) * 2;
+            exportWidth = baseDimension;
+            exportHeight = baseDimension;
+          } else if (aspectRatioValue > 1) {
+            // Landscape: find largest even dimensions that exactly match aspect ratio
+            const baseWidth = Math.floor(sourceWidth / 2) * 2;
+            let found = false;
+            for (let w = baseWidth; w >= 100 && !found; w -= 2) {
+              const h = Math.round(w / aspectRatioValue);
+              if (h % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
+                exportWidth = w;
+                exportHeight = h;
+                found = true;
+              }
+            }
+            if (!found) {
+              exportWidth = baseWidth;
+              exportHeight = Math.floor((baseWidth / aspectRatioValue) / 2) * 2;
+            }
+          } else {
+            // Portrait: find largest even dimensions that exactly match aspect ratio
+            const baseHeight = Math.floor(sourceHeight / 2) * 2;
+            let found = false;
+            for (let h = baseHeight; h >= 100 && !found; h -= 2) {
+              const w = Math.round(h * aspectRatioValue);
+              if (w % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
+                exportWidth = w;
+                exportHeight = h;
+                found = true;
+              }
+            }
+            if (!found) {
+              exportHeight = baseHeight;
+              exportWidth = Math.floor((baseHeight * aspectRatioValue) / 2) * 2;
+            }
+          }
+
+          // Calculate visually lossless bitrate matching screen recording optimization
+          const totalPixels = exportWidth * exportHeight;
+          bitrate = 30_000_000;
+          if (totalPixels > 1920 * 1080 && totalPixels <= 2560 * 1440) {
+            bitrate = 50_000_000;
+          } else if (totalPixels > 2560 * 1440) {
+            bitrate = 80_000_000;
+          }
+        } else {
+          // Use quality-based target resolution
+          const targetHeight = quality === 'medium' ? 720 : 1080;
+
+          // Calculate dimensions maintaining aspect ratio
+          exportHeight = Math.floor(targetHeight / 2) * 2;
+          exportWidth = Math.floor((exportHeight * aspectRatioValue) / 2) * 2;
+
+          // Adjust bitrate for lower resolutions
+          const totalPixels = exportWidth * exportHeight;
+          if (totalPixels <= 1280 * 720) {
+            bitrate = 10_000_000;
+          } else if (totalPixels <= 1920 * 1080) {
+            bitrate = 20_000_000;
+          } else {
+            bitrate = 30_000_000;
+          }
+        }
+
+        const exporter = new VideoExporter({
+          videoUrl: videoPath,
+          width: exportWidth,
+          height: exportHeight,
+          frameRate: 60,
+          bitrate,
+          codec: 'avc1.640033',
+          wallpaper,
+          zoomRegions,
+          trimRegions,
+          showShadow: shadowIntensity > 0,
+          shadowIntensity,
+          showBlur,
+          motionBlurEnabled,
+          borderRadius,
+          padding,
+          cropRegion,
+          annotationRegions,
+          previewWidth,
+          previewHeight,
+          onProgress: (progress: ExportProgress) => {
+            setExportProgress(progress);
+          },
+        });
+
+        exporterRef.current = exporter;
+        const result = await exporter.export();
+
+        if (result.success && result.blob) {
+          const arrayBuffer = await result.blob.arrayBuffer();
+          const timestamp = Date.now();
+          const fileName = `export-${timestamp}.mp4`;
+
+          const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
+
+          if (saveResult.cancelled) {
+            toast.info('Export cancelled');
+          } else if (saveResult.success) {
+            toast.success(`Video exported successfully to ${saveResult.path}`);
+          } else {
+            setExportError(saveResult.message || 'Failed to save video');
+            toast.error(saveResult.message || 'Failed to save video');
+          }
+        } else {
+          setExportError(result.error || 'Export failed');
+          toast.error(result.error || 'Export failed');
+        }
      }

      if (wasPlaying) {
@@ -613,9 +658,49 @@ export default function VideoEditor() {
    } finally {
      setIsExporting(false);
      exporterRef.current = null;
+      // Reset dialog state to ensure it can be opened again on next export
+      // This fixes the bug where second export doesn't show save dialog
+      setShowExportDialog(false);
+      setExportProgress(null);
    }
  }, [videoPath, wallpaper, zoomRegions, trimRegions, shadowIntensity, showBlur, motionBlurEnabled, borderRadius, padding, cropRegion, annotationRegions, isPlaying, aspectRatio, exportQuality]);

+  const handleOpenExportDialog = useCallback(() => {
+    if (!videoPath) {
+      toast.error('No video loaded');
+      return;
+    }
+
+    const video = videoPlaybackRef.current?.video;
+    if (!video) {
+      toast.error('Video not ready');
+      return;
+    }
+
+    // Build export settings from current state
+    const sourceWidth = video.videoWidth || 1920;
+    const sourceHeight = video.videoHeight || 1080;
+    const gifDimensions = calculateOutputDimensions(sourceWidth, sourceHeight, gifSizePreset, GIF_SIZE_PRESETS);
+
+    const settings: ExportSettings = {
+      format: exportFormat,
+      quality: exportFormat === 'mp4' ? exportQuality : undefined,
+      gifConfig: exportFormat === 'gif' ? {
+        frameRate: gifFrameRate,
+        loop: gifLoop,
+        sizePreset: gifSizePreset,
+        width: gifDimensions.width,
+        height: gifDimensions.height,
+      } : undefined,
+    };
+
+    setShowExportDialog(true);
+    setExportError(null);
+
+    // Start export immediately
+    handleExport(settings);
+  }, [videoPath, exportFormat, exportQuality, gifFrameRate, gifLoop, gifSizePreset, handleExport]);
+
  const handleCancelExport = useCallback(() => {
    if (exporterRef.current) {
      exporterRef.current.cancel();
@@ -771,7 +856,21 @@ export default function VideoEditor() {
          videoElement={videoPlaybackRef.current?.video || null}
          exportQuality={exportQuality}
          onExportQualityChange={setExportQuality}
-          onExport={handleExport}
+          exportFormat={exportFormat}
+          onExportFormatChange={setExportFormat}
+          gifFrameRate={gifFrameRate}
+          onGifFrameRateChange={setGifFrameRate}
+          gifLoop={gifLoop}
+          onGifLoopChange={setGifLoop}
+          gifSizePreset={gifSizePreset}
+          onGifSizePresetChange={setGifSizePreset}
+          gifOutputDimensions={calculateOutputDimensions(
+            videoPlaybackRef.current?.video?.videoWidth || 1920,
+            videoPlaybackRef.current?.video?.videoHeight || 1080,
+            gifSizePreset,
+            GIF_SIZE_PRESETS
+          )}
+          onExport={handleOpenExportDialog}
          selectedAnnotationId={selectedAnnotationId}
          annotationRegions={annotationRegions}
          onAnnotationContentChange={handleAnnotationContentChange}
@@ -791,6 +890,7 @@ export default function VideoEditor() {
        isExporting={isExporting}
        error={exportError}
        onCancel={handleCancelExport}
+        exportFormat={exportFormat}
      />
    </div>
  );
@@ -69,7 +69,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
  showShadow,
  shadowIntensity = 0,
  showBlur,
-  motionBlurEnabled = true,
+  motionBlurEnabled = false,
  borderRadius = 0,
  padding = 50,
  cropRegion,
@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { type AspectRatio, getAspectRatioLabel } from "@/utils/aspectRatioUtils";
 import { formatShortcut } from "@/utils/platformUtils";
+import { TutorialHelp } from "../TutorialHelp";

 const ZOOM_ROW_ID = "row-zoom";
 const TRIM_ROW_ID = "row-trim";
@@ -907,6 +908,8 @@ export default function TimelineEditor({
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
+          <div className="w-[1px] h-4 bg-white/10" />
+          <TutorialHelp />
        </div>
        <div className="flex-1" />
        <div className="flex items-center gap-4 text-[10px] text-slate-500 font-medium">
@@ -23,7 +23,7 @@ export function applyZoomTransform({
  focusY,
  motionIntensity,
  isPlaying,
-  motionBlurEnabled = true,
+  motionBlurEnabled = false,
 }: TransformParams) {
  if (
    stageSize.width <= 0 ||
@@ -77,6 +77,16 @@
    transition: left 33ms linear, right 33ms linear;
  }
  
+  /* Hidden scrollbar - still scrollable but invisible */
+  .custom-scrollbar {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+  
  /* Smooth playback scrubber */
  input[type="range"] {
    -webkit-appearance: none;
@@ -293,7 +293,7 @@ export class FrameRenderer {
      focusY: this.animationState.focusY,
      motionIntensity: maxMotionIntensity,
      isPlaying: true,
-      motionBlurEnabled: this.config.motionBlurEnabled ?? true,
+      motionBlurEnabled: this.config.motionBlurEnabled ?? false,
    });

    // Render the PixiJS stage to its canvas (video only, transparent background)
@@ -311,8 +311,6 @@ export class FrameRenderer {
      const scaleY = this.config.height / previewHeight;
      const scaleFactor = (scaleX + scaleY) / 2;

-
-
      await renderAnnotations(
        this.compositeCtx,
        this.config.annotationRegions,
@@ -365,9 +363,14 @@ export class FrameRenderer {
    this.videoContainer.x = centerOffsetX;
    this.videoContainer.y = centerOffsetY;

-    // Update mask
+    // scale border radius by export/preview canvas ratio
+    const previewWidth = this.config.previewWidth || 1920;
+    const previewHeight = this.config.previewHeight || 1080;
+    const canvasScaleFactor = Math.min(width / previewWidth, height / previewHeight);
+    const scaledBorderRadius = borderRadius * canvasScaleFactor;
+    
    this.maskGraphics.clear();
-    this.maskGraphics.roundRect(0, 0, croppedDisplayWidth, croppedDisplayHeight, borderRadius);
+    this.maskGraphics.roundRect(0, 0, croppedDisplayWidth, croppedDisplayHeight, scaledBorderRadius);
    this.maskGraphics.fill({ color: 0xffffff });

    // Cache layout info
@@ -0,0 +1,474 @@
+import { describe, it, expect } from 'vitest';
+import * as fc from 'fast-check';
+import { calculateOutputDimensions } from './gifExporter';
+import { GIF_SIZE_PRESETS, GifSizePreset } from './types';
+
+/**
+ * Property 2: Loop Encoding Correctness
+ * 
+ * *For any* GIF export configuration, when loop is enabled the output GIF SHALL 
+ * have a loop count of 0 (infinite), and when loop is disabled the output GIF 
+ * SHALL have a loop count of 1 (play once).
+ * 
+ * **Validates: Requirements 3.2, 3.3**
+ * 
+ * Feature: gif-export, Property 2: Loop Encoding Correctness
+ */
+describe('GIF Exporter', () => {
+  describe('Property 2: Loop Encoding Correctness', () => {
+    /**
+     * Test the loop configuration mapping logic.
+     * In gif.js: repeat=0 means infinite loop, repeat=1 means play once (no loop)
+     */
+    it('should map loop=true to repeat=0 (infinite) and loop=false to repeat=1 (once)', () => {
+      fc.assert(
+        fc.property(
+          fc.boolean(),
+          (loopEnabled: boolean) => {
+            // This is the logic used in GifExporter constructor
+            const repeat = loopEnabled ? 0 : 1;
+            
+            if (loopEnabled) {
+              // When loop is enabled, repeat should be 0 (infinite loop)
+              expect(repeat).toBe(0);
+            } else {
+              // When loop is disabled, repeat should be 1 (play once)
+              expect(repeat).toBe(1);
+            }
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+
+    it('should always produce valid repeat values (0 or 1)', () => {
+      fc.assert(
+        fc.property(
+          fc.boolean(),
+          (loopEnabled: boolean) => {
+            const repeat = loopEnabled ? 0 : 1;
+            expect([0, 1]).toContain(repeat);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+  });
+
+  /**
+   * Property 4: Aspect Ratio Preservation
+   * 
+   * *For any* source video with aspect ratio R and any size preset, the exported 
+   * GIF SHALL have an aspect ratio within 0.01 of R.
+   * 
+   * **Validates: Requirements 4.4**
+   * 
+   * Feature: gif-export, Property 4: Aspect Ratio Preservation
+   */
+  describe('Property 4: Aspect Ratio Preservation', () => {
+    const sizePresets: GifSizePreset[] = ['medium', 'large', 'original'];
+
+    it('should preserve aspect ratio within 0.01 tolerance for all size presets', () => {
+      fc.assert(
+        fc.property(
+          fc.integer({ min: 100, max: 4000 }), // sourceWidth
+          fc.integer({ min: 100, max: 4000 }), // sourceHeight
+          fc.constantFrom(...sizePresets),
+          (sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
+            const originalAspectRatio = sourceWidth / sourceHeight;
+            
+            const { width, height } = calculateOutputDimensions(
+              sourceWidth,
+              sourceHeight,
+              sizePreset,
+              GIF_SIZE_PRESETS
+            );
+            
+            const outputAspectRatio = width / height;
+            
+            // Aspect ratio should be preserved within 0.01 tolerance
+            // (small deviation allowed due to rounding to even numbers)
+            expect(Math.abs(originalAspectRatio - outputAspectRatio)).toBeLessThan(0.02);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+
+    it('should return original dimensions when source is smaller than preset max height', () => {
+      fc.assert(
+        fc.property(
+          fc.integer({ min: 100, max: 400 }), // sourceWidth (small)
+          fc.integer({ min: 100, max: 400 }), // sourceHeight (small, less than 720p)
+          (sourceWidth: number, sourceHeight: number) => {
+            // For 'medium' preset with maxHeight 720, if source is smaller, use original
+            const { width, height } = calculateOutputDimensions(
+              sourceWidth,
+              sourceHeight,
+              'medium',
+              GIF_SIZE_PRESETS
+            );
+            
+            expect(width).toBe(sourceWidth);
+            expect(height).toBe(sourceHeight);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+
+    it('should return original dimensions for "original" preset regardless of size', () => {
+      fc.assert(
+        fc.property(
+          fc.integer({ min: 100, max: 4000 }),
+          fc.integer({ min: 100, max: 4000 }),
+          (sourceWidth: number, sourceHeight: number) => {
+            const { width, height } = calculateOutputDimensions(
+              sourceWidth,
+              sourceHeight,
+              'original',
+              GIF_SIZE_PRESETS
+            );
+            
+            expect(width).toBe(sourceWidth);
+            expect(height).toBe(sourceHeight);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+
+    it('should scale down to preset max height when source is larger', () => {
+      fc.assert(
+        fc.property(
+          fc.integer({ min: 1000, max: 4000 }), // sourceWidth (large)
+          fc.integer({ min: 800, max: 2000 }), // sourceHeight (larger than 720p)
+          (sourceWidth: number, sourceHeight: number) => {
+            // For 'medium' preset with maxHeight 720
+            const { width, height } = calculateOutputDimensions(
+              sourceWidth,
+              sourceHeight,
+              'medium',
+              GIF_SIZE_PRESETS
+            );
+            
+            // Height should be at most 720 (or 722 due to even rounding)
+            expect(height).toBeLessThanOrEqual(722);
+            // Width should be scaled proportionally
+            expect(width).toBeLessThan(sourceWidth);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+  });
+});
+
+
+/**
+ * Property 3: Size Preset Resolution Mapping
+ * 
+ * *For any* valid size preset and source video dimensions, the GIF_Exporter SHALL 
+ * produce output with height matching the preset's max height (or source height if smaller), 
+ * with width calculated to maintain aspect ratio.
+ * 
+ * **Validates: Requirements 4.2**
+ * 
+ * Feature: gif-export, Property 3: Size Preset Resolution Mapping
+ */
+describe('Property 3: Size Preset Resolution Mapping', () => {
+  it('should map size presets to correct max heights', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 800, max: 4000 }), // sourceWidth (large enough to trigger scaling)
+        fc.integer({ min: 800, max: 2000 }), // sourceHeight (larger than all presets except original)
+        fc.constantFrom('medium', 'large') as fc.Arbitrary<GifSizePreset>,
+        (sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
+          const { height } = calculateOutputDimensions(
+            sourceWidth,
+            sourceHeight,
+            sizePreset,
+            GIF_SIZE_PRESETS
+          );
+          
+          const expectedMaxHeight = GIF_SIZE_PRESETS[sizePreset].maxHeight;
+          
+          // Height should be at or below the preset's max height
+          // (allowing +2 for even number rounding)
+          expect(height).toBeLessThanOrEqual(expectedMaxHeight + 2);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should use source dimensions when smaller than preset', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 100, max: 400 }), // sourceWidth
+        fc.integer({ min: 100, max: 400 }), // sourceHeight (smaller than 720p 'medium' preset)
+        fc.constantFrom('medium', 'large', 'original') as fc.Arbitrary<GifSizePreset>,
+        (sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
+          const { width, height } = calculateOutputDimensions(
+            sourceWidth,
+            sourceHeight,
+            sizePreset,
+            GIF_SIZE_PRESETS
+          );
+          
+          // When source is smaller than preset, use original dimensions
+          expect(width).toBe(sourceWidth);
+          expect(height).toBe(sourceHeight);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should produce even dimensions for encoder compatibility', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 100, max: 4000 }),
+        fc.integer({ min: 100, max: 4000 }),
+        fc.constantFrom('medium', 'large', 'original') as fc.Arbitrary<GifSizePreset>,
+        (sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
+          const { width, height } = calculateOutputDimensions(
+            sourceWidth,
+            sourceHeight,
+            sizePreset,
+            GIF_SIZE_PRESETS
+          );
+          
+          // When scaling occurs, dimensions should be even
+          // (original dimensions are passed through as-is)
+          if (sourceHeight > GIF_SIZE_PRESETS[sizePreset].maxHeight && sizePreset !== 'original') {
+            expect(width % 2).toBe(0);
+            expect(height % 2).toBe(0);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+});
+
+/**
+ * Property 6: Frame Count Consistency
+ * 
+ * *For any* video with effective duration D (excluding trim regions) and frame rate F, 
+ * the exported GIF SHALL contain approximately D × F frames (within ±1 frame tolerance).
+ * 
+ * **Validates: Requirements 5.1**
+ * 
+ * Feature: gif-export, Property 6: Frame Count Consistency
+ */
+describe('Property 6: Frame Count Consistency', () => {
+  // Helper function to calculate expected frame count
+  const calculateExpectedFrameCount = (durationSeconds: number, frameRate: number): number => {
+    return Math.ceil(durationSeconds * frameRate);
+  };
+
+  it('should calculate correct frame count for duration and frame rate', () => {
+    fc.assert(
+      fc.property(
+        fc.float({ min: 0.5, max: 60, noNaN: true }), // duration in seconds
+        fc.constantFrom(10, 15, 20, 25, 30), // valid frame rates
+        (duration: number, frameRate: number) => {
+          const expectedFrames = calculateExpectedFrameCount(duration, frameRate);
+          
+          // Frame count should be positive
+          expect(expectedFrames).toBeGreaterThan(0);
+          
+          // Frame count should be approximately duration * frameRate
+          const approximateFrames = duration * frameRate;
+          expect(Math.abs(expectedFrames - approximateFrames)).toBeLessThanOrEqual(1);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should produce more frames with higher frame rates', () => {
+    fc.assert(
+      fc.property(
+        fc.float({ min: 1, max: 30, noNaN: true }), // duration in seconds
+        (duration: number) => {
+          const frames10fps = calculateExpectedFrameCount(duration, 10);
+          const frames30fps = calculateExpectedFrameCount(duration, 30);
+          
+          // 30fps should produce approximately 3x more frames than 10fps
+          expect(frames30fps).toBeGreaterThan(frames10fps);
+          expect(frames30fps / frames10fps).toBeCloseTo(3, 0);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle trim regions by reducing effective duration', () => {
+    fc.assert(
+      fc.property(
+        fc.float({ min: 5, max: 60, noNaN: true }), // total duration
+        fc.float({ min: 0.5, max: 2, noNaN: true }), // trim duration (smaller than total)
+        fc.constantFrom(10, 15, 20, 25, 30),
+        (totalDuration: number, trimDuration: number, frameRate: number) => {
+          const effectiveDuration = totalDuration - trimDuration;
+          const framesWithTrim = calculateExpectedFrameCount(effectiveDuration, frameRate);
+          const framesWithoutTrim = calculateExpectedFrameCount(totalDuration, frameRate);
+          
+          // Trimmed video should have fewer frames
+          expect(framesWithTrim).toBeLessThan(framesWithoutTrim);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+});
+
+
+/**
+ * Property 5: Valid GIF Output (Configuration Validation)
+ * 
+ * *For any* successful GIF export, the output blob SHALL be a valid GIF file.
+ * This test validates the GIF configuration parameters are correctly set up.
+ * 
+ * **Validates: Requirements 5.3**
+ * 
+ * Feature: gif-export, Property 5: Valid GIF Output
+ * 
+ * Note: Full GIF encoding validation requires browser environment with video.
+ * This test validates configuration correctness.
+ */
+describe('Property 5: Valid GIF Output (Configuration)', () => {
+  it('should generate valid GIF configuration for all frame rates', () => {
+    fc.assert(
+      fc.property(
+        fc.constantFrom(10, 15, 20, 25, 30),
+        fc.integer({ min: 100, max: 1920 }),
+        fc.integer({ min: 100, max: 1080 }),
+        fc.boolean(),
+        (frameRate: number, width: number, height: number, loop: boolean) => {
+          // Validate frame delay calculation (gif.js uses milliseconds)
+          const frameDelay = Math.round(1000 / frameRate);
+          
+          // Frame delay should be positive and reasonable
+          expect(frameDelay).toBeGreaterThan(0);
+          expect(frameDelay).toBeLessThanOrEqual(100); // 10fps = 100ms delay
+          
+          // Loop configuration
+          const repeat = loop ? 0 : 1;
+          expect([0, 1]).toContain(repeat);
+          
+          // Dimensions should be positive
+          expect(width).toBeGreaterThan(0);
+          expect(height).toBeGreaterThan(0);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should calculate correct frame delays for each frame rate', () => {
+    const expectedDelays: Record<number, number> = {
+      10: 100,  // 1000ms / 10fps = 100ms
+      15: 67,   // 1000ms / 15fps ≈ 67ms
+      20: 50,   // 1000ms / 20fps = 50ms
+      25: 40,   // 1000ms / 25fps = 40ms
+      30: 33,   // 1000ms / 30fps ≈ 33ms
+    };
+
+    for (const [fps, expectedDelay] of Object.entries(expectedDelays)) {
+      const frameRate = Number(fps);
+      const actualDelay = Math.round(1000 / frameRate);
+      expect(actualDelay).toBe(expectedDelay);
+    }
+  });
+});
+
+/**
+ * Property 7: MP4 Export Regression
+ * 
+ * *For any* valid MP4 export configuration that worked before this feature, 
+ * the Video_Exporter SHALL continue to produce valid MP4 output.
+ * 
+ * **Validates: Requirements 7.2**
+ * 
+ * Feature: gif-export, Property 7: MP4 Export Regression
+ * 
+ * Note: This test validates that MP4 export configuration remains unchanged.
+ */
+describe('Property 7: MP4 Export Regression', () => {
+  it('should maintain valid MP4 quality presets', () => {
+    const qualityPresets = ['medium', 'good', 'source'];
+    
+    fc.assert(
+      fc.property(
+        fc.constantFrom(...qualityPresets),
+        (quality: string) => {
+          // Quality presets should be valid
+          expect(['medium', 'good', 'source']).toContain(quality);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should calculate valid MP4 export dimensions', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 640, max: 3840 }), // sourceWidth
+        fc.integer({ min: 480, max: 2160 }), // sourceHeight
+        fc.constantFrom('medium', 'good', 'source'),
+        (sourceWidth: number, sourceHeight: number, quality: string) => {
+          let exportWidth: number;
+          let exportHeight: number;
+          const aspectRatio = sourceWidth / sourceHeight;
+
+          if (quality === 'source') {
+            // Source quality uses original dimensions (may be odd)
+            exportWidth = sourceWidth;
+            exportHeight = sourceHeight;
+            
+            // Dimensions should be positive
+            expect(exportWidth).toBeGreaterThan(0);
+            expect(exportHeight).toBeGreaterThan(0);
+          } else {
+            const targetHeight = quality === 'medium' ? 720 : 1080;
+            exportHeight = Math.floor(targetHeight / 2) * 2;
+            exportWidth = Math.floor((exportHeight * aspectRatio) / 2) * 2;
+
+            // Dimensions should be positive and even for non-source quality
+            expect(exportWidth).toBeGreaterThan(0);
+            expect(exportHeight).toBeGreaterThan(0);
+            expect(exportWidth % 2).toBe(0);
+            expect(exportHeight % 2).toBe(0);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should maintain aspect ratio in MP4 export', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 640, max: 3840 }),
+        fc.integer({ min: 480, max: 2160 }),
+        fc.constantFrom('medium', 'good'),
+        (sourceWidth: number, sourceHeight: number, quality: string) => {
+          const originalAspectRatio = sourceWidth / sourceHeight;
+          const targetHeight = quality === 'medium' ? 720 : 1080;
+          
+          const exportHeight = Math.floor(targetHeight / 2) * 2;
+          const exportWidth = Math.floor((exportHeight * originalAspectRatio) / 2) * 2;
+          
+          const exportAspectRatio = exportWidth / exportHeight;
+          
+          // Aspect ratio should be preserved within tolerance (due to even rounding)
+          expect(Math.abs(originalAspectRatio - exportAspectRatio)).toBeLessThan(0.05);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+});
@@ -0,0 +1,319 @@
+import GIF from 'gif.js';
+import type { ExportProgress, ExportResult, GifFrameRate, GifSizePreset, GIF_SIZE_PRESETS } from './types';
+import { VideoFileDecoder } from './videoDecoder';
+import { FrameRenderer } from './frameRenderer';
+import type { ZoomRegion, CropRegion, TrimRegion, AnnotationRegion } from '@/components/video-editor/types';
+
+const GIF_WORKER_URL = new URL('gif.js/dist/gif.worker.js', import.meta.url).toString();
+
+interface GifExporterConfig {
+  videoUrl: string;
+  width: number;
+  height: number;
+  frameRate: GifFrameRate;
+  loop: boolean;
+  sizePreset: GifSizePreset;
+  wallpaper: string;
+  zoomRegions: ZoomRegion[];
+  trimRegions?: TrimRegion[];
+  showShadow: boolean;
+  shadowIntensity: number;
+  showBlur: boolean;
+  motionBlurEnabled?: boolean;
+  borderRadius?: number;
+  padding?: number;
+  videoPadding?: number;
+  cropRegion: CropRegion;
+  annotationRegions?: AnnotationRegion[];
+  previewWidth?: number;
+  previewHeight?: number;
+  onProgress?: (progress: ExportProgress) => void;
+}
+
+/**
+ * Calculate output dimensions based on size preset and source dimensions while preserving aspect ratio.
+ * @param sourceWidth - Original video width
+ * @param sourceHeight - Original video height
+ * @param sizePreset - The size preset to use
+ * @param sizePresets - The size presets configuration
+ * @returns The calculated output dimensions
+ */
+export function calculateOutputDimensions(
+  sourceWidth: number,
+  sourceHeight: number,
+  sizePreset: GifSizePreset,
+  sizePresets: typeof GIF_SIZE_PRESETS
+): { width: number; height: number } {
+  const preset = sizePresets[sizePreset];
+  const maxHeight = preset.maxHeight;
+
+  // If original is smaller than max height or preset is 'original', use source dimensions
+  if (sourceHeight <= maxHeight || sizePreset === 'original') {
+    return { width: sourceWidth, height: sourceHeight };
+  }
+
+  // Calculate scaled dimensions preserving aspect ratio
+  const aspectRatio = sourceWidth / sourceHeight;
+  const newHeight = maxHeight;
+  const newWidth = Math.round(newHeight * aspectRatio);
+
+  // Ensure dimensions are even (required for some encoders)
+  return {
+    width: newWidth % 2 === 0 ? newWidth : newWidth + 1,
+    height: newHeight % 2 === 0 ? newHeight : newHeight + 1,
+  };
+}
+
+export class GifExporter {
+  private config: GifExporterConfig;
+  private decoder: VideoFileDecoder | null = null;
+  private renderer: FrameRenderer | null = null;
+  private gif: GIF | null = null;
+  private cancelled = false;
+
+  constructor(config: GifExporterConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Calculate the total duration excluding trim regions (in seconds)
+   */
+  private getEffectiveDuration(totalDuration: number): number {
+    const trimRegions = this.config.trimRegions || [];
+    const totalTrimDuration = trimRegions.reduce((sum, region) => {
+      return sum + (region.endMs - region.startMs) / 1000;
+    }, 0);
+    return totalDuration - totalTrimDuration;
+  }
+
+  /**
+   * Map effective time (excluding trims) to source time (including trims)
+   */
+  private mapEffectiveToSourceTime(effectiveTimeMs: number): number {
+    const trimRegions = this.config.trimRegions || [];
+    // Sort trim regions by start time
+    const sortedTrims = [...trimRegions].sort((a, b) => a.startMs - b.startMs);
+
+    let sourceTimeMs = effectiveTimeMs;
+
+    for (const trim of sortedTrims) {
+      // If the source time hasn't reached this trim region yet, we're done
+      if (sourceTimeMs < trim.startMs) {
+        break;
+      }
+
+      // Add the duration of this trim region to the source time
+      const trimDuration = trim.endMs - trim.startMs;
+      sourceTimeMs += trimDuration;
+    }
+
+    return sourceTimeMs;
+  }
+
+  async export(): Promise<ExportResult> {
+    try {
+      this.cleanup();
+      this.cancelled = false;
+
+      // Initialize decoder and load video
+      this.decoder = new VideoFileDecoder();
+      const videoInfo = await this.decoder.loadVideo(this.config.videoUrl);
+
+      // Initialize frame renderer
+      this.renderer = new FrameRenderer({
+        width: this.config.width,
+        height: this.config.height,
+        wallpaper: this.config.wallpaper,
+        zoomRegions: this.config.zoomRegions,
+        showShadow: this.config.showShadow,
+        shadowIntensity: this.config.shadowIntensity,
+        showBlur: this.config.showBlur,
+        motionBlurEnabled: this.config.motionBlurEnabled,
+        borderRadius: this.config.borderRadius,
+        padding: this.config.padding,
+        cropRegion: this.config.cropRegion,
+        videoWidth: videoInfo.width,
+        videoHeight: videoInfo.height,
+        annotationRegions: this.config.annotationRegions,
+        previewWidth: this.config.previewWidth,
+        previewHeight: this.config.previewHeight,
+      });
+      await this.renderer.initialize();
+
+      // Initialize GIF encoder
+      // Loop: 0 = infinite loop, 1 = play once (no loop)
+      const repeat = this.config.loop ? 0 : 1;
+      
+      this.gif = new GIF({
+        workers: 4,
+        quality: 10,
+        width: this.config.width,
+        height: this.config.height,
+        workerScript: GIF_WORKER_URL,
+        repeat,
+        background: '#000000',
+        transparent: null,
+        dither: 'FloydSteinberg',
+      });
+
+      // Get the video element for frame extraction
+      const videoElement = this.decoder.getVideoElement();
+      if (!videoElement) {
+        throw new Error('Video element not available');
+      }
+
+      // Calculate effective duration and frame count (excluding trim regions)
+      const effectiveDuration = this.getEffectiveDuration(videoInfo.duration);
+      const totalFrames = Math.ceil(effectiveDuration * this.config.frameRate);
+      
+      // Calculate frame delay in milliseconds (gif.js uses ms)
+      const frameDelay = Math.round(1000 / this.config.frameRate);
+
+      console.log('[GifExporter] Original duration:', videoInfo.duration, 's');
+      console.log('[GifExporter] Effective duration:', effectiveDuration, 's');
+      console.log('[GifExporter] Total frames to export:', totalFrames);
+      console.log('[GifExporter] Frame rate:', this.config.frameRate, 'FPS');
+      console.log('[GifExporter] Frame delay:', frameDelay, 'ms');
+      console.log('[GifExporter] Loop:', this.config.loop ? 'infinite' : 'once');
+
+      // Process frames
+      const timeStep = 1 / this.config.frameRate;
+      let frameIndex = 0;
+
+      while (frameIndex < totalFrames && !this.cancelled) {
+        const i = frameIndex;
+        const timestamp = i * (1_000_000 / this.config.frameRate); // in microseconds
+
+        // Map effective time to source time (accounting for trim regions)
+        const effectiveTimeMs = (i * timeStep) * 1000;
+        const sourceTimeMs = this.mapEffectiveToSourceTime(effectiveTimeMs);
+        const videoTime = sourceTimeMs / 1000;
+
+        // Seek if needed
+        const needsSeek = Math.abs(videoElement.currentTime - videoTime) > 0.001;
+
+        if (needsSeek) {
+          const seekedPromise = new Promise<void>(resolve => {
+            videoElement.addEventListener('seeked', () => resolve(), { once: true });
+          });
+          
+          videoElement.currentTime = videoTime;
+          await seekedPromise;
+        } else if (i === 0) {
+          // Only for the very first frame, wait for it to be ready
+          await new Promise<void>(resolve => {
+            videoElement.requestVideoFrameCallback(() => resolve());
+          });
+        }
+
+        // Create a VideoFrame from the video element
+        const videoFrame = new VideoFrame(videoElement, {
+          timestamp,
+        });
+
+        // Render the frame with all effects using source timestamp
+        const sourceTimestamp = sourceTimeMs * 1000; // Convert to microseconds
+        await this.renderer!.renderFrame(videoFrame, sourceTimestamp);
+        
+        videoFrame.close();
+
+        // Get the rendered canvas and add to GIF
+        const canvas = this.renderer!.getCanvas();
+        
+        // Add frame to GIF encoder with delay
+        this.gif!.addFrame(canvas, { delay: frameDelay, copy: true });
+
+        frameIndex++;
+
+        // Update progress
+        if (this.config.onProgress) {
+          this.config.onProgress({
+            currentFrame: frameIndex,
+            totalFrames,
+            percentage: (frameIndex / totalFrames) * 100,
+            estimatedTimeRemaining: 0,
+          });
+        }
+      }
+
+      if (this.cancelled) {
+        return { success: false, error: 'Export cancelled' };
+      }
+
+      // Update progress to show we're now in the finalizing phase
+      if (this.config.onProgress) {
+        this.config.onProgress({
+          currentFrame: totalFrames,
+          totalFrames,
+          percentage: 100,
+          estimatedTimeRemaining: 0,
+          phase: 'finalizing',
+        });
+      }
+
+      // Render the GIF
+      const blob = await new Promise<Blob>((resolve, _reject) => {
+        this.gif!.on('finished', (blob: Blob) => {
+          resolve(blob);
+        });
+
+        // Track rendering progress
+        this.gif!.on('progress', (progress: number) => {
+          if (this.config.onProgress) {
+            this.config.onProgress({
+              currentFrame: totalFrames,
+              totalFrames,
+              percentage: 100,
+              estimatedTimeRemaining: 0,
+              phase: 'finalizing',
+              renderProgress: Math.round(progress * 100),
+            });
+          }
+        });
+
+        // gif.js doesn't have a typed 'error' event, but we can catch errors in the try/catch
+        this.gif!.render();
+      });
+
+      return { success: true, blob };
+    } catch (error) {
+      console.error('GIF Export error:', error);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+      };
+    } finally {
+      this.cleanup();
+    }
+  }
+
+  cancel(): void {
+    this.cancelled = true;
+    if (this.gif) {
+      this.gif.abort();
+    }
+    this.cleanup();
+  }
+
+  private cleanup(): void {
+    if (this.decoder) {
+      try {
+        this.decoder.destroy();
+      } catch (e) {
+        console.warn('Error destroying decoder:', e);
+      }
+      this.decoder = null;
+    }
+
+    if (this.renderer) {
+      try {
+        this.renderer.destroy();
+      } catch (e) {
+        console.warn('Error destroying renderer:', e);
+      }
+      this.renderer = null;
+    }
+
+    this.gif = null;
+  }
+}
@@ -2,5 +2,23 @@ export { VideoExporter } from './videoExporter';
 export { VideoFileDecoder } from './videoDecoder';
 export { FrameRenderer } from './frameRenderer';
 export { VideoMuxer } from './muxer';
-export type { ExportConfig, ExportProgress, ExportResult, VideoFrameData, ExportQuality } from './types';
+export { GifExporter, calculateOutputDimensions } from './gifExporter';
+export type { 
+  ExportConfig, 
+  ExportProgress, 
+  ExportResult, 
+  VideoFrameData, 
+  ExportQuality,
+  ExportFormat,
+  GifFrameRate,
+  GifSizePreset,
+  GifExportConfig,
+  ExportSettings,
+} from './types';
+export { 
+  GIF_SIZE_PRESETS, 
+  GIF_FRAME_RATES, 
+  VALID_GIF_FRAME_RATES, 
+  isValidGifFrameRate 
+} from './types';

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import * as fc from 'fast-check';
+import { 
+  isValidGifFrameRate, 
+  VALID_GIF_FRAME_RATES,
+  GifFrameRate 
+} from './types';
+
+/**
+ * Property 1: Valid Frame Rate Acceptance
+ * 
+ * *For any* frame rate value, the GIF_Exporter SHALL accept it if and only if 
+ * it is one of the valid presets (15, 20, 25, 30 FPS). Invalid frame rates 
+ * should be rejected with an error.
+ * 
+ * **Validates: Requirements 2.2**
+ * 
+ * Feature: gif-export, Property 1: Valid Frame Rate Acceptance
+ */
+describe('GIF Export Types', () => {
+  describe('Property 1: Valid Frame Rate Acceptance', () => {
+    // Property test: Valid frame rates should be accepted
+    it('should accept all valid frame rates (15, 20, 25, 30)', () => {
+      fc.assert(
+        fc.property(
+          fc.constantFrom(...VALID_GIF_FRAME_RATES),
+          (frameRate: GifFrameRate) => {
+            expect(isValidGifFrameRate(frameRate)).toBe(true);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+
+    // Property test: Invalid frame rates should be rejected
+    it('should reject any frame rate not in the valid set', () => {
+      fc.assert(
+        fc.property(
+          fc.integer().filter(n => !VALID_GIF_FRAME_RATES.includes(n as GifFrameRate)),
+          (invalidFrameRate: number) => {
+            expect(isValidGifFrameRate(invalidFrameRate)).toBe(false);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+
+    // Property test: Frame rate validation is deterministic
+    it('should return consistent results for the same input', () => {
+      fc.assert(
+        fc.property(
+          fc.integer({ min: 1, max: 60 }),
+          (frameRate: number) => {
+            const result1 = isValidGifFrameRate(frameRate);
+            const result2 = isValidGifFrameRate(frameRate);
+            expect(result1).toBe(result2);
+          }
+        ),
+        { numRuns: 100 }
+      );
+    });
+  });
+});
@@ -11,6 +11,8 @@ export interface ExportProgress {
  totalFrames: number;
  percentage: number;
  estimatedTimeRemaining: number; // in seconds
+  phase?: 'extracting' | 'finalizing'; // Phase of export
+  renderProgress?: number; // 0-100, progress of GIF rendering phase
 }

 export interface ExportResult {
@@ -26,3 +28,46 @@ export interface VideoFrameData {
 }

 export type ExportQuality = 'medium' | 'good' | 'source';
+
+// GIF Export Types
+export type ExportFormat = 'mp4' | 'gif';
+
+export type GifFrameRate = 15 | 20 | 25 | 30;
+
+export type GifSizePreset = 'medium' | 'large' | 'original';
+
+export interface GifExportConfig {
+  frameRate: GifFrameRate;
+  loop: boolean;
+  sizePreset: GifSizePreset;
+  width: number;
+  height: number;
+}
+
+export interface ExportSettings {
+  format: ExportFormat;
+  // MP4 settings
+  quality?: ExportQuality;
+  // GIF settings
+  gifConfig?: GifExportConfig;
+}
+
+export const GIF_SIZE_PRESETS: Record<GifSizePreset, { maxHeight: number; label: string }> = {
+  medium: { maxHeight: 720, label: 'Medium (720p)' },
+  large: { maxHeight: 1080, label: 'Large (1080p)' },
+  original: { maxHeight: Infinity, label: 'Original' },
+};
+
+export const GIF_FRAME_RATES: { value: GifFrameRate; label: string }[] = [
+  { value: 15, label: '15 FPS - Balanced' },
+  { value: 20, label: '20 FPS - Smooth' },
+  { value: 25, label: '25 FPS - Very smooth' },
+  { value: 30, label: '30 FPS - Maximum' },
+];
+
+// Valid frame rates for validation
+export const VALID_GIF_FRAME_RATES: readonly GifFrameRate[] = [15, 20, 25, 30] as const;
+
+export function isValidGifFrameRate(rate: number): rate is GifFrameRate {
+  return VALID_GIF_FRAME_RATES.includes(rate as GifFrameRate);
+}
@@ -7,6 +7,20 @@ module.exports = {
  ],
  theme: {
  	extend: {
+  		keyframes: {
+  			"accordion-down": {
+  				from: { height: "0" },
+  				to: { height: "var(--radix-accordion-content-height)" },
+  			},
+  			"accordion-up": {
+  				from: { height: "var(--radix-accordion-content-height)" },
+  				to: { height: "0" },
+  			},
+  		},
+  		animation: {
+  			"accordion-down": "accordion-down 0.2s ease-out",
+  			"accordion-up": "accordion-up 0.2s ease-out",
+  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
@@ -25,5 +25,6 @@
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "electron"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config'
+import path from 'node:path'
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+})
Author	SHA1	Message	Date
Sid	d5dbcb3a7a	Merge pull request #119 from IdrisGit/docs-move-issue-templates-from-markdown-to-yaml-forms docs: move issue templates to YAML forms	2026-01-31 20:55:21 -08:00
Sid	e1760020ac	Merge pull request #121 from IdrisGit/docs-readme-cleanup docs: add the beta warning at top and move assests to public	2026-01-31 20:53:32 -08:00
Siddharth	c8a4becaf0	version fix	2026-01-31 20:15:52 -08:00
Siddharth	e6db74f183	stale closure bug	2026-01-31 20:05:19 -08:00
Idris Gadi	271a3ee443	chore: remove unused svgs	2026-01-27 20:53:36 +05:30
Idris Gadi	cef987cd33	docs: add the beta warning at top and move assests to public moving the assests to public prevents root from getting populated with alot of files	2026-01-27 20:53:36 +05:30
Idris Gadi	23aced6007	docs: move issue templates to YAML forms Github has official support for forms (https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/syntax-for-issue-forms) forms are much easire and intuitive for people to fill out compared to markdown, this makes creating new issues easy and more structured. should also help with preventing random issues. I am intentionally not adding a blank template for now, if required it can be added later.	2026-01-27 14:43:29 +05:30
Sid	afbd0740a3	Merge pull request #117 from IdrisGit/fix-turn-off-motion-blur-by-default fix: set motion blur to disabled by default	2026-01-26 22:17:55 -08:00
Idris Gadi	f30e2d654e	fix: remove extra semi colon	2026-01-27 11:46:46 +05:30
Idris Gadi	f2c6d8ff0f	fix: set motion blur to disabled by default	2026-01-27 11:10:12 +05:30
Siddharth	9821e926d9	fix version	2026-01-24 22:45:07 -08:00
Siddharth	a2ca0799d4	accordion & settings cleanup	2026-01-20 21:10:22 -08:00
Siddharth	6d2e1edb5b	fix build errors	2026-01-20 20:05:14 -08:00
Sid	08f58b3539	Merge pull request #101 from Al-Farhan/bug/source-selector-tabs-content-height fix(ui): increase height for source selector tabs content	2026-01-16 19:20:45 -08:00
Farhan Shaikh	1586dbe65e	fix(ui): increase height for source selector tabs content	2026-01-13 16:42:19 +05:30
Sid	3a63617c55	Merge pull request #84 from solnikhil/export feat(export): add GIF exporting, Frame Rate & Output Size selection, and loop animation	2026-01-11 10:27:18 -08:00
Nikhil Solanki	e8d2c19b7d	Merge branch 'main' into export	2026-01-11 21:52:29 +05:30
Nikhil Solanki	23ede0fcfa	Update GIF export options to remove 10 FPS and small size Removed 10 FPS from valid GIF frame rates and the 'small' size preset from GIF export options. Updated UI grid layouts and tests to reflect these changes for consistency.	2026-01-11 21:50:42 +05:30
Sid	78cfb64f98	Merge pull request #97 from twinkalp10/bug/fix-bg-image-selection-height fix(ui): set minimum height for image selection tab in settings panel	2026-01-10 12:05:56 -08:00
Twinkal P	3124342309	fix(ui): set minimum height for image selection tab in settings panel	2026-01-10 17:33:11 +00:00
Sid	a9bd2ac820	Merge pull request #90 from gerrywastaken/claude/openscreen-linux-boot-performance-8Xq9v fix(linux): Greatly AppImage boot time from ~20s to ~2s	2026-01-01 12:05:13 -08:00
Claude	e190915c48	fix(linux): reduce AppImage boot time from ~50s to near-instant Change compression from "maximum" to "normal" for electron-builder. The "maximum" compression setting causes gzip/xz compression in the squashfs filesystem, which has extremely poor random access performance (~35 MB/s). This results in 50+ second boot times on Linux AppImage releases due to FUSE overhead during Electron's many small file reads at startup. With "normal" compression, the AppImage uses faster decompression algorithms, dramatically improving startup time while only marginally increasing package size. Refs: electron-userland/electron-builder#6317 Refs: electron-userland/electron-builder#7483	2026-01-01 01:52:44 +00:00
Sid	171a02aef4	Merge pull request #72 from ateendra24/fix-issue-34 feat: add tutorial help component for video trimming guidance	2025-12-28 19:03:35 -08:00
Nikhil Solanki	085ebad38f	Add custom hidden scrollbar styles and clean up code Introduced CSS classes to hide scrollbars while maintaining scrollability across browsers. Also removed unnecessary blank lines in frameRenderer.ts for code cleanliness.	2025-12-25 16:12:34 +05:30
Nikhil Solanki	f3e12629c2	Adjust layout and sizing of SettingsPanel tabs Updated the Tabs and TabsList components in SettingsPanel to use fixed min and max heights and improved flex properties for better layout consistency and scrolling behavior.	2025-12-25 15:09:26 +05:30
Nikhil Solanki	f00d381f94	fixed swloppy gitignore	2025-12-25 14:48:24 +05:30
Nikhil Solanki	fb92b0b6d9	/	2025-12-25 02:05:38 +05:30
Nikhil Solanki	8ca2b8362a	Update .gitignore	2025-12-25 02:02:08 +05:30
Nikhil Solanki	134f392553	Update .gitignore	2025-12-25 02:01:20 +05:30
Nikhil Solanki	c7e81c6b7f	Update .gitignore	2025-12-25 02:00:27 +05:30
Nikhil Solanki	f58b8b2897	Mega gitignore	2025-12-25 02:00:06 +05:30
Nikhil Solanki	6e6ecba172	Add GIF export feature to video editor Implements GIF export alongside MP4, including new export types, a GIF exporter module, UI components for format selection and GIF options, and integration into the export dialog and video editor. Adds property-based and unit tests for GIF export correctness, updates dependencies to include gif.js and related types, and refines Electron save dialog to support GIF files.	2025-12-25 01:50:02 +05:30
AP Solanki	175bb36eda	feat: add tutorial help component for video trimming guidance	2025-12-18 10:38:07 +05:30
Sid	2ca99136ba	Update README.md	2025-12-17 00:41:24 -07:00
Siddharth	b7485865f3	fix:Border radius appears smaller in export compared to preview	2025-12-16 13:52:53 -07:00
Sid	7db2fa4e01	Merge pull request #65 from LauZzL/feature/system-tray-icon feat(electron): implement dynamic tray icon and menu updates	2025-12-16 12:28:25 -08:00
LauZzL	81b59cad7c	feat(electron): implement dynamic tray icon and menu updates - Show "Stop Recording" menu & recording icon when recording - Show "Open/Quit" menu & default icon when not recording	2025-12-16 21:28:18 +08:00