Framer + AI
This project was made using Framer and an AI tool (Claude & V0)
The Company
Outpost is a remote-first gaming studio rooted in curiosity, camaraderie, and creative freedom. From scattered time zones to shared virtual worlds, the team thrives on collaboration across distance.
Every quarter, Outpost gathers in person for a three-day retreat—an intentional pause to reconnect, reflect, and recharge. These retreats are filled with unforgettable moments: immersive workshops, late-night conversations, spontaneous laughter, and the kind of creative energy that only comes from being together.
Now, the studio is finding ways to capture and celebrate these moments—preserving the spirit of each retreat as part of Outpost’s evolving story.
The goal is to document Outpost’s quarterly three-day retreats throughout 2025 capturing the spirit of connection, creativity, and shared purpose. These gatherings reflect the company’s commitment to fostering a vibrant, remote-first community where curiosity and camaraderie thrive beyond the screen.
Photo galleries are nothing new they’ve evolved over the years through platforms like Instagram, Pinterest, and similar apps. Yet, after studying their design patterns, a clear trend emerges: repetition has replaced innovation.
Most galleries rely on predictable grid layouts, occasionally alternating with vertical or horizontal scroll patterns. While these formats are efficient and familiar, they rarely evoke surprise or delight. The experience is functional, but lacks the emotional impact, the “WOOOW!” factor that truly memorable interfaces deliver.
This observation sparked a deeper exploration into how gallery design can move beyond convention and invite users into something more immersive, expressive, and unexpected.
To make the gallery both visually engaging and intuitive to navigate, I introduced a Tri-view system consisting of:
Relaxed View, Spatial View, and Grid View, each offering a distinct way to experience Outpost’s retreat memories.
The Relaxed View
This mode is designed for passive immersion. Images play in a gentle, uninterrupted sequence, focusing on one photo at a time. It requires minimal or no input from the user, allowing them to absorb each moment slowly, ideal for reflection, ambiance, or storytelling without distraction.
The Spatial View
This mode is designed for passive immersion. Images play in a gentle, uninterrupted sequence, focusing on one photo at a time. It requires minimal or no input from the user, allowing them to absorb each moment slowly, ideal for reflection, ambiance, or storytelling without distraction.
In this mode, images float freely in a 3D space unbound by traditional vertical or horizontal patterns. This dynamic layout reflects the fluid, decentralized nature of Outpost’s remote-first structure. By adding depth and dimensionality, the Spatial View invites users to explore retreat moments in a way that feels immersive and emotionally resonant.
The Grid View
The Grid View offers a toggle back to a more conventional 2D interface. However, rather than using a rigid grid, images are arranged on a flat canvas with no strict vertical or horizontal alignment. This layout maintains visual interest while providing a familiar frame of reference for quick browsing and documentation.
Together, these views balance navigational clarity with expressive storytelling, allowing users to experience Outpost’s culture in both structured and exploratory ways.
Concept of the Relaxed Mode.
To capture the essence of Outpost’s past retreats, I approached the gallery concept through the lens of time, treating each moment as part of a living archive. I began by creating a low-fidelity prototype in Figma, using it as a structural guide to shape a more meaningful and emotionally resonant design. This time-based framework helped transform static memories into a dynamic storytelling experience.
Using Low low-fidelity prototype fromFigma combined with descriptive prompting/
Concept of the Grid View.
Staying true to the principle of avoiding strict vertical or horizontal alignment, the Grid View arranges images freely across a flat 2D canvas. Within this layout, I introduced an “uber image” a focal visual element that autonomously cycles through all gallery images within its own quadrant. This creates a dynamic centrepiece that anchors the layout while maintaining the exploratory, non-linear spirit of the overall design.
Using Figma, I created a series of low-fidelity prototypes to guide the overall design direction. These early sketches helped establish layout structure, interaction flow, and visual hierarchy—serving as a foundational blueprint for more refined iterations.
To bring this concept to life, I used V0, an AI-powered design tool that enabled rapid, iterative feedback throughout the process. Its integration with React Three Fiber (R3F) added dimensional depth that closely aligns with my 3D design sensibilities enhancing the spatial experience of the gallery.
I guided the AI by supplying a series of low-fidelity prototypes created in Figma, which served as structural references and helped translate abstract ideas into meaningful visual outcomes. This collaboration between manual design and AI acceleration allowed for both creative control and technical precision.