Mantrika Games Official Website — 3D Showcase Upgrade Final Report
Executive Summary
The official Mantrika Games website (mantrikagames.github.io) has been upgraded into a tactile 3D physical tabletop board game showcase.
Visitors to the website are immediately immersed in the feel of a premium handcrafted board game studio, evoking the immediate sentiment:
“I want to play these games — they look like beautiful physical board games.”
🎨 Design System & Visual Identity
1. Unified Brand Palette
- Warm Ivory (
#FAF8F3/#FFF8DC): Soft editorial background paper. - Deep Walnut (
#4E342E/#2B160C): Hand-carved board frame frames & wood accents. - Antique Gold (
#D4AF37/#C89B3C): Metallic gradients, bevel rims, and interactive focus states. - Charcoal Ebony (
#0F0D0C/#1F2937): Deep contrast text and dark mode tabletop backing.
2. Intentional Dark Mode
- Upgraded from simple color inversion into a handcrafted ebony & antique gold studio night aesthetic.
🏛️ Reusable 3D Rendering & Component System
1. board-showcase.js — Framework-Free 3D Physical Board Engine
- High-DPI HTML5
<canvas>rendering system supporting 9 distinct board geometries:- Square Grid (Gomoku 15x15 / Chowka Bara 5x5)
- Mills Board (Nine Men’s Morris 3 concentric squares with 24 intersection nodes)
- Cross Board (Pachisi & Chaupar 4-arm cross)
- Hex Grid (Hex 11x11 pointy-topped hexagons)
- Quoridor Board (9x9 grid with grooves and physical 3D wood wall barriers)
- Surakarta Board (6x6 grid with circular loop tracks)
- Mancala Board (Pallanguzhi 14 carved trough cups)
- Mandala Board (Pretwa 3 concentric circles)
- Diamond Grid (Twelve Beads 25-node grid)
2. tilt-system.js — 3D Cursor Perspective Engine
- Smooth
requestAnimationFrame-driven 3D cursor tilt with lerp interpolation. - Mobile Touch Safety: Automatically disables pointer tilt on touch devices (
pointer: coarse). - Accessibility: Honors
prefers-reduced-motion: reduceby disabling tilt, parallax, and transitions.
🚀 Key Page & Section Upgrades
| Section / Page | Upgrade Highlights |
|---|---|
| Homepage Hero | Floating 3D wooden tabletop showcase board featuring 3D polished stone pieces, gold bevel highlights, dual-stage contact shadows, and interactive cursor tilt |
| Featured Games | 3D Tabletop Game Cards with live 3D board canvas previews, tactile material depth, player count badges, and “Play 3D / Explore” CTAs |
| Board of Mills Collection | Dedicated collection suite section showcasing Nine Men’s Morris, Twelve Men’s Morris, Six Men’s Morris, and Morabaraba |
| World Series Showcase | Feature showcase grid for Gomoku World, Reversi World, Ataxx World, Hex World, Quoridor World, and Surakarta World |
| Dedicated Collection Page | /board-of-mills/ suite page detailing the historical origins, rules, and variations of Mills strategy games |
⚡ Performance & Build Verification
- Jekyll Build Status:
bundle exec jekyll buildcompleted cleanly in 0.388s with 0 build errors. - JavaScript Syntax: All scripts validated cleanly with 0 syntax errors.
- Zero Heavy Dependencies: Pure HTML5, SCSS, Vanilla JS, and Canvas. No heavy React/Next.js/Three.js bundles added.
- Page Load Budget: Fast rendering speed with procedural Canvas graphics replacing heavy photographic PNGs.