Sebastian Krüger
6ecdc33933
Smaller variant for buttons that sit next to section labels in card headers (Preview, Color, Results rows). Applied to QRPreview, FontPreview, ColorManipulation, and FileConverter. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
🛠️ Kit UI
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 — 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-wasmfor high-performance color calculations.
📐 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 — ASCII Art Generator
Create stunning text banners, terminal art, and retro designs.
- 373 Fonts: From classic
Standardto complex 3D and cursive styles. - Real-time Preview: See your ASCII art transform as you type.
- Multi-Export: Copy as raw text, download
.txtfiles, or export as.pngimages.
🎬 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 — 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
<head>tags for easy integration.
🔲 QR Code — 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 — 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
@utilityformat.
🧮 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 (App Router, Static Export)
- Library: React 19
- Styling: Tailwind CSS 4 (CSS-first configuration)
- Animations: Framer Motion
- State Management: Zustand & React Query
- Math Engine: Math.js 15 (expression evaluation, compilation cache)
- Icons: Lucide React
- Type Safety: TypeScript 5
🏗️ Project Structure
.
├── 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
# Clone and install
pnpm install
# Start development server with Turbopack
pnpm dev
Production Build
# Build for static export
pnpm build
# The output will be in the /out directory
Docker Deployment
# 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. All rights reserved.