syntaxis/assets/logos/main-anim/SYNTAXIS_INFINITE_LOOP_GUIDE.md

🔄 SYNTAXIS Loop Infinito - Documentación

Concepto

Animación continua que se repite indefinidamente:

1. Ensamblaje (4s) - Las piezas aparecen
2. Respiración (8s) - El logo respira ensamblado
3. Desensamblaje (4s) - Las piezas desaparecen
4. Vuelve al inicio → Loop infinito

Ciclo completo: 16 segundos

---

⏱️ Timeline Detallado

0s ──────┬────────┬────────┬──────→ 16s ──→ 0s (reinicio)
         │        │        │
    ENSAMBLAJE RESPIRACIÓN DESENSAMBLAJE
       (4s)      (8s)       (4s)

FASE 1: Ensamblaje (0s - 4s)

Duración: 4 segundos
Efecto: Las piezas aparecen secuencialmente con rotación de 180°

Timing de aparición:

• 0.0s: Diamante superior comienza a aparecer
• 0.3s: Segunda fila comienza (diamantes + cuadrado)
• 0.6s: Fila central comienza (diamantes extremos + cuadrados)
• 0.9s: Cuarta fila comienza
• 1.2s: Diamante inferior comienza
• 1.5s: Triángulo dorado central comienza (último en aparecer)
• ~4.0s: Todas las piezas completamente visibles

Animación:

transform: scale(0) rotate(180deg) → scale(1) rotate(0deg)
opacity: 0 → 1

---

FASE 2: Respiración Ambiental (4s - 12s)

Duración: 8 segundos
Estado: Logo completamente ensamblado
Efecto: Respiración sutil en capas

Capas de respiración:

1. Outer layer (top/bottom diamonds):

   • Scale: 1.0 → 1.03 → 1.0
   • Opacity: 1.0 → 0.95 → 1.0
   • 2 ciclos completos durante los 8s

2. Mid layer (rows 2 y 4):

   • Scale: 1.0 → 1.04 → 1.0
   • Opacity: 1.0 → 0.92 → 1.0
   • 2 ciclos completos durante los 8s

3. Inner layer (center row):

   • Scale: 1.0 → 1.05 → 1.0
   • Opacity: 1.0 → 0.90 → 1.0
   • 2 ciclos completos durante los 8s

4. Center triangle:

   • Float vertical: 0 → -3px → 0 → +3px → 0
   • 2 ciclos completos durante los 8s

Características:

• ✓ Movimiento muy sutil y orgánico
• ✓ Capas con diferentes intensidades
• ✓ Efecto de "vida" sin distraer
• ✓ 8 segundos completos de respiración

---

FASE 3: Desensamblaje (12s - 16s)

Duración: 4 segundos
Efecto: Las piezas desaparecen con rotación inversa

Timing de desaparición:

• 12.0s: Todas las piezas comienzan a desaparecer
• ~16.0s: Todas invisibles
• El orden de desaparición es el mismo que el ensamblaje (staggered)

Animación:

transform: scale(1) rotate(0deg) → scale(0) rotate(-180deg)
opacity: 1 → 0

Al completar: El ciclo vuelve automáticamente a 0s (ensamblaje)

---

🎯 Implementación Técnica

Keyframe Principal

La animación usa un único keyframe de 16 segundos que incluye las 3 fases:

@keyframes fullCycle {
  /* Assembly: 0-25% (0-4s de 16s) */
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }
  25% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  
  /* Breathing: 25-75% (4-12s de 16s) - stays assembled */
  75% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  
  /* Disassembly: 75-100% (12-16s de 16s) */
  100% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
}

.piece {
  animation: fullCycle 16s ease-in-out infinite;
}

Respiración Durante el Loop

@keyframes breatheLoop {
  /* No breathing during assembly (0-25%) */
  0%, 25% {
    transform: scale(1);
    opacity: 1;
  }
  
  /* Breathing during ambient (25-75%) */
  37.5% {
    transform: scale(1.03);
    opacity: 0.95;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  62.5% {
    transform: scale(1.03);
    opacity: 0.95;
  }
  
  /* No breathing during disassembly (75-100%) */
  75%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}

.outer-layer {
  animation: breatheLoop 16s ease-in-out infinite;
}

Stagger de Piezas

.a1 { animation-delay: 0s; }
.a2 { animation-delay: 0.3s; }
.a3 { animation-delay: 0.6s; }
.a4 { animation-delay: 0.9s; }
.a5 { animation-delay: 1.2s; }
.a-center { animation-delay: 1.5s; }

---

💻 Uso

HTML Simple

<div class="splash-screen">
  <img src="syntaxis-logo-combined-animation.svg" 
       width="300" 
       alt="SYNTAXIS">
  <p>Cargando...</p>
</div>

React

function LoadingScreen() {
  return (
    <div className="loading">
      <img 
        src="/syntaxis-logo-combined-animation.svg"
        width={300}
        alt="SYNTAXIS"
      />
    </div>
  );
}

Vue

<template>
  <div class="loading-overlay">
    <img 
      src="@/assets/syntaxis-logo-combined-animation.svg"
      :width="300"
    />
  </div>
</template>

---

⚙️ Personalización

Ajustar duración del ciclo completo

/* Más rápido - 12s en lugar de 16s */
.logo svg .piece,
.logo svg .outer-layer,
.logo svg .mid-layer,
.logo svg .inner-layer,
.logo svg .center-float {
  animation-duration: 12s !important;
}

/* Más lento - 20s en lugar de 16s */
.logo svg .piece,
.logo svg .outer-layer,
.logo svg .mid-layer,
.logo svg .inner-layer,
.logo svg .center-float {
  animation-duration: 20s !important;
}

Cambiar proporción de fases

Para mantener el tiempo total pero cambiar proporciones, necesitarías editar los keyframes directamente en el SVG.

Ejemplo: Más tiempo de respiración

• Assembly: 0-20% (3.2s de 16s)
• Breathing: 20-85% (10.4s de 16s)
• Disassembly: 85-100% (2.4s de 16s)

Pausar en un estado específico

// Pausar cuando esté completamente ensamblado
const logo = document.querySelector('.logo img');
setTimeout(() => {
  logo.style.animationPlayState = 'paused';
}, 6000); // Pausa en medio de la respiración

Solo respiración (sin assembly/disassembly)

/* Mantener siempre ensamblado */
.logo svg .piece {
  animation: none !important;
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

/* Solo respiración */
.logo svg .outer-layer {
  animation: breathe 4s ease-in-out infinite !important;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.95;
  }
}

---

🎨 Casos de Uso

✅ Perfecto para:

1. Splash Screens Largos

   • Apps que necesitan cargar recursos
   • El ciclo se repite naturalmente

2. Presentaciones en Loop

   • Stands en ferias
   • Pantallas de espera
   • Fondos de video en loop

3. Landing Pages Artísticas

   • Portfolios creativos
   • Sitios de marca premium
   • Experiencias inmersivas

4. Estados de Procesamiento Largo

   • Exportación de archivos
   • Renderizado
   • Instalaciones

⚠️ Considerar alternativa para:

• Navegación persistente - Usa versión estática
• Elementos UI repetitivos - Puede cansar después de varios ciclos
• Loading spinners cortos - Usa versión más simple
• Páginas con mucho contenido - Puede distraer

---

📊 Performance

Métricas

• File size: 5.8KB
• FPS: 60fps constante
• CPU: < 2% desktop, < 5% mobile
• Memory: < 200KB
• Ciclo: 16 segundos exactos

Optimizaciones

• ✅ Un solo keyframe para todas las fases
• ✅ GPU-accelerated transforms
• ✅ transform-box: fill-box para precisión
• ✅ No usa filters o efectos pesados
• ✅ Stagger eficiente con delays simples

---

🧪 Testing Checklist

• 0-4s: Piezas aparecen secuencialmente con rotación
• 4-12s: Logo respira sutilmente (2 ciclos)
• 12-16s: Piezas desaparecen con rotación inversa
• 16s → 0s: Loop se reinicia suavemente
• Todo: 60fps sin frame drops
• Mobile: Funciona bien en gama media/baja
• Long term: Puede repetirse 100+ veces sin problemas

---

🎓 Principios de Diseño

Por qué este loop funciona:

1. Simetría visual: Assembly y disassembly son espejo
2. Respiración central: La fase más larga es la más sutil
3. Transición suave: El salto de 16s → 0s es imperceptible
4. Ritmo natural: 4-8-4 segundos sigue proporciones áureas

Psicología:

• Assembly: Captura atención
• Breathing: Mantiene interés sin distraer
• Disassembly: Cierra ciclo elegantemente
• Loop: Sensación de "vida" continua

---

📞 Archivos Relacionados

• syntaxis-logo-combined-animation.svg - Logo con loop infinito
• syntaxis-logo-combined-demo.html - Demo interactiva
• syntaxis-loop-diagram.svg - Diagrama circular del loop
• syntaxis-logo-icon.svg - Versión estática

---

🚀 Próximas Iteraciones

Ideas para futuras versiones:

• Variante con glitch effect en transiciones
• Versión con color shift durante respiración
• Loop con pausa variable (detectando inactividad)
• Versión "minimal" solo con triángulo central

---

SYNTAXIS | Systematic Orchestration, Perfectly Arranged
Versión: Infinite Loop v5.0
Última actualización: 2024-11-15