2026
game design
exploration
engineering the fourth dimension
The development of SuperTracers started with a logic puzzle: How can two players occupy the same space while existing in different times? My goal was to transform the "Time-Switch" from a visual effect into a core strategic pillar. I engineered a Causality-System where the Past (Timeline A) serves as the functional blueprint for the Future (Timeline B). Through iterative logic mapping, I developed the "Echo-Link"—a mechanical bridge where actions in one era trigger physical consequences in the next. This required a parallel design approach: drafting gameplay rules and "Paradox" lore simultaneously to ensure the technocratic worldbuilding justifies the high-speed manipulation of reality.
the core loop & flowchart architecture
To validate the Linked Timeswitch, I entered a flow-logic phase. I mapped the Core Loop—Race, Interfere, Switch, Win—to pinpoint cognitive friction. The challenge: balancing "Mastermind" strategy (long-term planning) with "Survivor" reflexes (120-second bursts). The resulting Logic Flowchart became the project’s "Source of Truth." It ensured every Chrono-Core and Echo-Link had a mathematically sound impact on the race’s outcome.
modular level design (chunk-system)
Instead of static levels, I engineered a Modular Chunk-System. This architecture breaks the game into reusable segments, categorized by intensity and causality-potential to create a scalable difficulty curve. The system generates thousands of unique race variations, preventing players from simply memorizing courses. By prioritizing procedural variability, I ensured a level playing field where mechanical skill outweighs rote memorization. Looking ahead, the design supports seasonal chunk rotations to keep the gameplay dynamic long-term.
beyond the clock-trope: defining a new era
Most time-travel games rely on gears, clocks, or neon-blue portals. For SuperTracers, I wanted to avoid these clichés to establish a more sophisticated, "High-Society" atmosphere for the Paradox organization. The visual language was born from a unique fusion: the elegance of Art Deco, the coldness of Space-Horror, Korean signs, and the precision of Nautical-Astrologie.
I developed the "Church Window Contrast" as a core visual pillar. By using highly saturated, luminous colors against a deep "Off-Black" background, the UI mimics the way light breaks through stained glass. This doesn't just look premium; it serves the gameplay by making critical path elements and the parkour itself pop with maximum clarity during high-speed runs.
Extract of the moodboard:
systematizing the aesthetic
To bridge the gap between concept art and a functional game, I translated these influences into a rigorous Atomic Design System within Figma. Every UI element follows the technocratic rules of Paradox.
The Gold-Hierarchy: I established three distinct shades of gold to manage information depth—from "Light Gold" for highlight to "Muted Gold" for secondary structural elements.
The Accent: A green accent color was added to highlight interactive parts in the UI
FancyBorders: These custom-engineered frame components use sharp, futuristic geometries to frame the "asynchronous" viewports, grounding the chaotic time-shifts in a stable, premium UI.
the gdd as a technical manifest
This phase culminated in the final 40-page Game Design Document (GDD). While the logic was set in Phase 1, the GDD acted as the final "Style Guide" and "Technical Bible," documenting everything from the Korean-inspired typography (chosen for its sharp, technical feel) to the specific Orbit-animations of the event logo. It serves as the bridge between my conceptual design and the final implementation in Phaser and the Pitch-Website. The GDD was expanded by a 7 page lore document later on to give a deep dive into the lore of SuperTracers and Paradox.
check out the gdd:
Clicking the button loads external assets. Please see the Privacy Policy for details.
validating flow & physics
Before committing to high-fidelity assets, I conducted a dual-track prototyping phase to bridge the gap between abstract logic and actual gameplay.
The Figma Prototype was essential for validating the "Macro-Loop." I used it to test the interaction logic of the Paradox-Menu systems, the trophy-based progression, and the map-selection flow. This ensured that the navigation felt as sharp and elitist as the Paradox organization itself, while making the ranking system intuitive for the Achiever and Conqueror player types.
figma prototype:
Clicking the button loads external assets. Please see the Privacy Policy for details.
the "fun factor" stress-test
The Phaser.js Prototype was where the theory met the road. My primary goal was to see if the "Causality-System" actually worked in practice or only on paper. I developed an integrated Debug Panel that allowed me to tweak physics constants, movement speed, and VFX settings in real-time.
This stage was less about final graphics and more about finding the "Golden Ratio" of the movement physics. By live-adjusting variables like gravity scales and dash-cooldowns, I was able to fine-tune the gameplay flow until the transition between the Past and Future timelines felt seamless and—most importantly—rewarding. Testing the core loop in a functional JS environment proved that the tactical depth of the Linked Timeswitch translated into an engaging, high-stakes experience.
phaser prototype:
Clicking the button loads external assets. Please see the Privacy Policy for details.
the paradox entry point
The culmination of the project was the creation of a professional Pitch Deck and an Immersive Promo Website. Having validated the mechanics, the goal shifted to marketing: How do you sell a high-concept time-travel racer to a competitive audience?
The website serves as a "Digital Portal" into the Paradox universe. I translated the game’s core visual pillars into a responsive web experience using HTML, CSS, and JavaScript.
bringing the glitch to the browser
To mirror the game’s "Temporal Instability," I engineered a custom CSS-Glitch System. By utilizing timing functions and keyframe-based displacement, the UI reacts to user interaction by "glitching" between the high-end dark mode and a raw, "Sketch-Version" (Light Mode). This interaction reinforces the lore—showing that beneath the polished surface of Paradox, the timeline is fracturing. The result is a conversion-driven landing page that doesn't just show the game, but lets the user feel the world of SuperTracers. Clicking the "Chrono-Core" in the top left of the navigation activates the time switch.
Clicking the button loads external assets. Please see the Privacy Policy for details.