syntaxis/assets/branding/design-guides/ANIMATED_LOGOS_GUIDE.md

🎬 SYNTAXIS Animated Logos - Guía Completa

🎯 Acerca de las Animaciones

SYNTAXIS cuenta con 7 logos animados profesionales, diseñados para diferentes contextos:

3 Animaciones de Entrada (One-Time)

Se ejecutan una sola vez cuando carga la página. Perfectas para impresión inicial.

3 Animaciones de Loop (Infinitas)

Se ejecutan continuamente en un loop. Ideales para estados persistentes.

1 Animación Interactiva

Responde a interacción del usuario (hover, focus).

---

📖 Visualizador de Animaciones

Para ver las animaciones en acción:

Opción 1: Galería Interactiva (Recomendada)

open syntaxis-animated-showcase.html

O abre en tu navegador:

• Desde la carpeta /assets/
• Archivo: syntaxis-animated-showcase.html

Ventajas:

• ✅ Todas las animaciones en un lugar
• ✅ Categorías claras (Entrada, Loop, Interactivo)
• ✅ Información de uso de cada animación
• ✅ Botón para abrir en nueva pestaña
• ✅ Modo claro/oscuro

Opción 2: Ver SVGs Directamente

Abre desde /assets/syntax_logos_anim/:

open syntax_logos_anim/syntaxis-logo-loading.svg

Nota: Las animaciones de entrada solo se ejecutan una vez. Recarga la página (Cmd+R) para verlas nuevamente.

---

🚀 Animaciones de Entrada (One-Time)

1. Icon Assembled ✨

Archivo: syntaxis-logo-icon-animated.svg

• Duración: ~1.2 segundos
• Efecto: Piezas aparecen desde el centro rotando hacia su posición
• Mejor para:
  • Splash screens
  • Hero sections en landing pages
  • Intros de presentaciones
  • Primeras impresiones

Características:

• Animación escalonada (staggered)
• Triángulo dorado aparece al final
• Solo se ejecuta una vez al cargar

Código de ejemplo (HTML):

<div class="hero-splash">
  <object data="syntaxis-logo-icon-animated.svg" type="image/svg+xml" width="200"></object>
  <h1>Bienvenido a SYNTAXIS</h1>
</div>

---

2. Construction Flow 🏗️

Archivo: syntaxis-logo-icon-construction.svg

• Duración: ~1.4 segundos
• Efecto: Piezas se deslizan desde 4 direcciones (arriba, abajo, izq, der)
• Mejor para:
  • Videos explicativos
  • Secciones "Cómo funciona"
  • Animaciones de onboarding
  • Tutoriales

Características:

• Movimiento direccional coordinado
• Efecto bounce en el centro
• Comunica "ensamblaje sistemático"

Código de ejemplo (HTML):

<section class="how-it-works">
  <object data="syntaxis-logo-icon-construction.svg" type="image/svg+xml" width="200"></object>
  <h2>¿Cómo Funciona?</h2>
</section>

---

3. Full Logo Animated 🎭

Archivo: syntaxis-logo-horizontal-animated.svg

• Duración: ~1.4 segundos
• Efecto: Icono se ensambla → texto aparece → tagline fade in
• Mejor para:
  • Headers de sitio web
  • Intros de videos corporativos
  • Presentaciones de marca
  • Primera carga de página

Características:

• Tres fases de animación
• Branding completo en una secuencia
• Perfecto para primera impresión profesional

Código de ejemplo (HTML):

<header>
  <object data="syntaxis-logo-horizontal-animated.svg" type="image/svg+xml"></object>
</header>

---

♾️ Animaciones de Loop (Continuas)

1. Pulse Effect 💫

Archivo: syntaxis-logo-icon-pulse.svg

• Duración: 2 segundos (infinito)
• Efecto: Triángulo central pulsa y brilla suavemente
• Mejor para:
  • Indicadores de estado activo
  • Call-to-action buttons
  • Dashboard widgets
  • Botones de acción

Características:

• Muy sutil, no distrae
• Atrae atención al centro
• Drop-shadow animado
• Perfecto para mantener atención

Código de ejemplo (HTML):

<button class="cta-button">
  <object data="syntaxis-logo-icon-pulse.svg" type="image/svg+xml" width="40"></object>
  Comenzar Ahora
</button>

---

2. Loading Spinner ⏳

Archivo: syntaxis-logo-loading.svg

• Duración: 3 segundos órbita + 2s fade (infinito)
• Efecto: Diamantes orbitan, cuadrados rotan
• Mejor para:
  • Indicadores de carga
  • Estados "procesando"
  • Indicadores de trabajo en progreso
  • Loading screens

Características:

• Comunicación clara de "trabajando"
• Branded loading indicator
• Múltiples capas de movimiento
• ✅ ESTA FUNCIONANDO CORRECTAMENTE

Código de ejemplo (HTML):

<div class="loading-state">
  <object data="syntaxis-logo-loading.svg" type="image/svg+xml" width="80"></object>
  <p>Procesando tu solicitud...</p>
</div>

---

3. Ambient Breathing 🌬️

Archivo: syntaxis-logo-icon-ambient.svg

• Duración: 4-6 segundos (infinito)
• Efecto: Expansión/contracción sutil + flotación
• Mejor para:
  • Elementos decorativos
  • Headers de sección
  • Fondos sutiles
  • Ambientes relajados

Características:

• MUY sutil, casi imperceptible
• Efecto "vivo" sin distraer
• Múltiples capas con delays
• Crea sensación de movimiento

Código de ejemplo (HTML):

<div class="decorative-element">
  <object data="syntaxis-logo-icon-ambient.svg" type="image/svg+xml" width="100"></object>
</div>

---

🖱️ Animaciones Interactivas

Hover Interactive 🔘

Archivo: syntaxis-logo-icon-hover.svg

• Duración: 0.3 segundos (transición)
• Efecto: Formas crecen y cambian color al hover
• Mejor para:
  • Logos clickeables en navbar
  • Botones de acción
  • Links interactivos
  • Elementos con feedback visual

Características:

• Responde a :hover
• Cada forma puede tener hover individual
• Triángulo tiene efecto especial
• Feedback inmediato para el usuario

Código de ejemplo (HTML):

<a href="/" class="logo-link">
  <object data="syntaxis-logo-icon-hover.svg" type="image/svg+xml" width="40"></object>
</a>

<style>
.logo-link {
  cursor: pointer;
  transition: transform 0.2s;
}

.logo-link:hover {
  transform: scale(1.05);
}
</style>

---

📋 Tabla de Referencia Rápida

Animación	Archivo	Duración	Tipo	Mejor Uso
Icon Assembly	icon-animated.svg	1.2s	Entrada	Splash screen
Construction	construction.svg	1.4s	Entrada	Tutorial/video
Horizontal Animated	horizontal-animated.svg	1.4s	Entrada	Header
Pulse	pulse.svg	2s ∞	Loop	CTA button
Loading	loading.svg	3s ∞	Loop	Loading indicator
Ambient	ambient.svg	4-6s ∞	Loop	Decorativo
Hover	hover.svg	0.3s	Interactivo	Logo clickeable

---

🔧 Técnicas de Implementación

Usando <object> (Recomendado)

<object data="path/to/logo.svg" type="image/svg+xml"></object>

Ventajas:

• ✅ Animaciones CSS funcionan perfectamente
• ✅ Acceso al DOM del SVG
• ✅ Eventos de interacción
• ✅ Mejor soporte

Usando <img> (No funciona con animaciones)

<!-- ❌ NO FUNCIONA CON ANIMACIONES -->
<img src="path/to/logo.svg" />

Problemas:

• ❌ Las animaciones CSS no se ejecutan
• ❌ No hay acceso al DOM del SVG
• ❌ Solo para logos estáticos

Usando <iframe> (Alternativa)

<iframe src="path/to/logo.svg" frameborder="0" style="border:none;"></iframe>

Ventajas:

• ✅ Animaciones funcionan
• ⚠️ Menos control
• ⚠️ Más overhead

Embeber SVG Directamente (Avanzado)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>
    @keyframes spin { /* tus estilos */ }
  </style>
  <!-- SVG content -->
</svg>

Ventajas:

• ✅ Control total
• ✅ Sin requests HTTP adicionales
• ⚠️ HTML más largo
• ⚠️ Mantenimiento más complejo

---

💡 Tips de Optimización

1. Para Animaciones de Entrada

/* Ejecutar una sola vez, luego pausar */
.entry-animation {
  animation: slideIn 1.2s ease-out 1;
  animation-fill-mode: forwards;
}

2. Para Loops Infinitos

/* Ejecutar continuamente */
.loop-animation {
  animation: spin 3s linear infinite;
}

3. Respetar Preferencias de Usuario

@media (prefers-reduced-motion: reduce) {
  .animated-logo * {
    animation: none !important;
  }
}

4. Performance

• Usa animaciones basadas en transform (GPU-acelerado)
• Evita animar width, height, position
• Optimiza la duración de animaciones
• Prueba en dispositivos móviles

---

🎨 Personalización de Animaciones

Cambiar Velocidad

/* En el SVG o en tu CSS */
.animation-element {
  animation-duration: 2s !important; /* en lugar de 3s */
}

Cambiar Colores

Edita el SVG directamente o usa CSS:

svg path[fill="#2C5F8E"] {
  fill: #your-color;
}

Pausar Animaciones

.paused {
  animation-play-state: paused;
}

---

📱 Compatibilidad

Navegador	Versión	Soporte
Chrome	90+	✅ Completo
Firefox	88+	✅ Completo
Safari	14+	✅ Completo
Edge	90+	✅ Completo
Mobile Safari	14+	✅ Completo

---

❓ FAQ

P: ¿Por qué la animación de entrada solo se ejecuta una vez? A: Está diseñada así intencionalmente. Son "splash animations" para impresión inicial. Usa las animaciones de loop para efectos continuos.

P: ¿Cómo hacer que las animaciones de entrada se repitan? A: Edita el SVG y cambia animation-iteration-count: 1 a animation-iteration-count: infinite.

P: ¿Funcionan en móvil? A: Sí, totalmente compatibles. Prueba en dispositivos reales para confirmar performance.

P: ¿Puedo desactivar las animaciones? A: Sí, usa animation: none !important o respeta prefers-reduced-motion.

P: ¿Cómo integro en React? A: Usa <object> o embebe el SVG directo en JSX.

---

📚 Más Información

• README.md - Documentación principal
• REFERENCE.txt - Referencia rápida
• syntaxis-branding-showcase.html - Galería principal
• syntaxis-animated-showcase.html - Galería de animaciones

---

SYNTAXIS | Systematic Orchestration, Perfectly Arranged ✉️ hello@syntaxis.dev 🌐 syntaxis.dev