From aa890a0d55589774459b7e992507aeed3581ca30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sat, 28 Feb 2026 20:16:07 +0100 Subject: [PATCH] docs: update README with all 7 tools and current project structure Co-Authored-By: Claude Sonnet 4.6 --- README.md | 63 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 38 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 146a262..834c24e 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ [![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react)](https://react.dev) [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com) -**Kit UI** is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative toolsβ€”from advanced color manipulation to ASCII art generationβ€”into a single, unified workspace. +**Kit UI** is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative toolsβ€”from color manipulation and CSS animation editing to ASCII art generationβ€”into a single, unified workspace. Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers a lightning-fast, glassmorphic experience with a focus on precision and accessibility. @@ -13,42 +13,51 @@ Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers ## πŸš€ The Toolkit -Kit UI is divided into five core specialized applications: +Kit UI currently ships **7 tools**: -### 🎨 [Color](./app/(app)/color) β€” Professional Color Toolkit -A comprehensive suite for color theory, manipulation, and accessibility. +### 🎨 [Color](./app/(app)/color) β€” Color Manipulation +Modern color manipulation toolkit with palette generation and format conversion. - **Color Playground**: Interactive HSL/RGB/HEX manipulation with real-time analysis. - **Accessibility Suite**: WCAG 2.1 Contrast Checker and a real-time Colorblindness Simulator. - **Generative Tools**: Harmony generator (Analogous, Triadic, etc.), Palette Generator, and Gradient Architect. -- **Batch Processing**: Perform mass color operations and exports. - **WASM Powered**: Utilizes `@valknarthing/pastel-wasm` for high-performance color calculations. -### πŸ“ [Units](./app/(app)/units) β€” Smart Unit Converter -A powerful, intuitive converter that understands the way you work. -- **187+ Units**: Supporting 23 categories including Length, Mass, Temperature, Force, and more. -- **Smart Search**: Quickly find units via a fuzzy-search command palette. -- **Visual Comparison**: Dynamic chart views for comparing scale across different units. +### πŸ“ [Units](./app/(app)/units) β€” Units Converter +Smart unit converter with 187 units across 23 categories. +- **187+ Units**: Length, Mass, Temperature, Force, Digital Storage, and more. +- **Real-time Bidirectional Conversion**: Instant results as you type with fuzzy search. - **Favorites & History**: Save your most-used conversions for instant access. ### ✍️ [ASCII](./app/(app)/ascii) β€” ASCII Art Generator -Retro-inspired text banners for terminals and documentation. +Create stunning text banners, terminal art, and retro designs. - **373 Fonts**: From classic `Standard` to complex 3D and cursive styles. - **Real-time Preview**: See your ASCII art transform as you type. - **Multi-Export**: Copy as raw text, download `.txt` files, or export as `.png` images. -### 🎬 [Media](./app/(app)/media) β€” Browser-Based File Converter +### 🎬 [Media](./app/(app)/media) β€” Media Converter Privacy-first, local-only media conversion powered by WebAssembly. - **Video & Audio**: Transcode between MP4, WebM, MP3, WAV, and more using FFmpeg. - **Image Processing**: Convert and resize PNG, JPG, WebP, and SVG via ImageMagick. -- **Zero Server Uploads**: All processing happens locally in your browser for maximum privacy. -- **Advanced Options**: Fine-tune bitrates, codecs, resolutions, and quality presets. +- **Zero Server Uploads**: All processing happens locally in your browser. -### 🌐 [Favicon](./app/(app)/favicon) β€” Favicon & PWA Generator -Complete asset generation for modern web presence. -- **Complete Icon Set**: Generates standard favicons, Apple Touch icons, and Android Chrome icons. +### 🌐 [Favicon](./app/(app)/favicon) β€” Favicon Generator +Complete favicon and PWA asset generation for modern web presence. +- **Complete Icon Set**: Standard favicons, Apple Touch icons, and Android Chrome icons. - **PWA Manifest**: Automatically generates a standards-compliant `site.webmanifest`. - **HTML Snippets**: Copy-paste ready `` tags for easy integration. -- **Privacy-First**: Powered by ImageMagick WASMβ€”no server-side processing. + +### πŸ”² [QR Code](./app/(app)/qrcode) β€” QR Code Generator +Generate QR codes with live preview and full customization. +- **Custom Colors**: Foreground, background, and logo overlay support. +- **Error Correction**: Configurable L / M / Q / H error correction levels. +- **Export**: Download as PNG or SVG directly from the browser. + +### 🎞️ [Animate](./app/(app)/animate) β€” CSS Animation Editor +Visual editor for CSS `@keyframe` animations with live preview and export. +- **Visual Keyframe Timeline**: Drag keyframes, set per-frame transforms and visual properties. +- **20+ Built-in Presets**: Entrance, exit, attention seekers, and special effects. +- **Live Preview**: Real-time preview with speed control and element selector. +- **Export**: Plain CSS or Tailwind v4 `@utility` format. --- @@ -81,22 +90,26 @@ Complete asset generation for modern web presence. ```bash . β”œβ”€β”€ app/ # Next.js App Router (Pages & Layouts) -β”‚ β”œβ”€β”€ (app)/ # Core Tool Pages (Color, Units, ASCII, Media, Favicon) +β”‚ β”œβ”€β”€ (app)/ # Tool pages (color, units, ascii, media, favicon, qrcode, animate) β”‚ β”œβ”€β”€ manifest.ts # PWA manifest generation β”‚ └── api/ # Backend API routes β”œβ”€β”€ components/ # Reusable UI & Logic Components -β”‚ β”œβ”€β”€ color/ # Color-specific components +β”‚ β”œβ”€β”€ color/ # Color-specific components β”‚ β”œβ”€β”€ units/ # Converter-specific components -β”‚ β”œβ”€β”€ ascii/ # ASCII-specific components +β”‚ β”œβ”€β”€ ascii/ # ASCII-specific components β”‚ β”œβ”€β”€ media/ # Media conversion components -β”‚ β”œβ”€β”€ favicon/ # Favicon-specific components +β”‚ β”œβ”€β”€ favicon/ # Favicon-specific components +β”‚ β”œβ”€β”€ qrcode/ # QR code components +β”‚ β”œβ”€β”€ animate/ # CSS animation editor components β”‚ └── ui/ # Base Atomic Components (Buttons, Cards, etc.) β”œβ”€β”€ lib/ # Business Logic & Utilities -β”‚ β”œβ”€β”€ color/ # WASM wrappers & Color logic +β”‚ β”œβ”€β”€ color/ # WASM wrappers & Color logic β”‚ β”œβ”€β”€ units/ # Conversion algorithms -β”‚ β”œβ”€β”€ ascii/ # Font loading & ASCII generation +β”‚ β”œβ”€β”€ ascii/ # Font loading & ASCII generation β”‚ β”œβ”€β”€ media/ # FFmpeg & ImageMagick WASM orchestration -β”‚ └── favicon/ # Favicon generation logic +β”‚ β”œβ”€β”€ favicon/ # Favicon generation logic +β”‚ β”œβ”€β”€ qrcode/ # QR code generation logic +β”‚ └── animate/ # CSS builder, presets, and defaults β”œβ”€β”€ public/ # Static assets & ASCII fonts β”œβ”€β”€ Dockerfile # Multi-stage Docker build └── nginx.conf # Production Nginx configuration