feat: add templates, history, comparison mode, animations, and empty states

- Add text templates with 16 pre-made options across 4 categories (greeting, tech, fun, seasonal)
- Add copy history panel tracking last 10 copied items with restore functionality
- Add font comparison mode to view multiple fonts side-by-side (up to 6 fonts)
- Add smooth animations: slide-down, slide-up, scale-in, fade-in, pulse, and shimmer
- Add loading skeletons for better perceived performance
- Add EmptyState component with contextual messages and icons
- Add hover effects and transitions throughout the UI
- Improve visual feedback with animated badges and shadows

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/globals.css

@@ -116,6 +116,42 @@
   .slide-in-from-right-full {
     animation: slideInFromRight 0.3s ease-out;
   }
+
+  .slide-down {
+    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .slide-up {
+    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .scale-in {
+    animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .pulse-subtle {
+    animation: pulseSubtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .shimmer {
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.1),
+      transparent
+    );
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideInFromRight {
@@ -128,3 +164,54 @@
     opacity: 1;
   }
 }
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulseSubtle {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}

components/converter/ComparisonMode.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Copy, X, Download, GitCompare } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import type { FigletFont } from '@/types/figlet';
+
+export interface ComparisonModeProps {
+  text: string;
+  selectedFonts: string[];
+  fontResults: Record<string, string>;
+  onRemoveFont: (fontName: string) => void;
+  onCopyFont: (fontName: string, result: string) => void;
+  onDownloadFont: (fontName: string, result: string) => void;
+  className?: string;
+}
+
+export function ComparisonMode({
+  text,
+  selectedFonts,
+  fontResults,
+  onRemoveFont,
+  onCopyFont,
+  onDownloadFont,
+  className,
+}: ComparisonModeProps) {
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Font Comparison</h2>
+        <span className="text-sm text-muted-foreground">
+          {selectedFonts.length} font{selectedFonts.length !== 1 ? 's' : ''} selected
+        </span>
+      </div>
+
+      {selectedFonts.length === 0 ? (
+        <Card>
+          <EmptyState
+            icon={GitCompare}
+            title="No fonts selected for comparison"
+            description="Click the + icon next to any font in the font selector to add it to the comparison"
+            className="py-12"
+          />
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {selectedFonts.map((fontName, index) => (
+            <Card
+              key={fontName}
+              className="relative scale-in"
+              style={{ animationDelay: `${index * 50}ms` }}
+            >
+              <div className="p-4 space-y-3">
+                {/* Font Header */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-mono font-semibold px-2 py-1 bg-primary/10 text-primary rounded">
+                      {fontName}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onCopyFont(fontName, fontResults[fontName] || '')}
+                      className="h-8 w-8 p-0"
+                      title="Copy to clipboard"
+                    >
+                      <Copy className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onDownloadFont(fontName, fontResults[fontName] || '')}
+                      className="h-8 w-8 p-0"
+                      title="Download"
+                    >
+                      <Download className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onRemoveFont(fontName)}
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                      title="Remove from comparison"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </div>
+
+                {/* ASCII Art Preview */}
+                <div className="relative">
+                  <pre className="p-4 bg-muted rounded-md overflow-x-auto">
+                    <code className="text-xs font-mono whitespace-pre">
+                      {fontResults[fontName] || 'Loading...'}
+                    </code>
+                  </pre>
+                </div>
+
+                {/* Stats */}
+                {fontResults[fontName] && (
+                  <div className="flex gap-4 text-xs text-muted-foreground">
+                    <span>
+                      {fontResults[fontName].split('\n').length} lines
+                    </span>
+                    <span>
+                      {Math.max(
+                        ...fontResults[fontName].split('\n').map((line) => line.length)
+                      )} chars wide
+                    </span>
+                  </div>
+                )}
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

components/converter/FigletConverter.tsx

@@ -4,12 +4,20 @@ import * as React from 'react';
 import { TextInput } from './TextInput';
 import { FontPreview } from './FontPreview';
 import { FontSelector } from './FontSelector';
+import { TextTemplates } from './TextTemplates';
+import { HistoryPanel } from './HistoryPanel';
+import { ComparisonMode } from './ComparisonMode';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { GitCompare } from 'lucide-react';
 import { textToAscii } from '@/lib/figlet/figletService';
 import { getFontList } from '@/lib/figlet/fontLoader';
 import { debounce } from '@/lib/utils/debounce';
 import { addRecentFont } from '@/lib/storage/favorites';
+import { addToHistory, type HistoryItem } from '@/lib/storage/history';
 import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
 import { useToast } from '@/components/ui/Toast';
+import { cn } from '@/lib/utils/cn';
 import type { FigletFont } from '@/types/figlet';
 
 export function FigletConverter() {
@@ -18,6 +26,9 @@ export function FigletConverter() {
   const [asciiArt, setAsciiArt] = React.useState('');
   const [fonts, setFonts] = React.useState<FigletFont[]>([]);
   const [isLoading, setIsLoading] = React.useState(false);
+  const [isComparisonMode, setIsComparisonMode] = React.useState(false);
+  const [comparisonFonts, setComparisonFonts] = React.useState<string[]>([]);
+  const [comparisonResults, setComparisonResults] = React.useState<Record<string, string>>({});
   const { addToast } = useToast();
 
   // Load fonts and check URL params on mount
@@ -72,6 +83,7 @@ export function FigletConverter() {
 
     try {
       await navigator.clipboard.writeText(asciiArt);
+      addToHistory(text, selectedFont, asciiArt);
       addToast('Copied to clipboard!', 'success');
     } catch (error) {
       console.error('Failed to copy:', error);
@@ -115,24 +127,148 @@ export function FigletConverter() {
     addToast(`Random font: ${fonts[randomIndex].name}`, 'info');
   };
 
+  const handleSelectTemplate = (templateText: string) => {
+    setText(templateText);
+    addToast(`Template applied: ${templateText}`, 'info');
+  };
+
+  const handleSelectHistory = (item: HistoryItem) => {
+    setText(item.text);
+    setSelectedFont(item.font);
+    addToast(`Restored from history`, 'info');
+  };
+
+  // Comparison mode handlers
+  const handleToggleComparisonMode = () => {
+    const newMode = !isComparisonMode;
+    setIsComparisonMode(newMode);
+    if (newMode && comparisonFonts.length === 0) {
+      // Initialize with current font
+      setComparisonFonts([selectedFont]);
+    }
+    addToast(newMode ? 'Comparison mode enabled' : 'Comparison mode disabled', 'info');
+  };
+
+  const handleAddToComparison = (fontName: string) => {
+    if (comparisonFonts.includes(fontName)) {
+      addToast('Font already in comparison', 'info');
+      return;
+    }
+    if (comparisonFonts.length >= 6) {
+      addToast('Maximum 6 fonts for comparison', 'info');
+      return;
+    }
+    setComparisonFonts([...comparisonFonts, fontName]);
+    addToast(`Added ${fontName} to comparison`, 'success');
+  };
+
+  const handleRemoveFromComparison = (fontName: string) => {
+    setComparisonFonts(comparisonFonts.filter((f) => f !== fontName));
+    addToast(`Removed ${fontName} from comparison`, 'info');
+  };
+
+  const handleCopyComparisonFont = async (fontName: string, result: string) => {
+    try {
+      await navigator.clipboard.writeText(result);
+      addToHistory(text, fontName, result);
+      addToast(`Copied ${fontName} to clipboard!`, 'success');
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      addToast('Failed to copy', 'error');
+    }
+  };
+
+  const handleDownloadComparisonFont = (fontName: string, result: string) => {
+    const blob = new Blob([result], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `figlet-${fontName}-${Date.now()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // Generate comparison results
+  React.useEffect(() => {
+    if (!isComparisonMode || comparisonFonts.length === 0 || !text) return;
+
+    const generateComparisons = async () => {
+      const results: Record<string, string> = {};
+      for (const fontName of comparisonFonts) {
+        try {
+          results[fontName] = await textToAscii(text, fontName);
+        } catch (error) {
+          console.error(`Error generating ASCII art for ${fontName}:`, error);
+          results[fontName] = 'Error generating ASCII art';
+        }
+      }
+      setComparisonResults(results);
+    };
+
+    generateComparisons();
+  }, [isComparisonMode, comparisonFonts, text]);
+
   return (
     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
       {/* Left Column - Input and Preview */}
       <div className="lg:col-span-2 space-y-6">
+        {/* Comparison Mode Toggle */}
+        <Card className="scale-in">
+          <div className="p-4 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <GitCompare className={cn(
+                "h-4 w-4",
+                isComparisonMode ? "text-primary" : "text-muted-foreground"
+              )} />
+              <span className="text-sm font-medium">Comparison Mode</span>
+              {isComparisonMode && comparisonFonts.length > 0 && (
+                <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full font-medium slide-down">
+                  {comparisonFonts.length} {comparisonFonts.length === 1 ? 'font' : 'fonts'}
+                </span>
+              )}
+            </div>
+            <Button
+              variant={isComparisonMode ? 'default' : 'outline'}
+              size="sm"
+              onClick={handleToggleComparisonMode}
+              className={cn(isComparisonMode && "shadow-lg")}
+            >
+              {isComparisonMode ? 'Disable' : 'Enable'}
+            </Button>
+          </div>
+        </Card>
+
+        <TextTemplates onSelectTemplate={handleSelectTemplate} />
+
+        <HistoryPanel onSelectHistory={handleSelectHistory} />
+
         <TextInput
           value={text}
           onChange={setText}
           placeholder="Type your text here..."
         />
 
-        <FontPreview
+        {isComparisonMode ? (
-          text={asciiArt}
+          <ComparisonMode
-          font={selectedFont}
+            text={text}
-          isLoading={isLoading}
+            selectedFonts={comparisonFonts}
-          onCopy={handleCopy}
+            fontResults={comparisonResults}
-          onDownload={handleDownload}
+            onRemoveFont={handleRemoveFromComparison}
-          onShare={handleShare}
+            onCopyFont={handleCopyComparisonFont}
-        />
+            onDownloadFont={handleDownloadComparisonFont}
+          />
+        ) : (
+          <FontPreview
+            text={asciiArt}
+            font={selectedFont}
+            isLoading={isLoading}
+            onCopy={handleCopy}
+            onDownload={handleDownload}
+            onShare={handleShare}
+          />
+        )}
       </div>
 
       {/* Right Column - Font Selector */}
@@ -142,6 +278,9 @@ export function FigletConverter() {
           selectedFont={selectedFont}
           onSelectFont={setSelectedFont}
           onRandomFont={handleRandomFont}
+          isComparisonMode={isComparisonMode}
+          comparisonFonts={comparisonFonts}
+          onAddToComparison={handleAddToComparison}
         />
       </div>
     </div>

components/converter/FontPreview.tsx

@@ -4,7 +4,9 @@ import * as React from 'react';
 import { toPng } from 'html-to-image';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
-import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { useToast } from '@/components/ui/Toast';
 
@@ -171,12 +173,17 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
           )}
         >
           {isLoading ? (
-            <div className="absolute inset-0 flex items-center justify-center">
+            <div className="space-y-3">
-              <div className="text-sm text-muted-foreground">Generating...</div>
+              <Skeleton className="h-6 w-3/4" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-5/6" />
+              <Skeleton className="h-6 w-2/3" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-4/5" />
             </div>
           ) : text ? (
             <pre className={cn(
-              'font-mono whitespace-pre overflow-x-auto',
+              'font-mono whitespace-pre overflow-x-auto animate-in',
               fontSize === 'xs' && 'text-[10px]',
               fontSize === 'sm' && 'text-xs sm:text-sm',
               fontSize === 'base' && 'text-sm sm:text-base'
@@ -184,9 +191,12 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
               {text}
             </pre>
           ) : (
-            <div className="absolute inset-0 flex items-center justify-center">
+            <EmptyState
-              <div className="text-sm text-muted-foreground">Your ASCII art will appear here</div>
+              icon={Type}
-            </div>
+              title="Start typing to see your ASCII art"
+              description="Enter text in the input field above to generate ASCII art with the selected font"
+              className="py-8"
+            />
           )}
         </div>
       </div>

components/converter/FontSelector.tsx

@@ -4,7 +4,8 @@ import * as React from 'react';
 import Fuse from 'fuse.js';
 import { Input } from '@/components/ui/Input';
 import { Card } from '@/components/ui/Card';
-import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Search, X, Heart, Clock, List, Shuffle, Plus, Check } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { Button } from '@/components/ui/Button';
 import type { FigletFont } from '@/types/figlet';
@@ -15,12 +16,24 @@ export interface FontSelectorProps {
   selectedFont: string;
   onSelectFont: (fontName: string) => void;
   onRandomFont?: () => void;
+  isComparisonMode?: boolean;
+  comparisonFonts?: string[];
+  onAddToComparison?: (fontName: string) => void;
   className?: string;
 }
 
 type FilterType = 'all' | 'favorites' | 'recent';
 
-export function FontSelector({ fonts, selectedFont, onSelectFont, onRandomFont, className }: FontSelectorProps) {
+export function FontSelector({
+  fonts,
+  selectedFont,
+  onSelectFont,
+  onRandomFont,
+  isComparisonMode = false,
+  comparisonFonts = [],
+  onAddToComparison,
+  className
+}: FontSelectorProps) {
   const [searchQuery, setSearchQuery] = React.useState('');
   const [filter, setFilter] = React.useState<FilterType>('all');
   const [favorites, setFavorites] = React.useState<string[]>([]);
@@ -175,44 +188,82 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, onRandomFont,
         {/* Font List */}
         <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
           {filteredFonts.length === 0 ? (
-            <div className="text-sm text-muted-foreground text-center py-8">
+            <EmptyState
-              {filter === 'favorites' && 'No favorite fonts yet'}
+              icon={filter === 'favorites' ? Heart : filter === 'recent' ? Clock : Search}
-              {filter === 'recent' && 'No recent fonts'}
+              title={
-              {filter === 'all' && 'No fonts found'}
+                filter === 'favorites'
-            </div>
+                  ? 'No favorite fonts yet'
+                  : filter === 'recent'
+                  ? 'No recent fonts'
+                  : 'No fonts found'
+              }
+              description={
+                filter === 'favorites'
+                  ? 'Click the heart icon on any font to add it to your favorites'
+                  : filter === 'recent'
+                  ? 'Fonts you use will appear here'
+                  : searchQuery
+                  ? `Try a different search term`
+                  : undefined
+              }
+              className="py-8"
+            />
           ) : (
-            filteredFonts.map((font) => (
+            filteredFonts.map((font) => {
-              <div
+              const isInComparison = comparisonFonts.includes(font.name);
-                key={font.name}
+              return (
-                className={cn(
+                <div
-                  'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
+                  key={font.name}
-                  'hover:bg-accent hover:text-accent-foreground',
-                  selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
-                )}
-              >
-                <button
-                  onClick={() => onSelectFont(font.name)}
-                  className="flex-1 text-left"
-                >
-                  {font.name}
-                </button>
-                <button
-                  onClick={(e) => handleToggleFavorite(font.name, e)}
                   className={cn(
-                    'opacity-0 group-hover:opacity-100 transition-opacity',
+                    'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
-                    isFavorite(font.name) && 'opacity-100'
+                    'hover:bg-accent hover:text-accent-foreground',
+                    selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
                   )}
-                  aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
                 >
-                  <Heart
+                  <button
+                    onClick={() => onSelectFont(font.name)}
+                    className="flex-1 text-left"
+                  >
+                    {font.name}
+                  </button>
+                  {isComparisonMode && onAddToComparison && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onAddToComparison(font.name);
+                      }}
+                      className={cn(
+                        'opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded',
+                        isInComparison && 'opacity-100 bg-primary/10'
+                      )}
+                      aria-label={isInComparison ? 'In comparison' : 'Add to comparison'}
+                      disabled={isInComparison}
+                    >
+                      {isInComparison ? (
+                        <Check className="h-4 w-4 text-primary" />
+                      ) : (
+                        <Plus className="h-4 w-4 text-muted-foreground hover:text-primary" />
+                      )}
+                    </button>
+                  )}
+                  <button
+                    onClick={(e) => handleToggleFavorite(font.name, e)}
                     className={cn(
-                      'h-4 w-4 transition-colors',
+                      'opacity-0 group-hover:opacity-100 transition-opacity',
-                      isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
+                      isFavorite(font.name) && 'opacity-100'
                     )}
-                  />
+                    aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
-                </button>
+                  >
-              </div>
+                    <Heart
-            ))
+                      className={cn(
+                        'h-4 w-4 transition-colors',
+                        isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
+                      )}
+                    />
+                  </button>
+                </div>
+              );
+            })
           )}
         </div>
 

components/converter/HistoryPanel.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { History, X, Trash2, ChevronDown, ChevronUp, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { getHistory, clearHistory, removeHistoryItem, type HistoryItem } from '@/lib/storage/history';
+
+export interface HistoryPanelProps {
+  onSelectHistory: (item: HistoryItem) => void;
+  className?: string;
+}
+
+export function HistoryPanel({ onSelectHistory, className }: HistoryPanelProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [history, setHistory] = React.useState<HistoryItem[]>([]);
+
+  const loadHistory = React.useCallback(() => {
+    setHistory(getHistory());
+  }, []);
+
+  React.useEffect(() => {
+    loadHistory();
+    // Refresh history every 2 seconds when expanded
+    if (isExpanded) {
+      const interval = setInterval(loadHistory, 2000);
+      return () => clearInterval(interval);
+    }
+  }, [isExpanded, loadHistory]);
+
+  const handleClearAll = () => {
+    clearHistory();
+    loadHistory();
+  };
+
+  const handleRemove = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    removeHistoryItem(id);
+    loadHistory();
+  };
+
+  const formatTime = (timestamp: number) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return new Date(timestamp).toLocaleDateString();
+  };
+
+  return (
+    <Card className={className}>
+      <div className="p-4">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <History className="h-4 w-4" />
+            <span>Copy History</span>
+            <span className="text-xs text-muted-foreground">({history.length})</span>
+          </div>
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </button>
+
+        {isExpanded && (
+          <div className="mt-4 space-y-2 slide-down">
+            {history.length === 0 ? (
+              <EmptyState
+                icon={Clock}
+                title="No copy history yet"
+                description="Your recently copied ASCII art will appear here"
+              />
+            ) : (
+              <>
+                <div className="flex justify-end">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleClearAll}
+                    className="text-destructive hover:text-destructive"
+                  >
+                    <Trash2 className="h-3 w-3 mr-1" />
+                    Clear All
+                  </Button>
+                </div>
+
+                <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                  {history.map((item) => (
+                    <div
+                      key={item.id}
+                      onClick={() => onSelectHistory(item)}
+                      className="group relative p-3 bg-muted/50 hover:bg-accent hover:scale-[1.02] rounded-md cursor-pointer transition-all"
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="text-xs font-mono px-1.5 py-0.5 bg-primary/10 text-primary rounded">
+                              {item.font}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              {formatTime(item.timestamp)}
+                            </span>
+                          </div>
+                          <p className="text-xs truncate">{item.text}</p>
+                        </div>
+                        <button
+                          onClick={(e) => handleRemove(item.id, e)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-destructive/10 rounded"
+                        >
+                          <X className="h-3 w-3 text-destructive" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

components/converter/TextTemplates.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { TEXT_TEMPLATES, TEMPLATE_CATEGORIES } from '@/lib/constants/templates';
+
+export interface TextTemplatesProps {
+  onSelectTemplate: (text: string) => void;
+  className?: string;
+}
+
+export function TextTemplates({ onSelectTemplate, className }: TextTemplatesProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [selectedCategory, setSelectedCategory] = React.useState<string>('all');
+
+  const filteredTemplates = React.useMemo(() => {
+    if (selectedCategory === 'all') return TEXT_TEMPLATES;
+    return TEXT_TEMPLATES.filter(t => t.category === selectedCategory);
+  }, [selectedCategory]);
+
+  return (
+    <Card className={className}>
+      <div className="p-4">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-4 w-4" />
+            <span>Text Templates</span>
+            <span className="text-xs text-muted-foreground">({TEXT_TEMPLATES.length})</span>
+          </div>
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </button>
+
+        {isExpanded && (
+          <div className="mt-4 space-y-3 slide-down">
+            {/* Category Filter */}
+            <div className="flex gap-1 flex-wrap">
+              <button
+                onClick={() => setSelectedCategory('all')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded-md transition-colors',
+                  selectedCategory === 'all'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted hover:bg-muted/80'
+                )}
+              >
+                All
+              </button>
+              {TEMPLATE_CATEGORIES.map((cat) => (
+                <button
+                  key={cat.id}
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className={cn(
+                    'px-2 py-1 text-xs rounded-md transition-colors',
+                    selectedCategory === cat.id
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted hover:bg-muted/80'
+                  )}
+                >
+                  {cat.icon} {cat.label}
+                </button>
+              ))}
+            </div>
+
+            {/* Templates Grid */}
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+              {filteredTemplates.map((template) => (
+                <button
+                  key={template.id}
+                  onClick={() => onSelectTemplate(template.text)}
+                  className="px-3 py-2 text-xs bg-muted hover:bg-accent hover:scale-105 rounded-md transition-all text-left truncate"
+                  title={template.text}
+                >
+                  {template.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

components/ui/EmptyState.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+import { LucideIcon } from 'lucide-react';
+
+export interface EmptyStateProps {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-12 px-4 text-center', className)}>
+      {Icon && (
+        <div className="mb-4 rounded-full bg-muted p-3">
+          <Icon className="h-6 w-6 text-muted-foreground" />
+        </div>
+      )}
+      <h3 className="mb-2 text-sm font-semibold">{title}</h3>
+      {description && (
+        <p className="mb-4 text-sm text-muted-foreground max-w-sm">
+          {description}
+        </p>
+      )}
+      {action}
+    </div>
+  );
+}

components/ui/Skeleton.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils/cn';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export function SkeletonText({ className, ...props }: SkeletonProps) {
+  return (
+    <div className={cn('space-y-2', className)} {...props}>
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="h-4 w-4/6" />
+    </div>
+  );
+}

lib/constants/templates.ts

@@ -0,0 +1,38 @@
+export interface TextTemplate {
+  id: string;
+  label: string;
+  text: string;
+  category: 'greeting' | 'tech' | 'fun' | 'seasonal';
+}
+
+export const TEXT_TEMPLATES: TextTemplate[] = [
+  // Greetings
+  { id: 'hello', label: 'Hello', text: 'Hello!', category: 'greeting' },
+  { id: 'welcome', label: 'Welcome', text: 'Welcome', category: 'greeting' },
+  { id: 'hello-world', label: 'Hello World', text: 'Hello World', category: 'greeting' },
+
+  // Tech
+  { id: 'code', label: 'Code', text: 'CODE', category: 'tech' },
+  { id: 'dev', label: 'Developer', text: 'DEV', category: 'tech' },
+  { id: 'hack', label: 'Hack', text: 'HACK', category: 'tech' },
+  { id: 'terminal', label: 'Terminal', text: 'Terminal', category: 'tech' },
+  { id: 'git', label: 'Git', text: 'Git', category: 'tech' },
+
+  // Fun
+  { id: 'awesome', label: 'Awesome', text: 'AWESOME', category: 'fun' },
+  { id: 'cool', label: 'Cool', text: 'COOL', category: 'fun' },
+  { id: 'epic', label: 'Epic', text: 'EPIC', category: 'fun' },
+  { id: 'wow', label: 'Wow', text: 'WOW!', category: 'fun' },
+
+  // Seasonal
+  { id: 'happy-birthday', label: 'Happy Birthday', text: 'Happy Birthday!', category: 'seasonal' },
+  { id: 'congrats', label: 'Congrats', text: 'Congrats!', category: 'seasonal' },
+  { id: 'thanks', label: 'Thanks', text: 'Thanks!', category: 'seasonal' },
+];
+
+export const TEMPLATE_CATEGORIES = [
+  { id: 'greeting', label: 'Greetings', icon: '👋' },
+  { id: 'tech', label: 'Tech', icon: '💻' },
+  { id: 'fun', label: 'Fun', icon: '🎉' },
+  { id: 'seasonal', label: 'Seasonal', icon: '🎊' },
+] as const;

lib/storage/history.ts

@@ -0,0 +1,53 @@
+'use client';
+
+export interface HistoryItem {
+  id: string;
+  text: string;
+  font: string;
+  result: string;
+  timestamp: number;
+}
+
+const HISTORY_KEY = 'figlet-ui-history';
+const MAX_HISTORY = 10;
+
+export function getHistory(): HistoryItem[] {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const stored = localStorage.getItem(HISTORY_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function addToHistory(text: string, font: string, result: string): void {
+  let history = getHistory();
+
+  const newItem: HistoryItem = {
+    id: `${Date.now()}-${Math.random()}`,
+    text,
+    font,
+    result,
+    timestamp: Date.now(),
+  };
+
+  // Add to beginning
+  history.unshift(newItem);
+
+  // Keep only MAX_HISTORY items
+  history = history.slice(0, MAX_HISTORY);
+
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+}
+
+export function clearHistory(): void {
+  localStorage.removeItem(HISTORY_KEY);
+}
+
+export function removeHistoryItem(id: string): void {
+  const history = getHistory();
+  const filtered = history.filter(item => item.id !== id);
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
+}

lib/utils/animations.ts

@@ -0,0 +1,38 @@
+// Animation utility classes and keyframes
+
+export const fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export const slideUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -20 },
+};
+
+export const slideDown = {
+  initial: { opacity: 0, y: -20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 20 },
+};
+
+export const scaleIn = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 },
+};
+
+export const staggerChildren = {
+  animate: {
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+};
+
+export const staggerItem = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+};