🎨 AnimeCSS Playground

🚀 Editor de código en tiempo real para animaciones CSS y JavaScript avanzadas

🌟 Demo en Vivo • 📖 Documentación • 🐛 Reportar Bug • 💡 Solicitar Feature

---

📋 Tabla de Contenidos

• ✨ Características
• 🎯 Demo y Capturas
• 🚀 Instalación Rápida
• 💻 Uso
• 🛠️ Tecnologías
• 📁 Estructura del Proyecto
• 🎨 Ejemplos de Código
• 🤝 Contribuir
• 📄 Licencia
• ☕ Apoyar el Proyecto

---

✨ Características

🎭 Editor Avanzado

• 🖥️ Monaco Editor con syntax highlighting completo
• 🎨 Autocompletado inteligente para CSS, JavaScript y librerías
• 🔍 Detección automática de errores en tiempo real
• 📱 Responsive design para todos los dispositivos

🚀 Compilación en Tiempo Real

• ⚡ Hot reload instantáneo sin pérdida de estado
• 🔄 Preprocesadores CSS (Sass, Less, Stylus)
• 📦 Transpilación JavaScript (ES6+, TypeScript)
• 🎯 Optimización automática de código

🎪 Animaciones Avanzadas

• 🌟 Anime.js integrado con snippets predefinidos
• 🎬 GSAP Premium con licencia incluida
• 🎨 CSS Animations con timeline visual
• 🎭 Three.js para animaciones 3D

📚 Gestión de Librerías

• 🔗 CDN Manager inteligente con cache local
• 📦 Autodetección de dependencias en el código
• 🌐 Soporte offline para librerías populares
• 🔄 Versionado automático de librerías

💾 Persistencia y Proyectos

• 💿 Base de datos local con SQL.js
• 📁 Gestión de proyectos con categorías
• 🔖 Sistema de bookmarks para snippets favoritos
• 📤 Exportación a CodePen, JSFiddle y archivos

---

🎯 Demo y Capturas

🌟 Interfaz Principal

┌─────────────────────────────────────────────────────────────┐
│  🎨 AnimeCSS Playground                    [⚙️] [👤] [📁]  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  📝 Editor CSS/JS          │  🖥️ Preview en Vivo            │
│  ┌─────────────────────┐   │  ┌─────────────────────────┐   │
│  │ .animated-box {     │   │  │                         │   │
│  │   animation: bounce │   │  │    🎭 Animación         │   │
│  │   1s infinite;      │   │  │    en tiempo real       │   │
│  │ }                   │   │  │                         │   │
│  └─────────────────────┘   │  └─────────────────────────┘   │
│                             │                               │
│  📚 Librerías              │  🎛️ Configuración             │
│  ┌─────────────────────┐   │  ┌─────────────────────────┐   │
│  │ ✅ Anime.js v3.2.1  │   │  │ 🎨 Tema: Dark           │   │
│  │ ✅ GSAP v3.12.2     │   │  │ 📱 Responsive: On       │   │
│  │ ⬜ Three.js         │   │  │ ⚡ Hot Reload: On        │   │
│  └─────────────────────┘   │  └─────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

🎬 Ejemplos de Animaciones

Animación con Anime.js:

anime({
  targets: '.animated-element',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800,
  easing: 'easeInOutQuad'
});

Animación CSS avanzada:

@keyframes morphing {
  0% { border-radius: 0%; transform: rotate(0deg); }
  50% { border-radius: 50%; transform: rotate(180deg); }
  100% { border-radius: 0%; transform: rotate(360deg); }
}

.morph-element {
  animation: morphing 2s ease-in-out infinite;
}

---

🚀 Instalación Rápida

📋 Prerrequisitos

• 📦 Node.js 18+ (Descargar aquí)
• 🔧 npm o pnpm (incluido con Node.js)
• 🌐 Navegador moderno (Chrome, Firefox, Safari, Edge)

⚡ Instalación en 3 pasos

# 1️⃣ Clonar el repositorio
git clone https://github.com/SwonDev/AnimeCSS-Playground.git
cd AnimeCSS-Playground

# 2️⃣ Instalar dependencias
npm install
# o si prefieres pnpm:
# pnpm install

# 3️⃣ Iniciar el servidor de desarrollo
npm run dev

🎉 ¡Listo! Abre tu navegador en http://localhost:5173

🐳 Docker (Opcional)

# Construir imagen
docker build -t animecss-playground .

# Ejecutar contenedor
docker run -p 5173:5173 animecss-playground

---

💻 Uso

🎯 Inicio Rápido

1. 🚀 Ejecuta el proyecto:

   npm run dev

2. 🎨 Crea tu primera animación:

   • Selecciona un snippet de ejemplo
   • Modifica el código CSS/JS
   • Ve los cambios en tiempo real

3. 📚 Añade librerías:

   • Usa el CDN Manager
   • Selecciona las librerías que necesites
   • Se cargan automáticamente

🛠️ Comandos Disponibles

# 🚀 Desarrollo
npm run dev          # Servidor de desarrollo
npm run build        # Compilar para producción
npm run preview      # Preview de la build
npm run lint         # Linter de código

# 🧪 Testing
npm run test         # Ejecutar tests
npm run test:watch   # Tests en modo watch

# 🔧 Utilidades
npm run clean        # Limpiar cache y node_modules
npm run analyze      # Analizar bundle size

🎨 Personalización

Configurar tema:

// src/stores/playgroundStore.js
const themeConfig = {
  dark: {
    background: '#1a1a1a',
    foreground: '#ffffff',
    accent: '#ff6b6b'
  }
};

Añadir snippets personalizados:

// src/data/snippetsIniciales.js
export const customSnippets = [
  {
    name: "Mi Animación",
    css: "/* Tu CSS aquí */",
    js: "/* Tu JavaScript aquí */",
    libraries: ["anime"]
  }
];

---

🛠️ Tecnologías

🎯 Frontend Core

• ⚛️ React 18 - Biblioteca de UI con hooks
• ⚡ Vite 5 - Build tool ultrarrápido
• 🎨 TailwindCSS - Framework CSS utility-first
• 📝 Monaco Editor - Editor de código de VS Code

🎪 Animaciones

• 🌟 Anime.js - Librería de animaciones JavaScript
• 🎬 GSAP - Animaciones profesionales
• 🎭 Framer Motion - Animaciones para React
• 🎨 CSS Animations - Animaciones nativas

🔧 Herramientas

• 📦 Zustand - Gestión de estado
• 💾 SQL.js - Base de datos en el navegador
• 🌐 WebAssembly - Rendimiento nativo
• 🔍 ESLint + Prettier - Calidad de código

🎨 UI/UX

• 🎭 ShadCN UI - Componentes accesibles
• 🎨 Lucide Icons - Iconos modernos
• 📱 Responsive Design - Adaptable a todos los dispositivos
• 🌙 Dark/Light Mode - Temas personalizables

---

📁 Estructura del Proyecto

AnimeCSS-Playground/
├── 📁 public/                 # Archivos estáticos
│   ├── 🎨 favicon.ico
│   ├── 🖼️ logo.svg
│   └── 🔧 monaco-config.js
├── 📁 src/
│   ├── 📁 components/         # Componentes React
│   │   ├── 🎨 Layout/         # Layout principal
│   │   ├── 📝 Editor/         # Monaco Editor
│   │   ├── 🖥️ Preview/        # Vista previa
│   │   ├── 📚 CDNManager/     # Gestor de librerías
│   │   └── 🎛️ Panels/        # Paneles laterales
│   ├── 📁 stores/             # Estado global (Zustand)
│   │   ├── 🎮 playgroundStore.js
│   │   └── 👤 profileStore.js
│   ├── 📁 utils/              # Utilidades
│   │   ├── ⚡ CompilerEngine.js
│   │   ├── 🔗 cdnResolver.js
│   │   └── 🎨 cssPreprocessors.js
│   ├── 📁 data/               # Datos y snippets
│   │   ├── 🎭 snippetsIniciales.js
│   │   └── 🔗 cdnMappings.js
│   └── 📁 styles/             # Estilos globales
├── 📁 docs/                   # Documentación
├── 🔧 vite.config.js          # Configuración Vite
├── 📦 package.json            # Dependencias
└── 📖 README.md               # Este archivo

---

🎨 Ejemplos de Código

🌟 Animación de Partículas

// Crear sistema de partículas con Anime.js
function createParticleSystem() {
  const particles = [];
  
  for (let i = 0; i < 50; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    document.body.appendChild(particle);
    particles.push(particle);
  }
  
  anime({
    targets: particles,
    translateX: () => anime.random(-500, 500),
    translateY: () => anime.random(-500, 500),
    scale: () => anime.random(0.1, 1),
    opacity: () => anime.random(0.1, 1),
    duration: 3000,
    easing: 'easeOutExpo',
    loop: true,
    direction: 'alternate'
  });
}

🎭 Morphing CSS

.morphing-shape {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  animation: morph 4s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 0%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 50% 0%;
    transform: rotate(90deg) scale(1.2);
  }
  50% {
    border-radius: 50%;
    transform: rotate(180deg) scale(0.8);
  }
  75% {
    border-radius: 0% 50%;
    transform: rotate(270deg) scale(1.1);
  }
}

🎬 Timeline GSAP

// Timeline compleja con GSAP
const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.to(".box1", { duration: 1, x: 100, rotation: 360 })
  .to(".box2", { duration: 1, y: 100, scale: 1.5 }, "-=0.5")
  .to(".box3", { duration: 1, opacity: 0.3, skewX: 45 }, "-=0.8")
  .to(".container", { duration: 2, backgroundColor: "#ff6b6b" }, 0);

---

🤝 Contribuir

¡Las contribuciones son bienvenidas! 🎉

🚀 Cómo contribuir:

1. 🍴 Fork el proyecto
2. 🌿 Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. 💾 Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. 📤 Push a la rama (git push origin feature/AmazingFeature)
5. 🔄 Abre un Pull Request

📋 Guías de contribución:

• 📖 Lee nuestro CONTRIBUTING.md
• 🐛 Reporta bugs usando GitHub Issues
• 💡 Sugiere nuevas features
• 📝 Mejora la documentación
• 🧪 Añade tests

🏆 Contribuidores

---

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

MIT License

Copyright (c) 2025 SwonDev

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

---

☕ Apoyar el Proyecto

Si este proyecto te ha sido útil, considera apoyar su desarrollo:

🙏 Tu apoyo ayuda a mantener este proyecto activo y en constante mejora

💝 Otras formas de apoyar:

• ⭐ Dale una estrella al repositorio
• 🐛 Reporta bugs y problemas
• 💡 Sugiere nuevas features
• 📢 Comparte el proyecto con otros desarrolladores
• 📝 Contribuye con código o documentación

---

📞 Contacto y Soporte

🔗 Enlaces útiles:

📧 ¿Necesitas ayuda?

• 🐛 Reportar un bug
• 💡 Solicitar feature
• 💬 Discusiones

---

🎨 Hecho con ❤️ por SwonDev

"Creando herramientas que inspiran creatividad"

⭐ ¡No olvides dar una estrella si te gustó el proyecto! ⭐