← Menú Principal
🏃 PLATAFORMAS 2D & DISEÑO ATÓMICO UI/UX

UI RUNNER

Aprende Diseño Atómico y accesibilidad WCAG. Recolecta piezas básicas de interfaz (Átomos) para ensamblar componentes interactivos completos (Moléculas y Organismos).

🎮 Controles & Dinámica de Juego:

A D o ← → : Mover personaje (Velocidad controlada y suave)
ESPACIO o W o ↑ : Salto Alto (¡Doble Salto disponible en el aire!)
🧩 Piezas de UI (Átomos): Recoge botones base, iconos, textos y paletas de color para ensamblar el componente del nivel.
👾 Enemigos (Popups / Dark Patterns): Salta sobre ellos desde arriba para derrotarlos.
🚩 Meta SUBMIT: Llega al botón verde final con tu componente completamente ensamblado para avanzar.
◀
▶
▲ SALTO

🏃 Guía de Diseño Atómico en UI Runner

Un juego de plataformas donde construyes interfaces reales a partir de sus componentes atómicos.

1. Ensamble de Componentes UI

Átomo: [🔘 Botón]
Contenedor interactivo base con padding.
Átomo: [🔍 Icono]
Glifo gráfico para reconocimiento visual rápido.
Molécula: <IconButton />
Unión funcional que ofrece accesibilidad y claridad.

2. Física y Plataformas

Salto Alto & Doble Salto: Pulsa ESPACIO o W. Mantén presionado para saltar más alto y pulsa una segunda vez en el aire para el doble salto.
Plataformas sólidas vs inestables: Los contenedores <Card> y Navbar son estables; las etiquetas de párrafo <p> se caen si te quedas parado.