Podium is a manufacturing studio creating movies round operating, path, and athletic tradition, however at all times by way of a story lens.
Their work captures what occurs round efficiency: the silence, the hassle, the setting, the human presence.
The preliminary thought for the location got here from a easy remark: their movies already carry a robust rhythm, but most portfolio web sites would break that rhythm into disconnected items.
We needed to construct an expertise that might prolong their storytelling as an alternative of flattening it.
The mission took form over a number of weeks, from early ideas to ultimate implementation. One of many key turning factors was transferring away from a page-based construction early on and committing to a steady, sequence-driven expertise. That call influenced the whole lot, from navigation to transitions to content material hierarchy.
The principle problem was restraint. Not what to construct, however what to take away.
Tech Stack & Instruments
The location was constructed as a customized front-end expertise, with the stack chosen primarily for timing management, media dealing with, and animation precision.
- Zustand handles shared interplay state comparable to pointer place, scroll progress, transition phases, and scene state.
- Subsequent.js supplies the construction, routing, metadata, and server-rendered content material entry factors.
- React is used for the part system and state-driven UI transitions.
- GSAP powers the animation layer, particularly ScrollTrigger for scroll-linked scenes and Flip for web page transitions.
- Lenis is used for easy scrolling, synchronized with the GSAP ticker so scroll and animation share the identical rhythm.
- Three.js / React Three Fiber drives the WebGL scenes, together with the hero shader, the mosaic part, and the 3D footer object.
- DatoCMS manages mission and homepage content material, maintaining the editorial construction versatile.
Characteristic Breakdowns
1. Hero Grain and Mouse Texture
The homepage begins with a form that reacts to the cursor. The intention was to spotlight one of many important components of Podium’s visible language: grain.
The mouse motion is written right into a small path texture. That texture is then handed to the shader and used as an affect map. The cursor doesn’t transfer the form immediately. It disturbs the fabric inside it.
One necessary element is the mix mode: distinction. The path isn’t just painted usually into the feel. Distinction mixing creates distinction by evaluating the prevailing texture values with the brand new enter, which supplies the hint a sharper, much less polished really feel. That’s helpful right here as a result of the impact must really feel nearer to picture grain than to a comfortable glow.
const [mouseTexture, onMove] = useTrailTexture({
dimension: 1024,
maxAge: 600,
mix: 'distinction',
radius: 0.095,
depth: 0.1,
minForce: 0.5,
});
useFrame(() => {
const { uvX, uvY, moveId } = usePointerStore.getState();
if (moveId !== lastMoveIdRef.present) {
lastMoveIdRef.present = moveId;
onMove({ uv: { x: uvX, y: uvY } });
}
});On the shader aspect, the path texture is blended with noise and used to offset the UVs.
The result’s native distortion: the picture feels prefer it has a floor, and the cursor briefly reveals that floor.
2. Pixel Language in Micro-interactions
The identical visible thought seems in smaller interactions throughout the location. Textual content doesn’t merely fade in. It typically seems character by character, with a barely irregular order. Hover states additionally use small pixel-like behaviors as an alternative of huge ornamental animations.
const cut up = SplitText.create(el, {
sort: 'phrases,chars',
charsClass: 'char',
wordsClass: 'phrase',
});
gsap.to(cut up.chars, {
opacity: present ? 1 : 0,
period,
stagger: { quantity: staggerAmount, from: 'random' },
});This offers the interface a cohesive visible texture. The pixel therapy connects the hero, the typography, the mission controls, and the small hover moments with out over-explaining the model. It’s current sufficient to be felt, however restrained sufficient to remain within the background.
3. Web page Transitions
Mission transitions had been designed to keep away from the sensation of leaving one web page and loading one other. When a person clicks a mission, the chosen media turns into the transition object.
The animation begins from the media’s present place within the grid. A short lived overlay is positioned precisely on prime of it, utilizing the identical visible asset. That overlay then expands into the mission hero whereas the route modifications beneath.Â
This makes the transition really feel related to the content material as an alternative of hooked up to the interface.
We went by way of a number of iterations right here. One model used a pixel-style background throughout the web page transition, but it surely began to really feel too heavy and never refined sufficient for the ultimate path. It was visually attention-grabbing, but it surely pulled consideration away from the mission media.
The ultimate model is deliberately easy and exact: the picture or video itself carries the transition, with out including a separate visible impact on prime of the media.
Visible & Interplay Design
The design is constructed round restraint and rhythm.
We deliberately prevented heavy visible results. As a substitute, we targeted on:
- Pacing by way of scroll
- Delicate transitions
- Robust typographic hierarchy
- Beneficiant spacing
Scroll turns into the first interplay mannequin, not only for navigation, however for storytelling.
There’s a deliberate slowness to the expertise. Components don’t seem immediately; they emerge. This mirrors the character of operating itself which is progressive, steady, immersive.
Transitions are comfortable and directional, typically vertical, reinforcing the thought of motion by way of area reasonably than leaping between states.
Reflections
This mission strengthened one thing we imagine strongly: Not each web site must be quick in the identical method. Generally, slowing down is what creates affect.
Engaged on Podium pushed us to consider digital experiences as temporal objects, not simply constructions, however sequences that unfold over time. It challenged us to design with restraint, to take away reasonably than add, and to belief the content material sufficient to present it area.
It additionally highlighted the significance of alignment. When the topic, the storytelling, the design, and the event all transfer in the identical path, the expertise turns into cohesive in a method that feels pure.
Podium now has a web site that doesn’t simply current its work, it extends it. An area the place movies can exist in the fitting situations, with the fitting rhythm.
A reminder that typically, the perfect digital experiences are those that don’t attempt to say extra, however say it higher.
