feat: add CSS Animation Editor tool

Comprehensive visual editor for CSS @keyframe animations:
- AnimationSettings: name, duration, delay, easing (incl. cubic-bezier), iteration, direction, fill-mode
- KeyframeTimeline: drag-to-reposition keyframe markers, click-track to add, delete selected
- KeyframeProperties: per-keyframe transform (translate/rotate/scale/skew), opacity, background-color, border-radius, blur, brightness via sliders
- AnimationPreview: live preview on box/circle/text element with play/pause/restart and speed control (0.25×–2×)
- PresetLibrary: 22 presets across Entrance/Exit/Attention/Special categories with animated thumbnails
- ExportPanel: plain CSS and Tailwind v4 @utility formats with copy and download

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

lib/tools.tsx

@@ -1,4 +1,4 @@
-import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon, QRCodeIcon } from '@/components/AppIcons';
+import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon, QRCodeIcon, AnimateIcon } from '@/components/AppIcons';
 
 export interface Tool {
   /** Short display name (e.g. "Color") */
@@ -86,6 +86,17 @@ export const tools: Tool[] = [
     icon: QRCodeIcon,
     badges: ['Open Source', 'Generator', 'Free'],
   },
+  {
+    shortTitle: 'Animate',
+    title: 'CSS Animation Editor',
+    navTitle: 'CSS Animations',
+    href: '/animate',
+    description: 'Visual editor for CSS keyframe animations with live preview.',
+    summary:
+      'Build and export CSS @keyframe animations visually. Configure timing, easing, transforms, and more — with a live preview and 20+ built-in presets. Export to plain CSS or Tailwind v4.',
+    icon: AnimateIcon,
+    badges: ['Open Source', 'CSS', 'Free'],
+  },
 ];
 
 /** Look up a tool by its href path */