FiGif

A browser-focused GIF maker for creating animated stickers with trim, crop, and local rendering.

About the project

FiGif is a web application for turning videos into GIFs ready to use on WhatsApp and other platforms. The main idea is to keep the core processing on the client with FFmpeg WebAssembly, reducing reliance on external infrastructure and preserving user privacy.

In addition to local uploads, the app can also fetch videos from X/Twitter through a Node.js + Express proxy, working around browser CORS limitations.

What the app does

• Local video upload in the browser
• Video import from X/Twitter
• Trim a section of the video before GIF generation
• Inline visual crop of the generated GIF
• Final GIF quality adjustment
• Local processing with progress feedback
• Dark brutalist interface focused on speed and readability

Stack

• Frontend: Svelte 5 + Vite + TypeScript
• Styling: Plain CSS
• Icons: lucide-svelte
• Media processing: @ffmpeg/ffmpeg + @ffmpeg/util
• Supporting backend: Node.js + Express + CORS
• Containerization: Docker + Docker Compose + Nginx

How to run locally

Prerequisites

• Node.js 22+ recommended
• npm

1. Install dependencies

npm install

2. Start the backend

In one terminal:

npm run server

The proxy will be available at http://localhost:3001.

3. Start the frontend

In another terminal:

npm run dev

The frontend will usually be available at http://localhost:5173.

How to run with Docker Compose

1. Configure the environment

The project already includes a .env file with the frontend public port:

FIGIF_PORT=8080

If needed, adjust this value before starting the containers.

2. Start the services

docker compose up --build

After that, the application will be available at:

http://localhost:8080

Compose service structure

• frontend: production build of the Svelte app served by Nginx
• backend: Express proxy for X/Twitter video integration

Nginx forwards /api/* routes to the backend automatically.

Useful scripts

npm run dev
npm run server
npm run build
npm run preview
npm run check

Usage flow

1. Upload a local video or paste an X/Twitter link
2. Choose the segment that will be turned into a GIF
3. Generate the GIF in the browser
4. Crop the desired area directly on the result screen
5. Adjust the quality, then copy or download the final file

Notes

• GIF processing may take a few seconds depending on the video and device.
• For X/Twitter video import to work, the backend must be running.
• The app uses specific frontend headers for compatibility with FFmpeg WebAssembly.