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>

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 },
+};