← All work

Gauntlet

Fighting-game tournament platform with a playable fighter-select hero and live countdown

Template
Gauntlet
Sector
Esports & Tournaments
Year
2025
Built with
Astro 5, React 19, Tailwind CSS v4
Pages
14
Open the live demo
Gauntlet

Gauntlet is a tournament platform template for fighting-game events, esports organizations, and competitive gaming leagues. Fourteen routes cover tournaments with detail pages, a fighter roster with individual profiles and match history, supported games, schedule, standings, a news section with articles, a full registration form, about, and contact. The hero is an arcade fighter-select screen: pick any of six seeded competitors and the portrait swaps behind a GSAP clip-path wipe while a live countdown ticks toward the World Finals. A FIGHT! preloader flashes on first load, a two-part custom cursor tracks the pointer with a fast dot and a lagging reticle that turns red over interactive elements, and the prize pool counts up to $50,000 on scroll. Blood-red on near-black, plus Neon Arcade and Iron Ash skins.

What’s inside

  • 14 routes, Home, Tournaments, Tournament Detail, Fighters, Fighter Detail, Games, Schedule, Standings, News, News Article, Register, About, Contact, 404
  • Fighter-select hero, click any of 6 seeded fighters and GSAP wipes the portrait out with clip-path inset, swaps the image, and wipes the new one in from the opposite edge
  • Live event countdown in the hero, days, hours, minutes, seconds with tabular numerals, updating every second
  • Hero exit choreography, a scrubbed ScrollTrigger slides the portrait panel out to the right and fades it as you leave the fold
  • FIGHT! preloader, GSAP timeline with an impact flash and scroll lock, module-level guard so it plays once per tab
  • Two-speed custom cursor, a 0.06s quickTo dot with a 0.4s trailing reticle that scales up and turns accent red over interactive elements

The signature

The homepage hero is a working fighter-select screen. A seeded list of six competitors sits on the left; click one and GSAP collapses the portrait panel with a clip-path inset wipe, swaps the render, then wipes the new fighter in from the opposite edge in 0.4s, the same beat as an arcade character pick. Beside it a countdown ticks in real time to the World Finals, and as you scroll away a scrubbed ScrollTrigger slides the whole portrait panel off to the right.

See it live

The demo is public: https://fpsjago.github.io/gauntlet/. 14 pages, built with Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.