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:**
```css
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:**
```css
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:

```css
@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

```css
@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

```css
.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

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

### React

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

### Vue

```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

```css
/* 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

```javascript
// 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)

```css
/* 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