# ๐Ÿ› ๏ธ 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 **8 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. ### ๐Ÿงฎ [Calculate](./app/(app)/calculate) โ€” Calculator & Grapher Advanced mathematical expression evaluator with an interactive function grapher. - **Full Math.js Engine**: Trig, logarithms, complex numbers, matrices, factorials, combinatorics, and more. - **Named Variables**: Define and reuse variables (`x = 5`) across expressions and graph functions. - **32 Quick-Insert Keys**: One-click constants (ฯ€, e, ฯ†) and functions (sin, ln, gcd, nCrโ€ฆ). - **Interactive Graph**: Plot up to 8 simultaneous color-coded functions with pan (drag) and zoom (scroll); crosshair tooltip shows coordinates and per-function values. --- ## โœจ 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) - **Math Engine**: [Math.js 15](https://mathjs.org) (expression evaluation, compilation cache) - **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, calculate) โ”‚ โ”œโ”€โ”€ 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 โ”‚ โ”œโ”€โ”€ calculate/ # Calculator & grapher 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 โ”‚ โ””โ”€โ”€ calculate/ # Math.js engine, graph sampler, Zustand store โ”œโ”€โ”€ 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.