Sebastian Krüger
704695f14f
Major UX enhancements for better user feedback and discovery: **Toast Notification System** - Beautiful toast notifications with 3 types (success/error/info) - Auto-dismiss after 3 seconds - Slide-in animation from right - Color-coded by type (green/red/blue) - Dark mode support - Close button for manual dismiss - ToastProvider context for global access - Non-blocking UI overlay **Random Font Discovery** - Shuffle button in font selector - One-click random font selection - Toast notification shows selected font - Perfect for discovering new fonts - Located next to "Select Font" header **Enhanced Font Preview** - Font name badge display - Character count statistics - Line count statistics - Better visual hierarchy - Responsive stat display **Improved Feedback** - Toast on copy: "Copied to clipboard!" - Toast on share: "Shareable URL copied!" - Toast on random: "Random font: FontName" - Error toasts for failed operations - Removed temporary text replacement **Smooth Animations** - Slide-in animation for toasts - Fade-in animation class - Custom keyframe animations - CSS utility classes - Smooth transitions throughout **Technical Improvements** - useToast custom hook - Context-based state management - Auto-cleanup with setTimeout - Unique toast IDs - TypeScript types for toast system - Proper event propagation **Better UX** - No more jarring text replacements - Non-intrusive notifications - Professional feedback system - Discoverable random feature - Informative preview stats The app now feels polished and professional with proper user feedback! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Figlet UI
A modern, feature-rich web UI for generating ASCII art text using figlet.js with 373 fonts from the xero/figlet-fonts collection.
Features
- 373 Figlet Fonts - All .flf fonts from xero's curated collection
- Live Preview - Real-time rendering as you type
- Fuzzy Search - Quickly find fonts by name or style
- Visual Font Previews - See actual rendering in the selector
- Multiple Export Formats - Copy, download as text, PNG, or SVG
- Shareable URLs - Share your creations with encoded URLs
- Dark Mode - Eye-friendly interface
- Keyboard Shortcuts - Power user features
- Mobile Optimized - Works great on all devices
- Code Generation - Generate snippets for JS, Python, CLI
Tech Stack
- Next.js 16 - React framework with static export
- React 19 - Latest React with concurrent features
- TypeScript 5 - Type-safe development
- Tailwind CSS 4 - Modern utility-first CSS
- figlet.js - ASCII art rendering engine
- Fuse.js - Fuzzy search functionality
- Lucide React - Beautiful icon library
Development
Prerequisites
- Node.js 22+ (managed via nvm)
- pnpm (enabled via corepack)
Setup
# Install dependencies
pnpm install
# Run development server with Turbopack
pnpm dev
# Build for production (static export)
pnpm build
# Lint code
pnpm lint
The development server will be available at http://localhost:3000.
Docker Deployment
Build and run with Docker:
# Build Docker image
docker build -t figlet-ui .
# Run container
docker run -p 80:80 figlet-ui
The application will be available at http://localhost.
Project Structure
figlet-ui/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
├── lib/ # Utility functions and services
├── types/ # TypeScript type definitions
├── public/ # Static assets
├── Dockerfile # Multi-stage Docker build
├── nginx.conf # Nginx configuration for static serving
└── IMPLEMENTATION_PLAN.md # Detailed implementation roadmap
Why Figlet UI is Better Than TAAG
- More Fonts: 373 fonts vs ~300 on TAAG
- Modern UI/UX: Clean, responsive design with animations
- Better Search: Fuzzy search with visual previews
- More Export Options: PNG, SVG, code snippets, not just text
- Shareable Links: URL-encoded sharing
- Performance: Lazy loading, Web Workers for smooth experience
- Dark Mode: Built-in theme switching
- Keyboard Shortcuts: Power user efficiency
- Mobile First: Optimized for touch devices
License
MIT
Credits
- figlet.js by Patrick Gillespie
- xero/figlet-fonts - Curated font collection
- Original FIGlet project