Crafting a Website Experience that Embodies Narrative Through Movement

Podium specializes in creating films centered on running culture, conveying narratives that celebrate the nuances of athleticism. Their projects showcase the ambient sounds of exertion, the beauty of nature, and the human spirit that thrives in athletic pursuits.

The concept for their website stemmed from a keen observation: their films imbue a rhythmic quality, yet typical portfolio websites tend to fracture that rhythm into isolated segments. This led to the desire for an online experience that mirrors and enhances their storytelling.

The project evolved over several weeks, shifting from initial ideas to final implementation. A pivotal moment was when the team opted for a continuous, sequence-based structure instead of the conventional page layout. This decision significantly affected everything from site navigation to the hierarchy of content presentation.

Selected Technology and Development Tools

The website was designed as a bespoke front-end experience, specifically constructed for precise control over timing, media management, and animated sequences.

• Zustand: Manages shared interaction states, including pointer coordinates, scroll position, transition phases, and overall scene management.
• Next.js: Supplies the necessary framework, routing, metadata handling, and server-side rendered entry points.
• React: Facilitates the component system and state-responsive user interfaces.
• GSAP: Underpins the animation layer, utilizing ScrollTrigger for scroll animations and Flip for transitions.
• Lenis: Ensures smooth scrolling, working in tandem with GSAP for synchronized animations.
• Three.js / React Three Fiber: Powers WebGL integration, enhancing features like interactive backgrounds and 3D graphics.
• DatoCMS: Acts as a content management system, permitting adaptable editorial control.

Feature Highlights

1. Interactive Homepage Design

The site's homepage captivates visitors with a responsive shape that reacts dynamically to mouse movements, illustrating Podium's distinctive visual language. The interplay between the cursor and shape creates a grainy texture intended to draw users into the site's aesthetic.

The effect is achieved through a method that involves texture blending and cursor influence, producing a tactile experience that evokes depth and atmosphere.

2. Cohesive Interaction Aesthetics

This focus on visual texture is echoed in micro-interactions throughout the site. Text isn't simply introduced; rather, it appears character by character in an intentionally uneven pattern. Hover states present pixelated interactions instead of larger decorative animations, contributing to an integrated aesthetic across various elements.

3. Fluid Project Transitions

When navigating through projects, the transitions are crafted to maintain continuity rather than presenting the sensation of shifting between distinct pages. Upon selecting a project, the corresponding media becomes the focal point of the transition, evolving smoothly into the new content.

The iterations for these transitions have been carefully refined. The final design opts for simplicity, letting the media itself guide the transition without distracting overlay effects.

Visual and Interaction Philosophy

The design philosophy emphasizes restraint and rhythmic progression. Aimed at reducing clutter, the website achieves a streamlined interaction model that places significant importance on scrolling dynamics, subtle animations, and a clearly defined typographic structure.

In this framework, the site's slow-paced experience enhances users’ immersion, with elements gradually revealing themselves, paralleling the essence of running—a vivid, continuous journey.

Lessons Learned

This project underscored a significant principle: not every digital experience needs to be fast-paced. Some of the most impactful sites allow for thoughtful pacing, inviting users to linger and absorb.

The process of developing Podium's site offered insights into viewing digital experiences as temporal narratives that unfold over time. It reinforced the significance of design simplicity, opting for removal over addition, enabling content to breathe and shine.

Ultimately, Podium now boasts a site that does more than showcase its portfolio; it creates an immersive environment where each film resonates deeply, complementing the intended storytelling rhythm. It stands as a testament to how the finest digital experiences communicate not by excess, but through thoughtful refinement.