Gauntlet

Gauntlet es una plantilla de plataforma de torneos para eventos de fighting games, organizaciones de esports y ligas competitivas. Catorce rutas cubren torneos con páginas de detalle, un roster de luchadores con perfiles individuales e historial de resultados, juegos soportados, calendario, standings, sección de noticias con artículos, formulario de inscripción completo, about y contacto. El hero es una pantalla arcade de fighter select: eliges a cualquiera de los seis competidores seeded y el retrato cambia detrás de un wipe con clip-path de GSAP mientras un countdown en vivo avanza hacia las World Finals. Un preloader FIGHT! destella en la primera carga, un cursor personalizado de dos partes sigue al puntero con un punto rápido y una retícula con lag que se vuelve roja sobre elementos interactivos, y el prize pool cuenta hasta $50.000 al hacer scroll. Rojo sangre sobre casi negro, más los skins Neon Arcade e Iron Ash.

Qué incluye

• 14 rutas, Inicio, Torneos, Detalle de Torneo, Luchadores, Detalle de Luchador, Juegos, Calendario, Standings, Noticias, Artículo, Inscripción, About, Contacto, 404
• Hero de fighter select, haz clic en cualquiera de los 6 luchadores seeded y GSAP saca el retrato con un wipe clip-path inset, cambia la imagen y mete el nuevo desde el borde opuesto
• Countdown de evento en vivo en el hero, días, horas, minutos y segundos con cifras tabulares, actualizándose cada segundo
• Coreografía de salida del hero, un ScrollTrigger scrubbed desliza el panel del retrato hacia la derecha y lo desvanece al abandonar el fold
• Preloader FIGHT!, timeline de GSAP con flash de impacto y bloqueo de scroll, guard a nivel de módulo para que se reproduzca una vez por pestaña
• Cursor personalizado de dos velocidades, punto con quickTo de 0.06s y retícula con lag de 0.4s que escala y se vuelve roja sobre elementos interactivos

La firma

El hero de la homepage es una pantalla de fighter select funcional. A la izquierda hay una lista de seis competidores con su seed; al hacer clic en uno, GSAP colapsa el panel del retrato con un wipe clip-path inset, cambia el render y mete al nuevo luchador desde el borde opuesto en 0.4s, el mismo ritmo que una selección de personaje arcade. Al lado, un countdown avanza en tiempo real hacia las World Finals, y al hacer scroll un ScrollTrigger scrubbed desliza todo el panel del retrato hacia la derecha.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/gauntlet/. 14 páginas, hecha con Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.