Lobby

A competitive-game companion interface with code-painted map art, a three.js ruby rank emblem, match scoreboards, a round replay and squad tools.

• Best forDevelopers building gaming companion apps, player-stat hubs and team portals.

• Overview

  Browse season banners, inspect the three.js rank gem, open recent matches and claim fictional weekly mission rewards.

• Matches

  Filter match history, inspect both team scoreboards and follow the round-by-round race to the winning score.

• Arena

  Play, pause and scrub a scripted isometric round replay, select rounds and inspect the player list and kill feed.

• Squad

  Review the roster and duo-synergy matrix, try a local ready check and inspect upcoming scrims and the map pool.

• Rank emblem and original key art

  A three.js faceted ruby sits on a stone plinth with a rank-up reveal, drag rotation and hover movement. Map scenes are painted in code and reused across banners and cards.

• Match and replay controls

  Match filters, scoreboards, round timelines and a Canvas 2D replay include playback speed, scrubbing, round selection and trail toggles.

• Squad workspace

  A roster, pairwise synergy chart, local ready state and scrim schedule demonstrate team-management interface patterns.

• Responsive and reduced motion

  Four views include keyboard navigation and a layout for smaller screens. The hydration-safe reduced-motion hook shows composed still states; three.js scenes include lighter software-rendering tiers and a fallback when WebGL is unavailable.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

The game, maps, players, matches and stats are invented. Replay paths are scripted, rewards and ready state are local, and matchmaking is a timer. No game API, account, matchmaking, voice, presence service or backend is connected.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Three.js, Lucide icons
• FontsBig Shoulders, DM Sans
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.