https://github.com/malith-rukshan/thumb-gen
๐จ Free online thumbnail generator for videos, Lottie animations, images & text. Privacy-first, runs entirely in your browser.
https://github.com/malith-rukshan/thumb-gen
developer-tools lottie placeholder pwa self-hosted thumbnail-generator thumbnails vuejs
Last synced: 4 months ago
JSON representation
๐จ Free online thumbnail generator for videos, Lottie animations, images & text. Privacy-first, runs entirely in your browser.
- Host: GitHub
- URL: https://github.com/malith-rukshan/thumb-gen
- Owner: Malith-Rukshan
- License: mit
- Created: 2025-05-26T10:42:06.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-27T22:58:56.000Z (5 months ago)
- Last Synced: 2025-06-02T12:48:24.504Z (5 months ago)
- Topics: developer-tools, lottie, placeholder, pwa, self-hosted, thumbnail-generator, thumbnails, vuejs
- Language: Vue
- Homepage: https://thumb-gen.malith.dev
- Size: 303 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ThumbGen
[](https://vuejs.org/)
[](https://www.typescriptlang.org/)
[](https://hub.docker.com/r/malithrukshan/thumb-gen)
โจ 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
## ๐ฆ Deployment Options
### ๐ One-Click Deployments
Deploy instantly to popular platforms:
[](https://vercel.com/new/clone?repository-url=https://github.com/Malith-Rukshan/thumb-gen)
[](https://app.netlify.com/start/deploy?repository=https://github.com/Malith-Rukshan/thumb-gen)
[](https://railway.app/template/iV-Ljt)
[](https://render.com/deploy?repo=https://github.com/Malith-Rukshan/thumb-gen)
### ๐ณ Docker
Run [ThumbGen](https://hub.docker.com/r/malithrukshan/thumb-gen) in a container:
```bash
# 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:
```yaml
version: '3.8'
services:
thumb-gen:
image: malithrukshan/thumb-gen
ports:
- "3000:3000"
environment:
- NODE_ENV=production
restart: unless-stopped
```
Run with:
```bash
docker-compose up -d
```
#### Building Docker Image Locally
```bash
# Build the image
docker build -t thumb-gen .
# Run the container
docker run -p 3000:3000 thumb-gen
```
### Local Development
#### Prerequisites
- [Bun](https://bun.sh/) (recommended) or Node.js 18+
- Git
#### Setup
1. **Clone the repository**
```bash
git clone https://github.com/Malith-Rukshan/thumb-gen.git
cd thumb-gen
```
2. **Install dependencies**
```bash
bun install
```
3. **Start development server**
```bash
bun run dev
```
4. **Open your browser**
```
Visit http://localhost:3000
```
#### Available Scripts
```bash
# 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
```bash
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod
```
#### Netlify
```bash
# Install Netlify CLI
npm i -g netlify-cli
# Deploy
netlify deploy --prod --dir=dist
```
#### Heroku
```bash
# Install Heroku CLI and login
git push heroku main
```
## ๐งช Testing
ThumbGen includes comprehensive test coverage:
```bash
# 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**
```bash
git checkout -b feature/amazing-feature
```
3. **Make your changes**
4. **Add tests** for new functionality
5. **Run the test suite**
```bash
bun run test
bun run type-check
```
6. **Commit your changes**
```bash
git commit -m 'Add amazing feature'
```
7. **Push to your branch**
```bash
git push origin feature/amazing-feature
```
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](LICENSE) file for details.
## ๐ง Acknowledgements
- Built with [Vue.js](https://vuejs.org/) and [TypeScript](https://www.typescriptlang.org/)
- Styled with [Tailwind CSS](https://tailwindcss.com/)
- Icons by [Lucide](https://lucide.dev/)
- Animations powered by [Lottie Web](https://github.com/airbnb/lottie-web)
- File compression with [JSZip](https://stuk.github.io/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**: [hello@malith.dev](mailto:hello@malith.dev)
- **GitHub**: [Malith-Rukshan](https://github.com/Malith-Rukshan)
- **Live Demo**: [thumb-gen.malith.dev](https://thumb-gen.malith.dev)
---