ThumbGen

✨ Generate beautiful thumbnails from videos, animations, images, and text — all in your browser! 🚀

- A modern, privacy-first thumbnail generation tool with zero server dependencies -
^{_{Powered by Canvas API and modern web technologies ツ}}

✨ Features

🎬 Video Thumbnail Generator - Extract perfect frames from MP4, WebM, and OGG videos
🎨 Lottie/TGS Thumbnail Generator - Generate thumbnails from Lottie animations and Telegram stickers
🔗 Base64 Image Converter - Create tiny placeholders for progressive loading
✍️ Text Thumbnail Generator - Design custom text-based thumbnails with fonts and backgrounds
🛡️ Watermark Tool - Add text or image watermarks with batch processing
🔒 100% Private - All processing happens in your browser, no data uploaded
🚀 Zero Dependencies - No registration, no login, no tracking
📱 Responsive Design - Works perfectly on desktop and mobile
🎯 Batch Processing - Process multiple files at once with ZIP export
🌐 PWA Ready - Works offline after first visit

🛠️ Tools Overview

Video Thumbnail Generator

Extract frames from video files with precise control:

Supported formats: MP4, WebM, OGG
Frame selection: Seekbar navigation with frame-by-frame control
Batch capture: Capture multiple frames and export as ZIP
Custom sizing: Adjustable output dimensions and quality
Perfect for: YouTube thumbnails, video previews, course materials

Lottie/TGS Thumbnail Generator

Generate static images from animated content:

Supported formats: Lottie JSON, TGS stickers
Frame extraction: Pick any frame from the animation
High quality: Vector-based rendering for crisp output
Perfect for: Animation portfolios, sticker previews, UI documentation

Base64 Image Converter

Create ultra-light image placeholders:

Tiny sizes: 2px to 32px preview generation
Progressive loading: Smooth transition effects
Code generation: HTML, CSS, React, Vue snippets
Size optimization: See exact byte savings
Perfect for: Website performance, blur-up effects, email templates

Text Thumbnail Generator

Design custom text-based graphics:

Canvas control: Custom dimensions with social media presets
Typography: Multiple fonts, sizes, weights, and effects
Backgrounds: Solid colors, gradients, or custom images
Text effects: Shadows, strokes, and positioning controls
Perfect for: Social media posts, blog headers, quote cards

Watermark Tool

Protect and brand your images:

Dual support: Text and image watermarks
Positioning: 9 preset positions plus custom placement
Styling: Opacity, rotation, and size controls
Batch processing: Watermark multiple images at once
Perfect for: Photography protection, brand placement, content marking

🚀 Quick Start

Online Usage

Visit thumb-gen.malith.dev and start generating thumbnails immediately!

📦 Deployment Options

🚀 One-Click Deployments

Deploy instantly to popular platforms:

🐳 Docker

Run ThumbGen in a container:

# Pull and run
docker pull malithrukshan/thumb-gen
docker run -p 3000:3000 malithrukshan/thumb-gen

Visit http://localhost:3000

Docker Compose

Create a docker-compose.yml file:

version: '3.8'

services:
  thumb-gen:
    image: malithrukshan/thumb-gen
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    restart: unless-stopped

Run with:

docker-compose up -d

Building Docker Image Locally

# Build the image
docker build -t thumb-gen .

# Run the container
docker run -p 3000:3000 thumb-gen

Local Development

Prerequisites

Bun (recommended) or Node.js 18+
Git

Setup

Clone the repository

git clone https://github.com/Malith-Rukshan/thumb-gen.git
cd thumb-gen

Install dependencies
```
bun install
```
Start development server
```
bun run dev
```
Open your browser
```
Visit http://localhost:3000
```

Available Scripts

# Development
bun run dev          # Start development server
bun run build        # Build for production
bun run preview      # Preview production build

# Testing
bun run test         # Run tests in watch mode
bun run test:run     # Run tests once
bun run test:ui      # Run tests with UI
bun run test:coverage # Run tests with coverage

# Code Quality
bun run lint         # Lint and fix code
bun run format       # Format code with Prettier
bun run type-check   # Check TypeScript types

☁️ Platform-Specific Deployment

Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Netlify

# Install Netlify CLI
npm i -g netlify-cli

# Deploy
netlify deploy --prod --dir=dist

Heroku

# Install Heroku CLI and login
git push heroku main

🧪 Testing

ThumbGen includes comprehensive test coverage:

# Run all tests
bun run test

# Run tests with coverage
bun run test:coverage

# Run tests with UI
bun run test:ui

🌐 Use Cases

Content Creation: Generate thumbnails for YouTube videos, blog posts, and social media
Web Development: Create base64 placeholders for better loading experiences
Design Workflows: Quickly prototype text-based graphics and layouts
Brand Protection: Add watermarks to images for copyright protection
Educational Content: Extract frames from video tutorials and presentations
Marketing Materials: Design eye-catching graphics for campaigns

🔧 Technology Stack

Framework: Vue.js 3 with Composition API
Language: TypeScript for type safety
Styling: Tailwind CSS 4 for modern UI
Routing: Vue Router 4 for SPA navigation
State Management: Pinia for reactive state
Build Tool: Vite for fast development and building
Testing: Vitest with Vue Test Utils
Package Manager: Bun for fast dependency management

📚 API Reference

Canvas Utilities

// Create a canvas element
const canvas = createCanvas(width, height)

// Resize an image
const resizedCanvas = await resizeImage(image, newWidth, newHeight)

// Generate base64 preview
const base64 = await generateBase64Preview(canvas, quality)

File Helpers

// Format file size
const size = formatFileSize(bytes) // "1.5 MB"

// Format duration
const duration = formatDuration(seconds) // "2:05"

// Validate image file
const isValid = validateImageFile(file) // boolean

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository

Create a feature branch

git checkout -b feature/amazing-feature

Make your changes
Add tests for new functionality

Run the test suite

bun run test
bun run lint
bun run type-check

Commit your changes
```
git commit -m 'Add amazing feature'
```

Push to your branch

git push origin feature/amazing-feature

Open a Pull Request

Development Guidelines

Write tests for new features
Follow the existing code style
Use TypeScript for type safety
Add JSDoc comments for complex functions
Update documentation for API changes

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔧 Acknowledgements

Built with Vue.js and TypeScript
Styled with Tailwind CSS
Icons by Lucide
Animations powered by Lottie Web
File compression with JSZip

🌟 Support

If you found ThumbGen helpful, please:

⭐ Star this repository on GitHub
🐛 Report bugs via GitHub Issues
💡 Suggest features via GitHub Discussions
🤝 Contribute by opening Pull Requests

📬 Contact

Email: [email protected]
GitHub: Malith-Rukshan
Live Demo: thumb-gen.malith.dev

🧑‍💻 Built with 💖 by Malith Rukshan