Blankspace: Redefining Navigation via the "Mario" Principle

The Challenge: Breaking the "Navigation Monotony"

Standard web navigation has become predictable—often relying on repetitive top-bars or hidden "hamburger" menus that require precise cursor aiming and multiple clicks. For Blankspace, my goal was to eliminate this friction. I aimed to create a "zero-aim" interface: an experimental, single-page flow where the user explores the narrative through a single, natural gesture.

The Philosophy: The "Mario" Principle

I was inspired by Scott Jenson’s (UX Lead at Google/Apple) talk on Nintendo’s Super Mario. In the game, a single input—the "Jump" button—executes multiple contextual actions: overcoming obstacles, collecting rewards, and neutralizing threats.

The Hypothesis: Can we translate this "Single-Input" logic to the web?

By mapping Scroll as the primary interaction driver, I replaced traditional click-navigation with a physics-based section-switching system. In this model, scrolling doesn't just move the page; it manages state transitions and triggers contextual animations.

The Process: An Agentic Workflow

To move from a blank canvas to a deployed product in under seven days, I utilized an AI-augmented development cycle:

Design & Ideation (Figma)

Phase A: I began with traditional wireframes, but quickly realized they felt too static for the "Mario" principle.

Phase B (The Pivot): I moved toward a spatial layout where the bottom navigation is a byproduct of the scroll itself. This "Minimalist-First" approach ensures the content remains the focal point while the UI reacts to user behavior.

Development (Google Antigravity IDE)

With the design finalized, I moved into Google’s Antigravity Agentic IDE. This allowed me to:

• Rapidly Prototype Logic: I used agentic prompts to build the complex intersection observers and scroll-snapping logic required for a seamless "One-Input" feel.
• Fine-Tuning: The IDE enabled me to iterate on the velocity and easing of transitions in real-time, ensuring the experience felt organic on both Desktop and Mobile.

Deployment (Firebase)

The site was deployed via Firebase Hosting, ensuring a high-performance, low-latency delivery that matches the site's minimalist philosophy.

Key Technical Features

• Reduced Cognitive Load: By removing the need to "find" buttons, users can focus entirely on the content. The interface adapts to the user, not the other way around.
• Agentic Efficiency: Leveraging an agentic IDE allowed me to handle complex state management and navigational code within a strict one-week deadline.
• Privacy-by-Design: In alignment with European standards (GDPR), the site is built with a "Zero-Tracking" philosophy—no unnecessary data collection, no advertisements, just pure interaction.

Results & Learning

Blankspace serves as a proof-of-concept for Human-Centric Interaction. It taught me how to compress the bridge between a high-level design philosophy and a functional technical implementation using AI tools. The result is a high-polish, "frictionless" experience that proves minimalism is not just about aesthetics—it's about the economy of movement.

If you're interested