142 lines
6.1 KiB
Markdown
142 lines
6.1 KiB
Markdown
# 🛠️ Kit UI
|
|
|
|
[](https://kit.pivoine.art)
|
|
[](https://nextjs.org)
|
|
[](https://react.dev)
|
|
[](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.
|
|
|
|
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 is divided into four core specialized applications:
|
|
|
|
### 🎨 [Color](./app/(app)/color) — Professional Color Toolkit
|
|
A comprehensive suite for color theory, manipulation, and accessibility.
|
|
- **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.
|
|
- **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.
|
|
- **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
|
|
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.
|
|
|
|
---
|
|
|
|
## ✨ 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.
|
|
- ♿ **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)/ # Core Tool Pages (Color, Units, ASCII, Media)
|
|
│ └── 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
|
|
│ └── 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
|
|
├── 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.
|