# SYNTAXIS

Systematic Orchestration, Perfectly Arranged

Loop Infinito: Ensamblaje (4s) → Respiración (8s) → Desensamblaje (4s) → ∞

Ciclo completo: 16 segundos

## ⏱️ Secuencia de Animación

La animación se desarrolla en tres fases coordinadas

### 1️⃣ Ensamblaje

0s - 4s
LOOP ∞

Las piezas geométricas aparecen secuencialmente desde el centro con rotación 180°. Más lento y cinematográfico (4 segundos completos). Cada pieza tiene un delay escalonado para crear un efecto de construcción sistemática.

### 2️⃣ Respiración Ambiental

4s - 12s (8 segundos)
LOOP ∞

El logo permanece ensamblado y "respira" durante 8 segundos completos. Las capas se expanden y contraen sutilmente en diferentes ritmos. El triángulo central flota verticalmente. Efecto orgánico y vivo.

### 3️⃣ Desensamblaje

12s - 16s
LOOP ∞

Las piezas desaparecen con rotación inversa (-180°), volviendo al punto de partida. Después de completar el desensamblaje, el ciclo completo se reinicia automáticamente. Loop infinito de 16 segundos.

### 🎯 Casos de Uso

- Splash screen de aplicación
- Landing page hero section
- Estados de carga con marca
- Presentaciones corporativas

### ⚡ Características

- Loop infinito de 16 segundos
- Ensamblaje cinematográfico (4s)
- Respiración ambiental (8s)
- Desensamblaje suave (4s)
- Solo 5.8KB de tamaño
- GPU-accelerated (60fps)

### 🎨 Personalizable

- Ajustar duración vía CSS
- Pausar/reproducir con JS
- Cambiar colores fácilmente
- Funciona en todos los navegadores

### 💻 Implementación

`<!-- HTML Simple --> <div class="app-loading"> <img src="syntaxis-logo-combined-animation.svg" width="300" alt="Cargando SYNTAXIS"> <p>Inicializando sistema...</p> </div> <style> .app-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #0f172a; } .app-loading p { color: #94a3b8; margin-top: 20px; font-size: 1.1em; } </style> <!-- React Component --> <script> function LoadingScreen() { return ( <div className="splash-screen"> <img src="/syntaxis-logo-combined-animation.svg" width={300} alt="SYNTAXIS Loading" /> </div> ); } </script>`