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

Demo : thumb-gen.malith.dev

📦 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 format       # Format code with Prettier
bun run type-check   # Check TypeScript types

Click to view Results

Test with : https://vitest.dev/

☁️ 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

🤝 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 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

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
.github/workflows		.github/workflows
.vscode		.vscode
public		public
src		src
tests		tests
.dockerignore		.dockerignore
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
app.json		app.json
bun.lock		bun.lock
docker-compose.yml		docker-compose.yml
index.html		index.html
netlify.toml		netlify.toml
nginx.conf		nginx.conf
package.json		package.json
railway.toml		railway.toml
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

License

Malith-Rukshan/thumb-gen

Folders and files

Latest commit

History

Repository files navigation