malithrukshan/thumb-gen repository overview

⁠ThumbGen

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

⁠✨ 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

⁠📦 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

1. Clone the repository

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

   Copy

2. Install dependencies

   bun install
   

   Copy

3. Start development server

   bun run dev
   

   Copy

4. Open your browser

   Visit http://localhost:3000
   

   Copy

⁠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:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature
   

   Copy
3. Make your changes
4. Add tests for new functionality
5. Run the test suite

   bun run test
   bun run type-check
   

   Copy
6. Commit your changes

   git commit -m 'Add amazing feature'
   

   Copy
7. Push to your branch

   git push origin feature/amazing-feature
   

   Copy
8. 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⁠