feat: add Design tab with preset library, sliders, and apply functionality

components/editor/DesignPanel.tsx

@@ -0,0 +1,836 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { Sparkles, Layers, Box, Type, Zap, ChevronRight, Check } from 'lucide-react'
+
+interface DesignPanelProps {
+  onCodeUpdate?: (code: { html?: string; css?: string; js?: string }) => void
+}
+
+type Category = 'animations' | 'threejs' | 'ui' | 'text'
+
+interface Param {
+  label: string
+  key: string
+  type: 'range' | 'color' | 'select'
+  min?: number
+  max?: number
+  step?: number
+  default: number | string
+  options?: string[]
+  unit?: string
+}
+
+interface Preset {
+  id: string
+  name: string
+  description: string
+  category: Category
+  emoji: string
+  params: Param[]
+  generate: (params: Record<string, any>) => { html?: string; css?: string; js?: string }
+}
+
+const PRESETS: Preset[] = [
+  // ── ANIMATIONS ──────────────────────────────────────────────────────────────
+  {
+    id: 'fade-in',
+    name: 'Fade In',
+    description: 'Smooth opacity reveal on load',
+    category: 'animations',
+    emoji: '✨',
+    params: [
+      { label: 'Duration (s)', key: 'duration', type: 'range', min: 0.1, max: 3, step: 0.1, default: 1, unit: 's' },
+      { label: 'Delay (s)', key: 'delay', type: 'range', min: 0, max: 2, step: 0.1, default: 0.2, unit: 's' },
+    ],
+    generate: (p) => ({
+      css: `.fade-in {
+  animation: fadeIn ${p.duration}s ease forwards;
+  animation-delay: ${p.delay}s;
+  opacity: 0;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}`,
+      html: `<div class="fade-in">
+  <h2>Fade In Element</h2>
+  <p>This element fades in smoothly on load.</p>
+</div>`,
+    }),
+  },
+  {
+    id: 'pulse-glow',
+    name: 'Pulse Glow',
+    description: 'Rhythmic glowing border pulse',
+    category: 'animations',
+    emoji: '💫',
+    params: [
+      { label: 'Color', key: 'color', type: 'color', default: '#667eea' },
+      { label: 'Speed (s)', key: 'speed', type: 'range', min: 0.5, max: 4, step: 0.1, default: 1.5, unit: 's' },
+      { label: 'Intensity (px)', key: 'blur', type: 'range', min: 5, max: 40, step: 1, default: 20, unit: 'px' },
+    ],
+    generate: (p) => ({
+      css: `.pulse-glow {
+  animation: pulseGlow ${p.speed}s ease-in-out infinite;
+  border: 2px solid ${p.color};
+  border-radius: 12px;
+  padding: 24px;
+  display: inline-block;
+}
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: 0 0 ${p.blur}px ${p.color}; }
+  50%       { box-shadow: 0 0 ${Number(p.blur) * 2}px ${p.color}, 0 0 ${Number(p.blur) * 3}px ${p.color}44; }
+}`,
+      html: `<div class="pulse-glow">
+  <h3 style="color: ${p.color}; margin: 0">Pulse Glow</h3>
+  <p style="margin: 8px 0 0; opacity: 0.7">Glowing border element</p>
+</div>`,
+    }),
+  },
+  {
+    id: 'slide-in',
+    name: 'Slide In',
+    description: 'Direction-based slide entrance',
+    category: 'animations',
+    emoji: '➡️',
+    params: [
+      { label: 'Direction', key: 'dir', type: 'select', default: 'left', options: ['left', 'right', 'top', 'bottom'] },
+      { label: 'Duration (s)', key: 'duration', type: 'range', min: 0.2, max: 2, step: 0.1, default: 0.6, unit: 's' },
+      { label: 'Distance (px)', key: 'dist', type: 'range', min: 20, max: 200, step: 10, default: 60, unit: 'px' },
+    ],
+    generate: (p) => {
+      const transforms: Record<string, string> = {
+        left:   `translateX(-${p.dist}px)`,
+        right:  `translateX(${p.dist}px)`,
+        top:    `translateY(-${p.dist}px)`,
+        bottom: `translateY(${p.dist}px)`,
+      }
+      return {
+        css: `.slide-in {
+  animation: slideIn ${p.duration}s cubic-bezier(.22,.68,0,1.2) forwards;
+  opacity: 0;
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: ${transforms[p.dir as string]}; }
+  to   { opacity: 1; transform: translate(0); }
+}`,
+        html: `<div class="slide-in">
+  <h2>Slide In from ${p.dir}</h2>
+  <p>Slides in with a smooth easing curve.</p>
+</div>`,
+      }
+    },
+  },
+  {
+    id: 'stagger-list',
+    name: 'Stagger List',
+    description: 'Items reveal one after another',
+    category: 'animations',
+    emoji: '🎯',
+    params: [
+      { label: 'Stagger (ms)', key: 'stagger', type: 'range', min: 50, max: 400, step: 10, default: 120, unit: 'ms' },
+      { label: 'Color', key: 'color', type: 'color', default: '#8b9cff' },
+    ],
+    generate: (p) => ({
+      css: `.stagger-item {
+  opacity: 0;
+  transform: translateX(-20px);
+  animation: staggerReveal 0.5s ease forwards;
+}
+.stagger-item:nth-child(1) { animation-delay: ${Number(p.stagger) * 0}ms; }
+.stagger-item:nth-child(2) { animation-delay: ${Number(p.stagger) * 1}ms; }
+.stagger-item:nth-child(3) { animation-delay: ${Number(p.stagger) * 2}ms; }
+.stagger-item:nth-child(4) { animation-delay: ${Number(p.stagger) * 3}ms; }
+@keyframes staggerReveal {
+  to { opacity: 1; transform: translateX(0); }
+}
+.stagger-list { list-style: none; padding: 0; }
+.stagger-list li { padding: 8px 0; border-left: 3px solid ${p.color}; padding-left: 12px; margin-bottom: 8px; }`,
+      html: `<ul class="stagger-list">
+  <li class="stagger-item">First item</li>
+  <li class="stagger-item">Second item</li>
+  <li class="stagger-item">Third item</li>
+  <li class="stagger-item">Fourth item</li>
+</ul>`,
+    }),
+  },
+
+  // ── THREE.JS ────────────────────────────────────────────────────────────────
+  {
+    id: 'particle-field',
+    name: 'Particle Field',
+    description: 'Floating 3D particle system',
+    category: 'threejs',
+    emoji: '🌌',
+    params: [
+      { label: 'Count', key: 'count', type: 'range', min: 100, max: 2000, step: 50, default: 500 },
+      { label: 'Color', key: 'color', type: 'color', default: '#667eea' },
+      { label: 'Speed', key: 'speed', type: 'range', min: 0.1, max: 3, step: 0.1, default: 0.5 },
+      { label: 'Size', key: 'size', type: 'range', min: 0.01, max: 0.2, step: 0.01, default: 0.05 },
+    ],
+    generate: (p) => ({
+      html: `<canvas id="particle-canvas" style="width:100%;height:400px;display:block;background:#0a0a0a;border-radius:12px;"></canvas>`,
+      js: `(function() {
+  const script = document.createElement('script');
+  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+  script.onload = function() {
+    const canvas = document.getElementById('particle-canvas');
+    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
+    camera.position.z = 3;
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(${p.count} * 3);
+    for (let i = 0; i < ${p.count} * 3; i++) positions[i] = (Math.random() - 0.5) * 10;
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    const material = new THREE.PointsMaterial({ color: '${p.color}', size: ${p.size} });
+    const particles = new THREE.Points(geometry, material);
+    scene.add(particles);
+    function animate() {
+      requestAnimationFrame(animate);
+      particles.rotation.y += ${Number(p.speed) * 0.002};
+      particles.rotation.x += ${Number(p.speed) * 0.001};
+      renderer.render(scene, camera);
+    }
+    animate();
+  };
+  document.head.appendChild(script);
+})();`,
+    }),
+  },
+  {
+    id: 'rotating-cube',
+    name: 'Rotating Cube',
+    description: 'Smooth 3D rotating cube',
+    category: 'threejs',
+    emoji: '🎲',
+    params: [
+      { label: 'Color', key: 'color', type: 'color', default: '#764ba2' },
+      { label: 'Speed', key: 'speed', type: 'range', min: 0.1, max: 5, step: 0.1, default: 1 },
+      { label: 'Wireframe', key: 'wire', type: 'select', default: 'false', options: ['false', 'true'] },
+      { label: 'Size', key: 'size', type: 'range', min: 0.5, max: 3, step: 0.1, default: 1.5 },
+    ],
+    generate: (p) => ({
+      html: `<canvas id="cube-canvas" style="width:100%;height:360px;display:block;background:#0a0a0a;border-radius:12px;"></canvas>`,
+      js: `(function() {
+  const script = document.createElement('script');
+  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+  script.onload = function() {
+    const canvas = document.getElementById('cube-canvas');
+    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    renderer.setClearColor(0x0a0a0a);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
+    camera.position.z = 4;
+    const geometry = new THREE.BoxGeometry(${p.size}, ${p.size}, ${p.size});
+    const material = new THREE.MeshPhongMaterial({ color: '${p.color}', wireframe: ${p.wire} });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+    scene.add(new THREE.AmbientLight(0xffffff, 0.4));
+    const light = new THREE.DirectionalLight(0xffffff, 1);
+    light.position.set(5, 5, 5);
+    scene.add(light);
+    function animate() {
+      requestAnimationFrame(animate);
+      cube.rotation.x += ${Number(p.speed) * 0.01};
+      cube.rotation.y += ${Number(p.speed) * 0.015};
+      renderer.render(scene, camera);
+    }
+    animate();
+  };
+  document.head.appendChild(script);
+})();`,
+    }),
+  },
+  {
+    id: 'wave-plane',
+    name: 'Wave Plane',
+    description: 'Animated wave mesh surface',
+    category: 'threejs',
+    emoji: '🌊',
+    params: [
+      { label: 'Color', key: 'color', type: 'color', default: '#00d4ff' },
+      { label: 'Amplitude', key: 'amp', type: 'range', min: 0.1, max: 2, step: 0.05, default: 0.5 },
+      { label: 'Frequency', key: 'freq', type: 'range', min: 0.5, max: 5, step: 0.1, default: 2 },
+      { label: 'Speed', key: 'speed', type: 'range', min: 0.5, max: 5, step: 0.1, default: 2 },
+    ],
+    generate: (p) => ({
+      html: `<canvas id="wave-canvas" style="width:100%;height:360px;display:block;background:#0a0a0a;border-radius:12px;"></canvas>`,
+      js: `(function() {
+  const script = document.createElement('script');
+  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+  script.onload = function() {
+    const canvas = document.getElementById('wave-canvas');
+    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    renderer.setClearColor(0x0a0a0a);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
+    camera.position.set(0, 3, 5);
+    camera.lookAt(0, 0, 0);
+    const geo = new THREE.PlaneGeometry(10, 10, 40, 40);
+    const mat = new THREE.MeshWireframeBasicMaterial
+      ? new THREE.MeshBasicMaterial({ color: '${p.color}', wireframe: true })
+      : new THREE.MeshBasicMaterial({ color: '${p.color}', wireframe: true });
+    const plane = new THREE.Mesh(geo, mat);
+    plane.rotation.x = -Math.PI / 4;
+    scene.add(plane);
+    let t = 0;
+    function animate() {
+      requestAnimationFrame(animate);
+      t += 0.01 * ${p.speed};
+      const pos = geo.attributes.position;
+      for (let i = 0; i < pos.count; i++) {
+        const x = pos.getX(i), y = pos.getY(i);
+        pos.setZ(i, Math.sin(x * ${p.freq} + t) * ${p.amp} + Math.cos(y * ${p.freq} + t) * ${p.amp} * 0.5);
+      }
+      pos.needsUpdate = true;
+      renderer.render(scene, camera);
+    }
+    animate();
+  };
+  document.head.appendChild(script);
+})();`,
+    }),
+  },
+
+  // ── UI COMPONENTS ────────────────────────────────────────────────────────────
+  {
+    id: 'glass-card',
+    name: 'Glass Card',
+    description: 'Frosted glass morphism card',
+    category: 'ui',
+    emoji: '🪟',
+    params: [
+      { label: 'Blur (px)', key: 'blur', type: 'range', min: 4, max: 40, step: 1, default: 16, unit: 'px' },
+      { label: 'Opacity', key: 'opacity', type: 'range', min: 0.05, max: 0.4, step: 0.01, default: 0.1 },
+      { label: 'Border Color', key: 'border', type: 'color', default: '#ffffff' },
+      { label: 'Radius (px)', key: 'radius', type: 'range', min: 4, max: 40, step: 2, default: 20, unit: 'px' },
+    ],
+    generate: (p) => ({
+      css: `.glass-card {
+  background: rgba(255,255,255,${p.opacity});
+  backdrop-filter: blur(${p.blur}px);
+  -webkit-backdrop-filter: blur(${p.blur}px);
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: ${p.radius}px;
+  padding: 32px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+  color: #fff;
+  max-width: 360px;
+}`,
+      html: `<div style="background: linear-gradient(135deg,#667eea,#764ba2); padding: 40px; min-height: 200px; display:flex; align-items:center; justify-content:center;">
+  <div class="glass-card">
+    <h3 style="margin:0 0 8px">Glass Card</h3>
+    <p style="margin:0;opacity:0.8">Frosted glass morphism with backdrop blur effect.</p>
+  </div>
+</div>`,
+    }),
+  },
+  {
+    id: 'neon-button',
+    name: 'Neon Button',
+    description: 'Glowing neon CTA button',
+    category: 'ui',
+    emoji: '⚡',
+    params: [
+      { label: 'Color', key: 'color', type: 'color', default: '#00ff88' },
+      { label: 'Glow Size (px)', key: 'glow', type: 'range', min: 5, max: 40, step: 1, default: 15, unit: 'px' },
+      { label: 'Border (px)', key: 'border', type: 'range', min: 1, max: 4, step: 1, default: 2, unit: 'px' },
+    ],
+    generate: (p) => ({
+      css: `.neon-btn {
+  background: transparent;
+  color: ${p.color};
+  border: ${p.border}px solid ${p.color};
+  padding: 14px 32px;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 ${p.glow}px ${p.color}88, inset 0 0 ${p.glow}px ${p.color}22;
+  text-shadow: 0 0 8px ${p.color};
+}
+.neon-btn:hover {
+  background: ${p.color}22;
+  box-shadow: 0 0 ${Number(p.glow) * 2}px ${p.color}, inset 0 0 ${p.glow}px ${p.color}44;
+}`,
+      html: `<div style="background:#0a0a0a;padding:40px;display:flex;justify-content:center;">
+  <button class="neon-btn">Click Me</button>
+</div>`,
+    }),
+  },
+  {
+    id: 'gradient-card',
+    name: 'Gradient Card',
+    description: 'Animated gradient background card',
+    category: 'ui',
+    emoji: '🎨',
+    params: [
+      { label: 'Color 1', key: 'c1', type: 'color', default: '#667eea' },
+      { label: 'Color 2', key: 'c2', type: 'color', default: '#764ba2' },
+      { label: 'Color 3', key: 'c3', type: 'color', default: '#f64f59' },
+      { label: 'Speed (s)', key: 'speed', type: 'range', min: 2, max: 12, step: 0.5, default: 6, unit: 's' },
+    ],
+    generate: (p) => ({
+      css: `.gradient-card {
+  background: linear-gradient(270deg, ${p.c1}, ${p.c2}, ${p.c3});
+  background-size: 400% 400%;
+  animation: gradientShift ${p.speed}s ease infinite;
+  border-radius: 20px;
+  padding: 40px;
+  color: white;
+  max-width: 400px;
+}
+@keyframes gradientShift {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}`,
+      html: `<div class="gradient-card">
+  <h2 style="margin:0 0 12px">Gradient Card</h2>
+  <p style="margin:0;opacity:0.9">Animated flowing gradient background that shifts between colors.</p>
+</div>`,
+    }),
+  },
+  {
+    id: 'progress-bar',
+    name: 'Animated Progress',
+    description: 'Smooth animated progress bar',
+    category: 'ui',
+    emoji: '📊',
+    params: [
+      { label: 'Color', key: 'color', type: 'color', default: '#667eea' },
+      { label: 'Progress (%)', key: 'pct', type: 'range', min: 5, max: 100, step: 1, default: 75 },
+      { label: 'Height (px)', key: 'h', type: 'range', min: 4, max: 24, step: 2, default: 10, unit: 'px' },
+      { label: 'Duration (s)', key: 'dur', type: 'range', min: 0.5, max: 3, step: 0.1, default: 1.2, unit: 's' },
+    ],
+    generate: (p) => ({
+      css: `.progress-track {
+  background: rgba(255,255,255,0.1);
+  border-radius: 999px;
+  height: ${p.h}px;
+  overflow: hidden;
+  width: 100%;
+  max-width: 400px;
+}
+.progress-fill {
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, ${p.color}88, ${p.color});
+  border-radius: 999px;
+  animation: fillProgress ${p.dur}s cubic-bezier(.4,0,.2,1) forwards;
+  box-shadow: 0 0 12px ${p.color}88;
+}
+@keyframes fillProgress {
+  to { width: ${p.pct}%; }
+}`,
+      html: `<div style="padding:32px">
+  <p style="margin:0 0 8px;font-size:.85rem;opacity:.6">Loading... ${p.pct}%</p>
+  <div class="progress-track">
+    <div class="progress-fill"></div>
+  </div>
+</div>`,
+    }),
+  },
+
+  // ── TEXT EFFECTS ─────────────────────────────────────────────────────────────
+  {
+    id: 'typewriter',
+    name: 'Typewriter',
+    description: 'Character-by-character typing effect',
+    category: 'text',
+    emoji: '⌨️',
+    params: [
+      { label: 'Speed (ms)', key: 'speed', type: 'range', min: 20, max: 300, step: 10, default: 80, unit: 'ms' },
+      { label: 'Color', key: 'color', type: 'color', default: '#8b9cff' },
+      { label: 'Cursor Color', key: 'cursor', type: 'color', default: '#667eea' },
+    ],
+    generate: (p) => ({
+      css: `.typewriter-text {
+  color: ${p.color};
+  font-size: 1.5rem;
+  font-weight: 600;
+  border-right: 3px solid ${p.cursor};
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  animation: blink 0.75s step-end infinite;
+}
+@keyframes blink { 0%,100% { border-color: ${p.cursor}; } 50% { border-color: transparent; } }`,
+      html: `<div style="padding:32px">
+  <div id="tw-el" class="typewriter-text"></div>
+</div>`,
+      js: `(function(){
+  const el = document.getElementById('tw-el');
+  const text = 'Hello, World! 👋';
+  let i = 0;
+  function type() {
+    if (i < text.length) {
+      el.textContent += text[i++];
+      setTimeout(type, ${p.speed});
+    }
+  }
+  type();
+})();`,
+    }),
+  },
+  {
+    id: 'glitch-text',
+    name: 'Glitch Text',
+    description: 'Cyberpunk-style glitch distortion',
+    category: 'text',
+    emoji: '👾',
+    params: [
+      { label: 'Color', key: 'color', type: 'color', default: '#00ff88' },
+      { label: 'Speed (s)', key: 'speed', type: 'range', min: 0.5, max: 5, step: 0.1, default: 1.5, unit: 's' },
+      { label: 'Intensity (px)', key: 'dist', type: 'range', min: 2, max: 20, step: 1, default: 6, unit: 'px' },
+    ],
+    generate: (p) => ({
+      css: `.glitch {
+  font-size: 3rem;
+  font-weight: 900;
+  color: ${p.color};
+  position: relative;
+  display: inline-block;
+  text-transform: uppercase;
+  letter-spacing: 4px;
+}
+.glitch::before, .glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+.glitch::before {
+  color: #ff0044;
+  animation: glitchTop ${p.speed}s infinite;
+  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
+}
+.glitch::after {
+  color: #00eeff;
+  animation: glitchBot ${p.speed}s infinite;
+  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
+}
+@keyframes glitchTop {
+  0%,90%,100% { transform: translate(0); }
+  92% { transform: translate(-${p.dist}px, 1px); }
+  94% { transform: translate(${p.dist}px, -1px); }
+}
+@keyframes glitchBot {
+  0%,90%,100% { transform: translate(0); }
+  92% { transform: translate(${p.dist}px, 1px); }
+  94% { transform: translate(-${p.dist}px, -1px); }
+}`,
+      html: `<div style="background:#0a0a0a;padding:48px;display:flex;justify-content:center;">
+  <span class="glitch" data-text="GLITCH">GLITCH</span>
+</div>`,
+    }),
+  },
+  {
+    id: 'gradient-text',
+    name: 'Gradient Text',
+    description: 'Animated gradient flowing through text',
+    category: 'text',
+    emoji: '🌈',
+    params: [
+      { label: 'Color 1', key: 'c1', type: 'color', default: '#667eea' },
+      { label: 'Color 2', key: 'c2', type: 'color', default: '#f64f59' },
+      { label: 'Color 3', key: 'c3', type: 'color', default: '#ffd700' },
+      { label: 'Speed (s)', key: 'speed', type: 'range', min: 1, max: 8, step: 0.5, default: 3, unit: 's' },
+    ],
+    generate: (p) => ({
+      css: `.gradient-text {
+  font-size: 3rem;
+  font-weight: 900;
+  background: linear-gradient(90deg, ${p.c1}, ${p.c2}, ${p.c3}, ${p.c1});
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: textShift ${p.speed}s linear infinite;
+  display: inline-block;
+}
+@keyframes textShift {
+  0%   { background-position: 0% center; }
+  100% { background-position: 300% center; }
+}`,
+      html: `<div style="background:#0a0a0a;padding:48px;text-align:center;">
+  <span class="gradient-text">Beautiful Text</span>
+</div>`,
+    }),
+  },
+  {
+    id: 'split-reveal',
+    name: 'Split Reveal',
+    description: 'Words reveal with split-clip animation',
+    category: 'text',
+    emoji: '✂️',
+    params: [
+      { label: 'Duration (s)', key: 'dur', type: 'range', min: 0.3, max: 1.5, step: 0.05, default: 0.7, unit: 's' },
+      { label: 'Stagger (ms)', key: 'stagger', type: 'range', min: 50, max: 400, step: 25, default: 150, unit: 'ms' },
+      { label: 'Color', key: 'color', type: 'color', default: '#ffffff' },
+    ],
+    generate: (p) => ({
+      css: `.split-word {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  margin-right: 0.25em;
+}
+.split-inner {
+  display: inline-block;
+  transform: translateY(110%);
+  animation: splitReveal ${p.dur}s cubic-bezier(.16,1,.3,1) forwards;
+  color: ${p.color};
+  font-size: 2.5rem;
+  font-weight: 800;
+}
+.split-word:nth-child(1) .split-inner { animation-delay: 0ms; }
+.split-word:nth-child(2) .split-inner { animation-delay: ${p.stagger}ms; }
+.split-word:nth-child(3) .split-inner { animation-delay: ${Number(p.stagger) * 2}ms; }
+.split-word:nth-child(4) .split-inner { animation-delay: ${Number(p.stagger) * 3}ms; }
+@keyframes splitReveal { to { transform: translateY(0); } }`,
+      html: `<div style="padding:40px">
+  <div>
+    <span class="split-word"><span class="split-inner">Hello</span></span>
+    <span class="split-word"><span class="split-inner">Beautiful</span></span>
+    <span class="split-word"><span class="split-inner">World</span></span>
+    <span class="split-word"><span class="split-inner">✨</span></span>
+  </div>
+</div>`,
+    }),
+  },
+]
+
+const CATEGORIES: { id: Category; label: string; icon: React.ReactNode }[] = [
+  { id: 'animations', label: 'Animations', icon: <Zap className="w-4 h-4" /> },
+  { id: 'threejs',    label: '3D / Three.js', icon: <Box className="w-4 h-4" /> },
+  { id: 'ui',         label: 'UI Components', icon: <Layers className="w-4 h-4" /> },
+  { id: 'text',       label: 'Text Effects', icon: <Type className="w-4 h-4" /> },
+]
+
+export function DesignPanel({ onCodeUpdate }: DesignPanelProps) {
+  const [category, setCategory] = useState<Category>('animations')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [paramValues, setParamValues] = useState<Record<string, Record<string, any>>>({})
+  const [applied, setApplied] = useState<string | null>(null)
+
+  const visiblePresets = PRESETS.filter(p => p.category === category)
+
+  const getParam = useCallback((presetId: string, key: string, defaultVal: any) => {
+    return paramValues[presetId]?.[key] ?? defaultVal
+  }, [paramValues])
+
+  const setParam = useCallback((presetId: string, key: string, value: any) => {
+    setParamValues(prev => ({
+      ...prev,
+      [presetId]: { ...(prev[presetId] || {}), [key]: value }
+    }))
+  }, [])
+
+  const handleApply = useCallback((preset: Preset) => {
+    const resolved: Record<string, any> = {}
+    preset.params.forEach(p => {
+      resolved[p.key] = getParam(preset.id, p.key, p.default)
+    })
+    const code = preset.generate(resolved)
+    if (onCodeUpdate) onCodeUpdate(code)
+    setApplied(preset.id)
+    setTimeout(() => setApplied(null), 1800)
+  }, [getParam, onCodeUpdate])
+
+  const selectedPreset = PRESETS.find(p => p.id === selectedId)
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden" style={{ background: 'rgba(8,8,12,0.95)' }}>
+
+      {/* Header */}
+      <div className="px-4 py-3 flex items-center gap-2 flex-shrink-0" style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
+        <Sparkles className="w-4 h-4" style={{ color: '#8b9cff' }} />
+        <span className="text-sm font-semibold" style={{ color: '#8b9cff' }}>Design Library</span>
+        <span className="ml-auto text-xs" style={{ color: 'rgba(255,255,255,0.3)' }}>ReactBits · Three.js</span>
+      </div>
+
+      {/* Category Pills */}
+      <div className="flex gap-2 px-4 py-3 flex-shrink-0 overflow-x-auto" style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
+        {CATEGORIES.map(cat => (
+          <button
+            key={cat.id}
+            onClick={() => { setCategory(cat.id); setSelectedId(null) }}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-all"
+            style={category === cat.id ? {
+              background: 'rgba(102,126,234,0.25)',
+              color: '#8b9cff',
+              border: '1px solid rgba(102,126,234,0.4)',
+            } : {
+              background: 'rgba(255,255,255,0.04)',
+              color: 'rgba(255,255,255,0.5)',
+              border: '1px solid rgba(255,255,255,0.08)',
+            }}
+          >
+            {cat.icon}
+            {cat.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-1 overflow-hidden flex">
+
+        {/* Preset List */}
+        <div className="overflow-y-auto" style={{
+          width: selectedId ? '42%' : '100%',
+          borderRight: selectedId ? '1px solid rgba(255,255,255,0.08)' : 'none',
+          transition: 'width 0.25s ease',
+        }}>
+          <div className="p-3 grid gap-2" style={{ gridTemplateColumns: selectedId ? '1fr' : 'repeat(2, 1fr)' }}>
+            {visiblePresets.map(preset => (
+              <button
+                key={preset.id}
+                onClick={() => setSelectedId(selectedId === preset.id ? null : preset.id)}
+                className="text-left rounded-xl p-3 transition-all"
+                style={selectedId === preset.id ? {
+                  background: 'rgba(102,126,234,0.15)',
+                  border: '1px solid rgba(102,126,234,0.4)',
+                } : {
+                  background: 'rgba(255,255,255,0.03)',
+                  border: '1px solid rgba(255,255,255,0.07)',
+                }}
+              >
+                <div className="text-xl mb-1">{preset.emoji}</div>
+                <div className="text-xs font-semibold mb-0.5" style={{ color: selectedId === preset.id ? '#8b9cff' : '#fff' }}>
+                  {preset.name}
+                </div>
+                {!selectedId && (
+                  <div className="text-xs" style={{ color: 'rgba(255,255,255,0.4)' }}>
+                    {preset.description}
+                  </div>
+                )}
+                {selectedId === preset.id && (
+                  <ChevronRight className="w-3 h-3 mt-1" style={{ color: '#8b9cff' }} />
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Parameter Panel */}
+        {selectedPreset && (
+          <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-4">
+            <div>
+              <div className="text-base font-bold mb-0.5" style={{ color: '#fff' }}>
+                {selectedPreset.emoji} {selectedPreset.name}
+              </div>
+              <div className="text-xs" style={{ color: 'rgba(255,255,255,0.4)' }}>
+                {selectedPreset.description}
+              </div>
+            </div>
+
+            {/* Params */}
+            <div className="flex flex-col gap-4">
+              {selectedPreset.params.map(param => {
+                const val = getParam(selectedPreset.id, param.key, param.default)
+                return (
+                  <div key={param.key}>
+                    <div className="flex items-center justify-between mb-1.5">
+                      <label className="text-xs font-medium" style={{ color: 'rgba(255,255,255,0.6)' }}>
+                        {param.label}
+                      </label>
+                      {param.type === 'range' && (
+                        <span className="text-xs font-mono px-2 py-0.5 rounded" style={{
+                          background: 'rgba(102,126,234,0.15)',
+                          color: '#8b9cff',
+                        }}>
+                          {Number(val).toFixed(param.step && param.step < 0.1 ? 2 : param.step && param.step < 1 ? 1 : 0)}{param.unit || ''}
+                        </span>
+                      )}
+                    </div>
+
+                    {param.type === 'range' && (
+                      <input
+                        type="range"
+                        min={param.min}
+                        max={param.max}
+                        step={param.step}
+                        value={val}
+                        onChange={e => setParam(selectedPreset.id, param.key, parseFloat(e.target.value))}
+                        className="w-full h-1.5 rounded-full appearance-none cursor-pointer"
+                        style={{
+                          background: `linear-gradient(to right, #667eea ${((val - (param.min||0)) / ((param.max||1) - (param.min||0))) * 100}%, rgba(255,255,255,0.1) 0%)`,
+                          outline: 'none',
+                          accentColor: '#667eea',
+                        }}
+                      />
+                    )}
+
+                    {param.type === 'color' && (
+                      <div className="flex items-center gap-2">
+                        <input
+                          type="color"
+                          value={val}
+                          onChange={e => setParam(selectedPreset.id, param.key, e.target.value)}
+                          className="rounded cursor-pointer border-0"
+                          style={{ width: 40, height: 32, background: 'none' }}
+                        />
+                        <span className="text-xs font-mono" style={{ color: 'rgba(255,255,255,0.4)' }}>{val}</span>
+                      </div>
+                    )}
+
+                    {param.type === 'select' && (
+                      <select
+                        value={val}
+                        onChange={e => setParam(selectedPreset.id, param.key, e.target.value)}
+                        className="w-full px-3 py-2 rounded-lg text-sm"
+                        style={{
+                          background: 'rgba(255,255,255,0.06)',
+                          border: '1px solid rgba(255,255,255,0.12)',
+                          color: '#fff',
+                          outline: 'none',
+                        }}
+                      >
+                        {param.options?.map(opt => (
+                          <option key={opt} value={opt} style={{ background: '#1a1a2e' }}>{opt}</option>
+                        ))}
+                      </select>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+
+            {/* Apply Button */}
+            <button
+              onClick={() => handleApply(selectedPreset)}
+              className="w-full py-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 transition-all mt-2"
+              style={applied === selectedPreset.id ? {
+                background: 'rgba(0,200,100,0.2)',
+                border: '1px solid rgba(0,200,100,0.4)',
+                color: '#00c864',
+              } : {
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                color: '#fff',
+                boxShadow: '0 8px 24px rgba(102,126,234,0.3)',
+              }}
+            >
+              {applied === selectedPreset.id
+                ? <><Check className="w-4 h-4" /> Applied!</>
+                : <><Sparkles className="w-4 h-4" /> Apply to Project</>
+              }
+            </button>
+
+            {/* Code preview hint */}
+            <p className="text-center text-xs" style={{ color: 'rgba(255,255,255,0.25)' }}>
+              Injects into HTML, CSS &amp; JS tabs
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

components/editor/Editor.tsx

@@ -7,10 +7,11 @@ import { FooterAd } from '@/components/ads/FooterAd'
 import { CodeEditor } from '@/components/editor/CodeEditor'
 import { PreviewFrame } from '@/components/editor/PreviewFrame'
 import { AIChat } from '@/components/editor/AIChat'
-import { Code2, Eye, MessageSquare, Save, Upload, Maximize2, ArrowLeft } from 'lucide-react'
+import { DesignPanel } from '@/components/editor/DesignPanel'
+import { Code2, Eye, MessageSquare, Sparkles, Save, Upload, Maximize2, ArrowLeft } from 'lucide-react'
 import { getProject, updateProject, type LocalProject } from '@/lib/local-storage'
 
-type Tab = 'code' | 'preview' | 'chat'
+type Tab = 'code' | 'preview' | 'chat' | 'design'
 type CodeTab = 'html' | 'css' | 'js'
 
 interface EditorProps {
@@ -81,6 +82,16 @@ export function Editor({ projectId }: EditorProps) {
     reader.readAsText(file)
   }, [])
 
+  const handleDesignApply = useCallback((newCode: { html?: string; css?: string; js?: string }) => {
+    if (newCode.html) setHtmlCode(prev => prev + '\n\n' + newCode.html)
+    if (newCode.css)  setCssCode(prev => prev + '\n\n' + newCode.css)
+    if (newCode.js)   setJsCode(prev => prev + '\n\n' + newCode.js)
+    // Switch to code tab so user sees the applied code
+    setActiveTab('code')
+    if (newCode.css)  setActiveCodeTab('css')
+    if (newCode.html) setActiveCodeTab('html')
+  }, [])
+
   const combinedCode = `
 <!DOCTYPE html>
 <html>
@@ -207,6 +218,13 @@ export function Editor({ projectId }: EditorProps) {
           active={activeTab === 'chat'}
           onClick={() => setActiveTab('chat')}
         />
+        <TabButton
+          icon={<Sparkles className="w-4 h-4" />}
+          label="Design"
+          active={activeTab === 'design'}
+          onClick={() => setActiveTab('design')}
+          accent
+        />
       </div>
 
       {/* Main Content */}
@@ -261,6 +279,10 @@ export function Editor({ projectId }: EditorProps) {
             }}
           />
         )}
+
+        {activeTab === 'design' && (
+          <DesignPanel onCodeUpdate={handleDesignApply} />
+        )}
       </div>
 
       {/* Fullscreen Preview */}
@@ -285,17 +307,25 @@ export function Editor({ projectId }: EditorProps) {
   )
 }
 
-function TabButton({ icon, label, active, onClick }: { icon: React.ReactNode; label: string; active: boolean; onClick: () => void }) {
+function TabButton({
+  icon, label, active, onClick, accent
+}: {
+  icon: React.ReactNode
+  label: string
+  active: boolean
+  onClick: () => void
+  accent?: boolean
+}) {
   return (
     <button
       onClick={onClick}
       className="flex-1 py-3 px-4 flex items-center justify-center gap-2 text-sm font-medium transition-all duration-300"
       style={active ? {
-        color: '#8b9cff',
-        borderBottom: '2px solid #8b9cff',
-        background: 'rgba(102, 126, 234, 0.05)',
+        color: accent ? '#c084fc' : '#8b9cff',
+        borderBottom: `2px solid ${accent ? '#c084fc' : '#8b9cff'}`,
+        background: accent ? 'rgba(192,132,252,0.06)' : 'rgba(102, 126, 234, 0.05)',
       } : {
-        color: 'rgba(255,255,255,0.6)',
+        color: accent ? 'rgba(192,132,252,0.7)' : 'rgba(255,255,255,0.6)',
         borderBottom: '2px solid transparent',
       }}
     >