Rift — Esports Tournament & Community Platform (Next.js)

UI20 Rift is the gaming/esports kit in the Empire UI catalogue. Frontend-only, static-export, no backend — bring your own API. Built for tournament organisers, league commissioners, esports orgs, and competitive players.

Tagline: Compete. Watch. Dominate. Domain: rift.gg · riftapp.gg Display font: Oxanium (gaming-native angular geometric sans) Accent: electric indigo oklch(0.68 0.26 284) — high chroma for neon energy Background: deep-space dark oklch(0.050 0.010 284) — same hue (NOT hue-15) for distinctly gaming feel

What's Inside

• 3-tier OKLCH colour token architecture (Primitive → Semantic → Component) with dark-first theming + light-mode toggle.
• 24 routes — landing, /features deep-dive, /games (8 supported games), /pricing with comparison table, /about, /contact, /blog (3 gaming-themed posts), legal scaffolding (privacy / terms / cookie / accessibility / DMCA / do-not-sell / security), auth (Discord + Twitch + Google OAuth UI shells, 2-step register wizard with role selector), and 8 dashboard surfaces.
• Dashboard suite — Overview (KPI strip + 30-day activity chart + featured tournament) · Tournaments (bracket tree + single/double-elim toggle) · Teams · Players (radar charts + tier badges) · Matches (Live/Upcoming/Completed) · Leaderboard (top-3 podium) · Analytics (win-rate trend, pick frequency, team radar overlay) · Stream (live embeds + VOD archive) · Settings.
• Animation system — CSS entrance animations for LCP, Motion (motion/react) for interactive UI, GSAP + Lenis for scroll
• Accessibility — skip link, focus-visible rings, ARIA labels, min-h-11 touch targets, reduced-motion support
• Performance — dynamic imports for below-fold sections, mobile static mode, system font on mobile, noise grain overlay

Quick Start

# Bootstrap pnpm (the kit pins `packageManager` so Corepack picks the right version)
corepack enable

pnpm install
pnpm dev

See INSTALLATION.md for full setup instructions, including the manual npm i -g pnpm fallback if Corepack isn't available.

Customisation

See CUSTOMIZATION.md for the 5-file rebranding checklist and token architecture guide.

Demo Content

WARNING: Every page marked with /* DEMO CONTENT */ contains placeholder text. You must replace all demo content before publishing. See DEMO_CONTENT.md for a full inventory.

Documentation

Tech Stack

• Next.js (App Router, static export)
• Tailwind CSS v4 + shadcn/ui
• Motion (motion/react) (page transitions, interactive UI)
• GSAP + Lenis (scroll animations, smooth scroll)
• Three.js + React Three Fiber (3D scenes — kit-specific)
• TypeScript (strict mode)
• Lucide (icons)

Licence

Commercial licence — see LICENCE.md. One licence per production project.

Template Empire — Halbon Labs