# πŸ› οΈ Kit UI [![Production](https://img.shields.io/badge/Production-kit.pivoine.art-blue?style=for-the-badge)](https://kit.pivoine.art) [![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js)](https://nextjs.org) [![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 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. --- ## πŸš€ The Toolkit Kit UI currently ships **7 tools**: ### 🎨 [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. - **WASM Powered**: Utilizes `@valknarthing/pastel-wasm` for high-performance color calculations. ### πŸ“ [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 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) β€” 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. ### 🌐 [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. ### πŸ”² [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. --- ## ✨ Core Features - 🎭 **Glassmorphic UI**: A modern, translucent aesthetic with smooth Framer Motion transitions. - ⚑ **Turbopack Optimized**: Built for speed using the latest Next.js 16 Turbopack engine. - πŸ“± **Full PWA Support**: Installable application with offline usage capabilities and service worker integration. - β™Ώ **Accessibility First**: Integrated tools to ensure your designs meet global standards. - πŸ“± **Responsive & Fluid**: Tailored experience across mobile, tablet, and desktop. - πŸ› οΈ **Developer Friendly**: Keyboard shortcuts, command palettes, and URL-state sharing. - 🐳 **Production Ready**: Full Docker & Nginx integration for seamless deployment. --- ## πŸ’» Tech Stack - **Framework**: [Next.js 16](https://nextjs.org) (App Router, Static Export) - **Library**: [React 19](https://react.dev) - **Styling**: [Tailwind CSS 4](https://tailwindcss.com) (CSS-first configuration) - **Animations**: [Framer Motion](https://www.framer.com/motion/) - **State Management**: [Zustand](https://github.com/pmndrs/zustand) & [React Query](https://tanstack.com/query) - **Icons**: [Lucide React](https://lucide.dev) - **Type Safety**: [TypeScript 5](https://www.typescriptlang.org) --- ## πŸ—οΈ Project Structure ```bash . β”œβ”€β”€ app/ # Next.js App Router (Pages & Layouts) β”‚ β”œβ”€β”€ (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 β”‚ β”œβ”€β”€ units/ # Converter-specific components β”‚ β”œβ”€β”€ ascii/ # ASCII-specific components β”‚ β”œβ”€β”€ media/ # Media conversion 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 β”‚ β”œβ”€β”€ units/ # Conversion algorithms β”‚ β”œβ”€β”€ ascii/ # Font loading & ASCII generation β”‚ β”œβ”€β”€ media/ # FFmpeg & ImageMagick WASM orchestration β”‚ β”œβ”€β”€ 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 ``` --- ## πŸ› οΈ Development & Deployment ### Prerequisites - **Node.js**: 20.x or higher - **pnpm**: 9.x or higher ### Local Development ```bash # Clone and install pnpm install # Start development server with Turbopack pnpm dev ``` ### Production Build ```bash # Build for static export pnpm build # The output will be in the /out directory ``` ### Docker Deployment ```bash # Build locally docker build -t kit-ui . # Run with Nginx docker run -p 80:80 kit-ui ``` --- ## πŸ“ˆ Performance & Optimization - **Static Site Generation (SSG)**: Entire toolkit is exported as static HTML/JS for sub-second load times. - **Client-Side WASM**: Complex processing (FFmpeg, ImageMagick, Color) is offloaded to WebAssembly for native-level performance without server latency. - **CSS-First Configuration**: Leveraging Tailwind 4's native CSS variables for zero-runtime styling overhead. - **Automatic CI/CD**: GitHub Actions pipeline for multi-architecture Docker builds. --- ## πŸ“ License Β© 2026 [pivoine.art](https://pivoine.art). All rights reserved.