Add offline CSS animation designer tool

[Copilot]

Build an offline-first single-page web application for visually designing CSS animations with real-time preview and code export capabilities. The tool should work without internet access and support all MDN-documented animation properties.

Note: Implementation incomplete due to tool execution issues during development session.

Planned Implementation

• UI Structure: Header strip, central canvas preview, left config panel, right animation panel, bottom timeline
• Element Management: Create/edit HTML elements (div, text, image, SVG), DOM tree with drag-drop nesting
• Properties Editor: Dimensions, positioning, box model, background, gradients, filters, shadows, text styling
• Animation Editor: Full MDN animation property support (duration, timing-function, delay, iteration-count, direction, fill-mode, play-state, composition)
• Keyframes Editor: Visual and raw CSS modes, percentage-based keyframes, property autocomplete
• Timeline: Multi-track view, playhead scrubbing, playback controls (play/pause/loop/rate)
• Easing Editors: Visual cubic-bezier curve editor, steps() configurator
• Export: HTML/CSS/JS code generation, copy to clipboard, ZIP download
• Persistence: localStorage autosave, JSON project import/export, undo/redo stack

Technical Approach

Single index.html with embedded CSS/JS, no external dependencies. Uses vanilla ES6+, localStorage for persistence, File/Blob APIs for export, requestAnimationFrame for timeline.

Original prompt

Herramienta offline de diseño visual para animaciones CSS (HTML/CSS/JS — sin dependencias)

Resumen

• Objetivo: construir una aplicación web offline (únicamente HTML, CSS y JavaScript sin dependencias externas) que permita diseñar visualmente animaciones CSS completas, previsualizarlas en tiempo real y exportar el código generado (HTML + CSS + JS si aplica). La aplicación debe permitir modificar absolutamente TODOS los valores que MDN documenta para animaciones CSS y keyframes, así como propiedades CSS que habitualmente se animan (transform, opacity, color, filter, etc.). Consultar MDN: “CSS Animations” y la documentación de @Keyframes para cubrir todas las propiedades y valores posibles.

Requerimientos funcionales clave (resumidos)

• Offline-first: la app debe funcionar completamente sin internet. No cargar recursos externos.
• Single-page app estática: un único HTML que contiene la app (o export de archivos estáticos), sin servidor necesario.
• Guardado/recuperación: autosave en localStorage, export/import de proyectos en JSON y descarga de proyecto como ZIP con los archivos HTML/CSS/JS generados.
• Export: Generar código listo para producción — 1) HTML autónomo con estilos embebidos o archivos separados, 2) CSS con @Keyframes y clases, 3) JS mínimo necesario (play/pause, timeline control). Botón “Copiar al portapapeles” y “Descargar”.
• Accesibilidad: etiquetas ARIA, navegación por teclado, contraste y descripciones.

Estructura de la UI (layout)

• Cabecera superior (strip): logo (nombre), botones globales: Nuevo proyecto, Abrir (importar JSON), Guardar (exportar JSON), Exportar (HTML/CSS/JS), Deshacer/ Rehacer, Ayuda (link offline con guía). Indicador de autosave.
• Canvas central grande (preview) — zona de previsualización con fondo configurable, rejilla opcional y reglas (rulers). El preview muestra el (los) elemento(s) seleccionados y su animación en tiempo real.
• Columna izquierda (configuración principal) — "Panel de configuración" (anclado, scrollable). Contenido en orden vertical:
  1. Creación / estructura HTML (arriba)
     • Botón “Añadir elemento”: opciones: div vacío, imagen (upload), texto, SVG simple, botón.
     • Árbol DOM sencillo (lista jerárquica) con drag & drop para anidar/desanidar, seleccionado actual con mini-preview y botón duplicar / eliminar.
     • Atributos del elemento seleccionado: id, class(es), tagName editable.
  2. Propiedades básicas del elemento (sección "Props")
     • Dimensiones: width (px/%/vw/vh), height, min/max.
     • Posicionamiento: display, position (static/relative/absolute/fixed/sticky), top/left/right/bottom, z-index.
     • Box model: margin, padding, border (width, style, color), box-sizing.
     • Background: color, imagen (upload), size, position, repeat, blend-mode.
     • Gradiente builder (intuitivo): elegir tipo (linear/radial/conic), añadir/quitar stops, arrastrar stops en barra, ángulo/posición, repeating toggle. Vista previa en vivo y CSS generado.
     • Shape / Contour: border-radius (per-corner), clip-path helper: circle/ellipse/inset/polygon editor con interfaz gráfica para mover puntos.
     • Text (si aplica): font-family (sistema), size, weight, line-height, letter-spacing, text-align, color.
     • Filters: blur, brightness, contrast, saturate, hue-rotate, drop-shadow — sliders con valores y campo numérico.
     • Box-shadow: multiple shadows editor (offset-x, offset-y, blur, spread, color, inset toggle).
  3. Estilos avanzados / raw CSS
     • Editor CSS raw para añadir cualquier regla extra al elemento (con validación básica).
• Panel central inferior (debajo del canvas): Timeline y controles de reproducción
  • Controles: Play/Pause, Stop (reset), Loop toggle, Playback rate slider (0.25x–4x), FPS toggle, Time scale (zoom in/out timeline).
  • Playhead con scrub (arrastrar), botón “Insertar keyframe aquí”.
  • Vista en capas por animación: para cada animación aplicada al elemento mostrar una fila en la timeline con keyframes visibles como marcadores arrastrables. Soporta múltiples animaciones simultáneas (cada una con su propio track).
  • Grid temporal (por % y segundos).
• Columna derecha (tres pestañas)
  1. Animations (editor de animaciones y keyframes) — pestaña por defecto
  2. Código generado / Export
  3. Presets & Gallery

Detalle: Panel “Animations” (derecha, pestaña activa)

• Lista de animaciones aplicadas al elemento seleccionado:
  • Botón “Añadir animación” (crear nueva animación con nombre editable).
  • Para cada animación: activar/desactivar (checkbox), duplicar, eliminar, reorder.
• Controles globales de la animación (campos editables):
  • animation-name (string)
  • animation-duration (number + unit s / ms)
  • animation-timing-function — selector con opciones: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(n,start|end), cubic-bezier editor (visual y inputs de 4 valores). Permitir ingresar funciones personalizadas (texto).
  • animation-delay (number + unit)
  • animation-iteration...

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[CorsoCoder]

@copilot arregla los errrores y termina el trabajo