Case study 04 · Self-directed · AI + code
World Cup 2026 — Building the experience I designed.
An interactive World Cup explorer built with SYX, GSAP, Three.js and Leaflet, used to demonstrate end-to-end execution with AI-assisted development.
- Role
- Product Designer · builder
- Base
- SYX
- Interaction
- GSAP · Three.js · Leaflet
- Mode
- AI-assisted development
Live product evidence
The deliverable is the running experience.
This preview renders the published World Cup 2026 explorer directly inside the case study. It gives immediate visual context while keeping the full experience one click away.
SYX / INTERACTIVE EXPLORER
2026Product idea → interaction → AI-assisted code → working experience
Why I built it
Prove that my role can extend beyond hand-off.
The project is self-directed and deliberately interaction-heavy. I used it to explore how far I could take a product concept when AI-assisted development operates inside a system I already understand and govern.
System first
SYX provides the constraints before AI writes the implementation.
The project is built on SYX rather than generated as an isolated page. That gives the work an existing language for tokens, components, CSS architecture and reuse.
Interaction
Use motion and spatial interfaces as product tools.
The explorer combines mapping, 3D and motion technologies. The work was not adding libraries but coordinating them into one navigable experience, with a single interaction language across all three.
AI workflow
AI expands what I can execute directly.
Instead of presenting AI as authorship, I present it as an execution layer: I define the intent, constraints and system; AI helps accelerate implementation and iteration.
Takeaway
The deliverable is the running product.
This case demonstrates a different endpoint from a traditional design hand-off: a live interactive experience that can be inspected as product and code.