Pages Hard

Esports Tournament — NEXUS

Dark cyberpunk esports platform with black/lime/orange palette, Rajdhani bold display font, Canvas particle field with grid lines, scroll-driven prize counter ($0→$2.1M), angled clip-path buttons, and tournament bracket grid.

Open in Lab

gsap scrolltrigger lenis canvas-2d rajdhani jetbrains-mono

Targets: JS HTML

Code

/* ── Demo 54: Esports Tournament — NEXUS ── */
/* Black / Lime #a3ff12 / Orange #ff6520 / Rajdhani */
:root {
  --black: #060608;
  --dark: #0c0e10;
  --panel: #111418;
  --border: #1e2428;
  --text: #e8eef0;
  --muted: #6a7480;
  --lime: #a3ff12;
  --lime-dim: rgba(163, 255, 18, 0.12);
  --orange: #ff6520;
  --cyan: #12d8ff;
  --glow-lime: 0 0 10px rgba(163, 255, 18, 0.5), 0 0 30px rgba(163, 255, 18, 0.2);
  --glow-orange: 0 0 10px rgba(255, 101, 32, 0.5);
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Rajdhani", -apple-system, sans-serif;
  background: var(--black);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
.scanline {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.04) 3px,
    rgba(0, 0, 0, 0.04) 6px
  );
}
.section-tag {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--lime);
  margin-bottom: 0.75rem;
}
.lime-text {
  color: var(--lime);
  text-shadow: var(--glow-lime);
}
.btn-lime {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--lime);
  color: var(--black);
  font-family: "Rajdhani", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-lime:hover {
  background: #c0ff40;
  box-shadow: var(--glow-lime);
}
.btn-ghost-e {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--lime);
  color: var(--lime);
  font-family: "Rajdhani", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.2s;
}
.btn-ghost-e:hover {
  background: var(--lime-dim);
}

/* Nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.5rem;
  background: rgba(6, 6, 8, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nb-icon {
  font-size: 1.2rem;
  color: var(--lime);
  text-shadow: var(--glow-lime);
}
.nav-brand span {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text);
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--lime);
}
.nav-live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--orange);
}
.nl-dot {
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: blink 1s step-end infinite;
  box-shadow: var(--glow-orange);
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 7rem 2.5rem 5rem;
  overflow: hidden;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: 1.5rem;
  display: block;
}
.hero-h1 {
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.h1-lime {
  color: var(--lime);
  text-shadow: var(--glow-lime);
}
.hero-prize {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}
.hp-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.hp-amount {
  font-family: "JetBrains Mono", monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
  text-shadow: var(--glow-lime);
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}
.hero-stats-row {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.hsr-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.hsr-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.hsr-label {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* Bracket */
.bracket-section {
  padding: 5rem 2.5rem;
  border-top: 1px solid var(--border);
}
.bracket-header {
  margin-bottom: 2.5rem;
}
.bracket-header h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
}
.bracket-visual {
  position: relative;
  overflow-x: auto;
  padding: 1rem 0;
}
#bracket-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bracket-teams {
  display: grid;
  grid-template-columns: 180px 180px 180px;
  gap: 0;
  position: relative;
  z-index: 1;
  min-height: 320px;
  padding: 1rem 0;
}
.bt-match {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bt-match.qf {
  grid-column: 1;
}
.bt-match.sf {
  grid-column: 2;
}
.bt-match.final {
  grid-column: 3;
  align-self: center;
}
.bt-match.qf[style*="--row:1"] {
  grid-row: 1;
}
.bt-match.qf[style*="--row:2"] {
  grid-row: 2;
}
.bt-match.qf[style*="--row:3"] {
  grid-row: 3;
}
.bt-match.qf[style*="--row:4"] {
  grid-row: 4;
}
.bt-match.sf[style*="--row:1"] {
  grid-row: 1 / 3;
  align-self: center;
}
.bt-match.sf[style*="--row:2"] {
  grid-row: 3 / 5;
  align-self: center;
}
.bt-match.final {
  grid-row: 1 / 5;
}
.bt-team {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: all 0.2s;
}
.bt-team--win {
  border-color: rgba(163, 255, 18, 0.3);
  color: var(--lime);
  background: var(--lime-dim);
}
.bt-team--active {
  border-color: var(--orange);
  color: var(--orange);
  animation: pulse-border 1.5s ease-in-out infinite;
}
@keyframes pulse-border {
  0%,
  100% {
    border-color: var(--orange);
  }
  50% {
    border-color: rgba(255, 101, 32, 0.3);
  }
}

/* Players */
.players-section {
  padding: 5rem 2.5rem;
  border-top: 1px solid var(--border);
}
.players-section h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 2.5rem;
}
.players-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.player-card {
  background: var(--dark);
  padding: 1.5rem;
  position: relative;
  transition: background 0.2s;
}
.player-card:hover {
  background: var(--panel);
}
.player-card--featured {
  border-top: 2px solid var(--lime);
}
.pc-rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.player-card--featured .pc-rank {
  color: var(--lime);
}
.pc-avatar {
  width: 60px;
  height: 60px;
  border-radius: 2px;
  margin-bottom: 1rem;
}
.pc-avatar--1 {
  background: linear-gradient(135deg, #1a2a10, #2a4a18, #1a3a0c);
}
.pc-avatar--2 {
  background: linear-gradient(135deg, #1a0a20, #300a38, #200a28);
}
.pc-avatar--3 {
  background: linear-gradient(135deg, #0a1a2a, #0a2a40, #0a1a30);
}
.pc-avatar--4 {
  background: linear-gradient(135deg, #2a1a08, #401a08, #2a1a10);
}
.pc-handle {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
}
.pc-real {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.pc-team {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lime);
  margin-bottom: 1rem;
}
.pc-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pcs-item {
  display: flex;
  justify-content: space-between;
}
.pcs-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.pcs-key {
  font-size: 0.68rem;
  color: var(--muted);
}

/* Prize */
.prize-section {
  padding: 5rem 2.5rem;
  background: var(--dark);
  border-top: 1px solid var(--border);
}
.prize-inner {
  max-width: 700px;
}
.prize-section h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 3rem;
}
.prize-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pb-item {
  display: grid;
  grid-template-columns: 60px 1fr 120px;
  align-items: center;
  gap: 1rem;
}
.pb-place {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: var(--muted);
}
.pb-bar {
  height: 4px;
  background: var(--border);
}
.pb-fill {
  height: 100%;
  width: var(--w, 0%);
  background: var(--lime);
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 6px var(--lime);
}
.pb-amount {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--lime);
  text-align: right;
}

/* Footer */
.footer-e {
  padding: 1.5rem 2.5rem;
  background: var(--black);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer-e span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  color: var(--muted);
}
.footer-e span:last-child {
  margin-left: auto;
}

@media (max-width: 900px) {
  .players-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .nav-links {
    display: none;
  }
  .players-grid {
    grid-template-columns: 1fr;
  }
  .bracket-section {
    padding: 4rem 1.5rem;
  }
}
html.reduced-motion .nl-dot,
html.reduced-motion .bt-team--active {
  animation: none !important;
}
html.reduced-motion * {
  transition-duration: 0.01ms !important;
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";

gsap.registerPlugin(ScrollTrigger);
initDemoShell({
  title: "NEXUS Esports Tournament",
  category: "pages",
  tech: ["gsap", "scroll-trigger", "lenis", "canvas-2d", "rajdhani"],
});

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");

const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));
gsap.ticker.lagSmoothing(0);

// Hero canvas — particle field
const heroCanvas = document.getElementById("hero-canvas");
const hCtx = heroCanvas.getContext("2d");
let hW, hH;
function resizeHero() {
  hW = heroCanvas.width = window.innerWidth;
  hH = heroCanvas.height = window.innerHeight;
}
resizeHero();
window.addEventListener("resize", resizeHero);

const particles = Array.from({ length: 80 }, () => ({
  x: Math.random(),
  y: Math.random(),
  vx: (Math.random() - 0.5) * 0.0003,
  vy: (Math.random() - 0.5) * 0.0003,
  size: Math.random() * 1.5 + 0.5,
  alpha: Math.random() * 0.4 + 0.1,
  lime: Math.random() > 0.7,
}));

if (!reduced) {
  function drawHero() {
    hCtx.clearRect(0, 0, hW, hH);
    particles.forEach((p) => {
      p.x = (p.x + p.vx + 1) % 1;
      p.y = (p.y + p.vy + 1) % 1;
      hCtx.beginPath();
      hCtx.arc(p.x * hW, p.y * hH, p.size, 0, Math.PI * 2);
      hCtx.fillStyle = p.lime
        ? `rgba(163,255,18,${p.alpha})`
        : `rgba(232,238,240,${p.alpha * 0.4})`;
      hCtx.fill();
    });
    // Grid lines
    hCtx.strokeStyle = "rgba(30,36,40,0.8)";
    hCtx.lineWidth = 1;
    for (let x = 0; x < hW; x += 60) {
      hCtx.beginPath();
      hCtx.moveTo(x, 0);
      hCtx.lineTo(x, hH);
      hCtx.stroke();
    }
    for (let y = 0; y < hH; y += 60) {
      hCtx.beginPath();
      hCtx.moveTo(0, y);
      hCtx.lineTo(hW, y);
      hCtx.stroke();
    }
    requestAnimationFrame(drawHero);
  }
  requestAnimationFrame(drawHero);
}

// Prize counter
const prizeEl = document.getElementById("prize-count");
if (!reduced) {
  ScrollTrigger.create({
    trigger: ".hero",
    start: "top top",
    end: "bottom center",
    onUpdate: (self) => {
      const val = Math.round(2100000 * self.progress);
      prizeEl.textContent = "$" + val.toLocaleString();
    },
  });
} else {
  prizeEl.textContent = "$2,100,000";
}

// Hero stats counters
document.querySelectorAll(".hsr-num").forEach((el) => {
  const target = parseInt(el.dataset.target);
  if (!reduced) {
    ScrollTrigger.create({
      trigger: ".hero-stats-row",
      start: "top 80%",
      end: "top 30%",
      onUpdate: (self) => {
        const val = Math.round(target * self.progress);
        el.textContent =
          target >= 1000000 ? (val / 1000000).toFixed(1) + "M" : val.toLocaleString();
      },
    });
  } else {
    el.textContent =
      target >= 1000000 ? (target / 1000000).toFixed(1) + "M" : target.toLocaleString();
  }
});

// Hero entrance
if (!reduced) {
  gsap.set([".hero-badge", ".hero-h1", ".hero-prize", ".hero-ctas", ".hero-stats-row"], {
    opacity: 0,
    y: 30,
  });
  gsap
    .timeline({ delay: 0.3, defaults: { ease: "expo.out" } })
    .to(".hero-badge", { opacity: 1, y: 0, duration: 0.6 })
    .to(".hero-h1", { opacity: 1, y: 0, duration: 1 }, "-=0.3")
    .to(".hero-prize", { opacity: 1, y: 0, duration: 0.7 }, "-=0.5")
    .to(".hero-ctas", { opacity: 1, y: 0, duration: 0.6 }, "-=0.4")
    .to(".hero-stats-row", { opacity: 1, y: 0, duration: 0.6 }, "-=0.3");
}

// Bracket reveal
if (!reduced) {
  document.querySelectorAll(".bt-match").forEach((m, i) => {
    gsap.set(m, { opacity: 0, x: -15 });
    gsap.to(m, {
      opacity: 1,
      x: 0,
      duration: 0.5,
      ease: "expo.out",
      delay: i * 0.08,
      scrollTrigger: {
        trigger: ".bracket-teams",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// Players reveal
if (!reduced) {
  document.querySelectorAll(".player-card").forEach((card, i) => {
    gsap.set(card, { opacity: 0, y: 20 });
    gsap.to(card, {
      opacity: 1,
      y: 0,
      duration: 0.6,
      ease: "expo.out",
      delay: i * 0.1,
      scrollTrigger: {
        trigger: ".players-grid",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// Prize bars
document.querySelectorAll(".pb-fill").forEach((fill, i) => {
  if (!reduced) {
    gsap.to(fill, {
      scaleX: 1,
      duration: 1.2,
      ease: "expo.out",
      delay: i * 0.1,
      scrollTrigger: {
        trigger: ".prize-bars",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  } else {
    fill.style.transform = "scaleX(1)";
  }
});

window.addEventListener("motion-preference", (e) => {
  gsap.globalTimeline.paused(e.detail.reduced);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NEXUS Championship Series — Season 8</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"https://esm.sh/gsap@3.13.0","gsap/ScrollTrigger":"https://esm.sh/gsap@3.13.0/ScrollTrigger","gsap/SplitText":"https://esm.sh/gsap@3.13.0/SplitText","gsap/Flip":"https://esm.sh/gsap@3.13.0/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/gsap@3.13.0/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/gsap@3.13.0/TextPlugin","gsap/all":"https://esm.sh/gsap@3.13.0/all","gsap/":"https://esm.sh/gsap@3.13.0/","lenis":"https://esm.sh/lenis@1.1.13/dist/lenis.mjs","three":"https://esm.sh/three@0.171.0","three/addons/":"https://esm.sh/three@0.171.0/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>
  <div class="scanline" aria-hidden="true"></div>

  <nav class="nav">
    <div class="nav-brand">
      <div class="nb-icon">⬡</div>
      <span>NEXUS</span>
    </div>
    <ul class="nav-links">
      <li><a href="#bracket">Bracket</a></li>
      <li><a href="#players">Players</a></li>
      <li><a href="#schedule">Schedule</a></li>
      <li><a href="#prize">Prize Pool</a></li>
    </ul>
    <div class="nav-live"><span class="nl-dot"></span>LIVE NOW</div>
  </nav>

  <section class="hero">
    <canvas id="hero-canvas" aria-hidden="true"></canvas>
    <div class="hero-inner">
      <div class="hero-badge">SEASON 8 · GRAND FINALS</div>
      <h1 class="hero-h1">NEXUS<br><span class="h1-lime">CHAMPIONSHIP</span><br>SERIES</h1>
      <div class="hero-prize">
        <span class="hp-label">PRIZE POOL</span>
        <span class="hp-amount" id="prize-count">$0</span>
      </div>
      <div class="hero-ctas">
        <a href="#bracket" class="btn-lime">View Bracket</a>
        <a href="#" class="btn-ghost-e">Watch Live ▶</a>
      </div>
      <div class="hero-stats-row">
        <div class="hsr-item"><span class="hsr-num" data-target="128">0</span><span class="hsr-label">Teams</span></div>
        <div class="hsr-item"><span class="hsr-num" data-target="32">0</span><span class="hsr-label">Countries</span></div>
        <div class="hsr-item"><span class="hsr-num" data-target="48">0</span><span class="hsr-label">Days</span></div>
        <div class="hsr-item"><span class="hsr-num" data-target="2100000">0</span><span class="hsr-label">Peak Viewers</span></div>
      </div>
    </div>
  </section>

  <section class="bracket-section" id="bracket">
    <div class="bracket-header">
      <span class="section-tag">// Tournament Bracket</span>
      <h2>ROAD TO<br><span class="lime-text">VICTORY</span></h2>
    </div>
    <div class="bracket-visual">
      <canvas id="bracket-canvas" aria-label="Tournament bracket visualization"></canvas>
      <div class="bracket-teams" id="bracket-teams">
        <!-- Quarterfinals -->
        <div class="bt-match qf" style="--row:1">
          <div class="bt-team bt-team--win">PHANTOM</div>
          <div class="bt-team">VORTEX</div>
        </div>
        <div class="bt-match qf" style="--row:2">
          <div class="bt-team bt-team--win">APEX</div>
          <div class="bt-team">STORM</div>
        </div>
        <div class="bt-match qf" style="--row:3">
          <div class="bt-team bt-team--win">ZERO</div>
          <div class="bt-team">BLAZE</div>
        </div>
        <div class="bt-match qf" style="--row:4">
          <div class="bt-team">NOVA</div>
          <div class="bt-team bt-team--active">CTRL</div>
        </div>
        <!-- Semifinals -->
        <div class="bt-match sf" style="--row:1">
          <div class="bt-team bt-team--win">PHANTOM</div>
          <div class="bt-team">APEX</div>
        </div>
        <div class="bt-match sf" style="--row:2">
          <div class="bt-team">ZERO</div>
          <div class="bt-team bt-team--active">CTRL</div>
        </div>
        <!-- Finals -->
        <div class="bt-match final">
          <div class="bt-team bt-team--win">PHANTOM</div>
          <div class="bt-team bt-team--active">CTRL</div>
        </div>
      </div>
    </div>
  </section>

  <section class="players-section" id="players">
    <span class="section-tag">// Featured Players</span>
    <h2>TOP <span class="lime-text">COMPETITORS</span></h2>
    <div class="players-grid">
      <div class="player-card player-card--featured">
        <div class="pc-rank">#1</div>
        <div class="pc-avatar pc-avatar--1"></div>
        <div class="pc-info">
          <div class="pc-handle">SPECTER</div>
          <div class="pc-real">Marcus Chen</div>
          <div class="pc-team">PHANTOM</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">94.2%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.8</span><span class="pcs-key">K/D Ratio</span></div>
          <div class="pcs-item"><span class="pcs-val">2,840</span><span class="pcs-key">Kills</span></div>
        </div>
      </div>
      <div class="player-card">
        <div class="pc-rank">#2</div>
        <div class="pc-avatar pc-avatar--2"></div>
        <div class="pc-info">
          <div class="pc-handle">GHOST</div>
          <div class="pc-real">Elena Voss</div>
          <div class="pc-team">CTRL</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">91.7%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.5</span><span class="pcs-key">K/D Ratio</span></div>
        </div>
      </div>
      <div class="player-card">
        <div class="pc-rank">#3</div>
        <div class="pc-avatar pc-avatar--3"></div>
        <div class="pc-info">
          <div class="pc-handle">BLITZ</div>
          <div class="pc-real">Yuto Nakamura</div>
          <div class="pc-team">ZERO</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">88.4%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.2</span><span class="pcs-key">K/D Ratio</span></div>
        </div>
      </div>
      <div class="player-card">
        <div class="pc-rank">#4</div>
        <div class="pc-avatar pc-avatar--4"></div>
        <div class="pc-info">
          <div class="pc-handle">SURGE</div>
          <div class="pc-real">Priya Sharma</div>
          <div class="pc-team">APEX</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">86.1%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.0</span><span class="pcs-key">K/D Ratio</span></div>
        </div>
      </div>
    </div>
  </section>

  <section class="prize-section" id="prize">
    <div class="prize-inner">
      <span class="section-tag">// Prize Distribution</span>
      <h2>TOTAL POOL<br><span class="lime-text" id="prize-big">$2,100,000</span></h2>
      <div class="prize-bars">
        <div class="pb-item"><span class="pb-place">1st</span><div class="pb-bar"><div class="pb-fill" style="--w:100%"></div></div><span class="pb-amount">$1,000,000</span></div>
        <div class="pb-item"><span class="pb-place">2nd</span><div class="pb-bar"><div class="pb-fill" style="--w:50%"></div></div><span class="pb-amount">$500,000</span></div>
        <div class="pb-item"><span class="pb-place">3rd</span><div class="pb-bar"><div class="pb-fill" style="--w:28%"></div></div><span class="pb-amount">$300,000</span></div>
        <div class="pb-item"><span class="pb-place">4th</span><div class="pb-bar"><div class="pb-fill" style="--w:14%"></div></div><span class="pb-amount">$150,000</span></div>
        <div class="pb-item"><span class="pb-place">5–8th</span><div class="pb-bar"><div class="pb-fill" style="--w:7%"></div></div><span class="pb-amount">$37,500 ea</span></div>
      </div>
    </div>
  </section>

  <footer class="footer-e">
    <div class="nb-icon" style="color:#a3ff12">⬡</div>
    <span>NEXUS Championship Series · Season 8</span>
    <span>© 2025 NEXUS Esports LLC</span>
  </footer>

  <script type="module" src="script.js"></script>
</body>
</html>

Esports Tournament — NEXUS

Source

Repository: libs-genclaude
Original demo id: 54-esports-tournament

Code

Esports Tournament — NEXUS

Source

Notes