Asteroids Background Effect

Versión: 3.1.0 Última actualización: 02-04-2026 Autor: Claude (Anthropic)

1. Descripción

Efecto visual animado inspirado en el clásico juego Asteroids. Consiste en un canvas de fondo con:

• Estrellas titilantes con parpadeo visible (20% con parpadeo dramático)
• Asteroides sólidos flotantes con física de colisión
• UFO que cruza la pantalla cada 20 segundos
• Screensaver mode que se activa tras 5 minutos de inactividad

2. Ubicaciones

2.1 Dashboard y Editor (Django App)

Archivos:

• static/js/effects/AsteroidsBackground.js - Motor principal
• static/js/effects/AsteroidsManager.js - Gestor singleton
• static/js/effects/entities/Star.js - Entidad estrella
• static/js/effects/entities/Asteroid.js - Entidad asteroide
• static/js/effects/entities/Ufo.js - Entidad UFO
• static/js/effects/init-asteroids.js - Inicialización
• templates/base.html - Contenedor y botón toggle

Páginas donde funciona:

• Dashboard (/)
• Editor de Racks (/editor/)

Páginas donde NO funciona (botón oculto):

• Terminal (/terminal/)
• Maps/Blueprints (/blueprints/)

2.2 Terminal SSH (Local Agent)

Archivo: terminal/agent/local_agent.py (dentro de TERMINAL_HTML)

El efecto está integrado directamente en el HTML que sirve el agente local para las sesiones SSH.

3. Características

3.1 Tres Temas de Color

3.2 Controles

• Clic simple: Activa/desactiva el efecto
• Doble clic: Cambia al siguiente tema

3.3 Red Alert Mode

Cuando hay alertas críticas (rojas) activas en el Observatory, todos los Asteroids cambian a rojo:

• Colores: estrellas #ff6666, asteroides #ff0000
• Se activa automáticamente cuando renderAlertList() detecta counts.red > 0
• Se desactiva al archivar todas las alertas rojas
• Durante alert mode, cycleTheme() guarda la preferencia pero mantiene los colores rojos
• El botón estrella muestra borde y color rojo

3.4 Persistencia

El estado (activo/inactivo), el tema y el modo alerta se guardan en localStorage:

• crearack_asteroids_enabled — Efecto on/off
• crearack_asteroids_theme — Índice del tema (0=Cyan, 1=Green, 2=Amber)
• crearack_asteroids_alert — Modo alerta roja (true/false)
• crearack_screensaver_enabled — Screensaver habilitado (default: true)
• Cross-tab sync via storage event listener (cambios se propagan a pestañas abiertas)

3.5 Física

• Asteroides con colisiones elásticas (rebote)
• Velocidad de asteroides: ~1.6 unidades
• Velocidad de UFO: ~2.0 unidades
• UFO aparece cada 20 segundos

3.6 Rendimiento

• Límite de 25-30 FPS
• Auto-pausa cuando la pestaña no está visible (Page Visibility API)
• User-initiated effect — ignores OS prefers-reduced-motion (explicit toggle)

4. Botón Toggle

Dashboard

• Ubicación: Esquina inferior derecha
• Clase CSS: btn-attention (efecto pulse)
• Variables: --card-bg, --primary

Terminal SSH

• Ubicación: Esquina inferior derecha del iframe
• Efecto pulse-attention replicado inline

5. Configuración Técnica

Dashboard (AsteroidsBackground.js)

{
    starCount: 60,
    asteroidCount: 15,
    fps: 30,
    opacity: 0.55,
    starColor: '#00ffff',
    asteroidColor: '#00ffff'
}

Terminal (local_agent.py)

STAR_COUNT = 40
ASTEROID_COUNT = 8
FPS = 25
UFO_INTERVAL = 20000 // ms

6. Limitaciones Conocidas

1. Terminal/Maps pages: El efecto no funciona en estas páginas debido a layouts con position: fixed y fondos opacos.

2. Transparencia de asteroides: Resuelto en v3.1.0 — asteroides ahora son completamente sólidos (alpha 1.0).

3. Botón del Terminal: El diseño del botón en el terminal difiere ligeramente del dashboard debido a que el agente no tiene acceso a las variables CSS de la aplicación.

7. Estructura de Archivos

static/js/effects/
├── AsteroidsBackground.js    # Motor principal de animación
├── AsteroidsManager.js       # Singleton con gestión de temas
├── ScreensaverEngine.js      # Motor del screensaver (Phase 1 + Phase 2)
├── ScreensaverController.js  # Idle detection + overlay management
├── init-asteroids.js         # Helper de inicialización
└── entities/
    ├── Star.js               # Clase Star
    ├── Asteroid.js           # Clase Asteroid con colisiones
    ├── Ufo.js                # Clase Ufo (+ shooting en screensaver)
    └── Projectile.js         # Clase Projectile (láser del UFO)

terminal/agent/
└── local_agent.py            # Contiene TERMINAL_HTML con efecto inline

8. API Pública

window.CreaRackAsteroids

window.CreaRackAsteroids.init(container, id, options)  // Inicializar instancia
window.CreaRackAsteroids.toggle()                       // Toggle on/off
window.CreaRackAsteroids.cycleTheme()                   // Cambiar tema
window.CreaRackAsteroids.setAlertMode(active)           // Activar/desactivar modo rojo
window.CreaRackAsteroids.getManager()                   // Obtener singleton manager
window.CreaRackAsteroids.initScreensaver(options)       // Inicializar screensaver
window.CreaRackAsteroids.toggleScreensaver()            // Toggle screensaver on/off

Custom Events

9. Screensaver Mode

9.1 Descripción

Screensaver que se activa tras 5 minutos de inactividad del usuario. Muestra un overlay fullscreen con dos fases cíclicas de animación.

9.2 Fases

9.3 Phase 1 — Accumulation

• Asteroides spawn gradualmente (1 cada 500ms → 1 cada 333ms)
• Distribución: 40% large, 40% medium, 20% small
• Factor de desaceleración: 0.98 por frame → se frenan exponencialmente
• Cuando speed < 0.02 → drift mínimo aleatorio (0.005) = “atrapado”
• Colisiones activas pero solo bounce (sin break)
• Transición cuando coverage ≥ 85% o asteroids ≥ 120

9.4 Phase 2 — UFO Attack

• 2 UFOs spawn desde bordes opuestos (left, right)
• Cada UFO dispara cada 1.2-1.8s al asteroide más cercano (ritmo lento, batalla dramática)
• Velocidad UFO reducida: 0.4-0.7 (patrullaje lento)
• Targeting inteligente: distancia × prioridad de tamaño (large=0.5, medium=0.7, small=1.0)
• Impacto → breakApart() cascading: large → medium → small → partículas de explosión
• Partículas: 8-12 fragmentos con fade y glow
• UFOs usan wrap-around (permanecen en pantalla durante la batalla)

9.4.1 Phase 2b — UFO Retreat

• Cuando no quedan asteroides, los UFOs dejan de disparar
• Aceleran (speed 1.5-2.0) y salen por el borde más cercano
• Transición a pausa tras 4s o cuando todos los UFOs están fuera de pantalla

9.5 Wake-up

• Eventos monitorizados: mousemove, keydown, click, scroll, touchstart
• Fade-out CSS transition de 0.8s
• Reanuda el fondo de asteroids normal
• Reinicia el idle timer

9.6 Integración con Alert Mode

• Si se activa alert mode durante el screensaver → wakeUp() automático
• El screensaver no se activa si ya hay alert mode activo

9.7 Condiciones de activación

• Asteroids deben estar habilitados
• Screensaver debe estar habilitado (crearack_screensaver_enabled)
• No estar en alert mode
• Pestaña visible (!document.hidden)

9.8 Testing rápido

// Reducir timeout a 10s en la consola del navegador
CreaRackAsteroids.getManager().screensaver.idleTimeout = 10000;

10. Changelog

v3.1.0 (02-04-2026)

• Entidades sólidas: Asteroides y UFOs alpha fijo a 1.0, sin transparencia (antes 0.4-0.85)
• Estrellas mejoradas: Amplitud de parpadeo 2x (0.45), 20% de estrellas con parpadeo dramático (0.7), tamaño ligeramente mayor
• Screensaver dramático: UFOs aparecen con 85% cobertura (antes 70%), solo 2 UFOs (antes 3), disparo lento 1.2-1.8s (antes 0.4s)
• UFO retreat: Cuando no quedan asteroides, los UFOs dejan de disparar y se marchan por los bordes antes de reiniciar el ciclo

v3.0.1 (18-02-2026)

• Fix: Removed prefers-reduced-motion check — effect is user-initiated via explicit toggle, OS preference should not block it
• Removed: media query check in constructor, start() gate, auto-stop listener on preference change

v3.0.0 (06-02-2026)

• Screensaver Mode: Se activa tras 5 min de inactividad
• Phase 1 (Accumulation): asteroides llenan la pantalla
• Phase 2 (Attack): 3 UFOs destruyen todo con lásers
• Nuevo Projectile.js con trail y glow
• Nuevo ScreensaverEngine.js con motor de 2 fases
• Nuevo ScreensaverController.js con idle detection
• Ufo.js +shoot(), updateScreensaver(), canFireShot()
• Lazy-loaded via dynamic import()
• API: initScreensaver(), toggleScreensaver()

v2.0.0 (05-02-2026)

• Red Alert Mode: Asteroids cambia a rojo cuando hay alertas críticas activas
• Persistencia cross-page via crearack_asteroids_alert en localStorage
• Sync cross-tab via storage event listener
• Botón estrella en rojo durante alert mode
• cycleTheme() mantiene rojo durante alert mode (guarda preferencia para restaurar)
• API pública: setAlertMode(active), isAlertMode()
• Expuesto en window.CreaRackAsteroids.setAlertMode

v1.0.0 (29-01-2026)

• Implementación inicial
• Tres temas de color
• Persistencia localStorage
• Integración en Dashboard, Editor y Terminal SSH
• Física de colisiones entre asteroides
• UFO cada 20 segundos

Documentos relacionados:

• NETWORK_OBSERVATORY.md - Sistema de alertas que dispara el modo rojo
• LOCAL_AGENT_GUIDE.md - Guía del agente local

Véase también

• [[crearack-tech—frontend—design-system]] — design system de componentes
• [[crearack-tech—frontend—design-guidelines]] — guidelines de diseño UI
• [[crearack-tech—frontend—centralized-services]] — servicios JS centralizados
• [[crearack-tech—frontend—performance-guidelines]] — guidelines de performance frontend
• [[feature—workspace—refresh-ui-2026]] — refresh UI 2026 del workspace