Role & Team
I joined as an external Product Designer and Framer expert. My role was to take an ambitious motion and 3D-heavy concept and turn it into a robust, performant implementation in Framer.
The project was delivered in close collaboration with:
- A Creative Director, who led the overarching creative vision and narrative.
- An Art Director, who set the visual direction and core brand assets.
- An Experience Designer, who contributed design direction and produced the 3D assets.
Within this team, I was responsible for the Framer architecture, motion system, and all custom code integrations, acting as the bridge between visual concept and technical execution. This project was completed over a period of 5 weeks from initial concept to deployment.
Context & Problem
Experience.Lab needed a site that did more than list services and logos. It had to:
- Convey the studio’s identity as a high-end, creative-technology practice in Tokyo.
- Demonstrate motion, interaction, and 3D capability at a level that matched the team’s client work.
- Feel editorial and crafted, not like an off‑the‑shelf template.
- Be maintainable by the internal team and compatible with Framer as a core tool.
The most significant challenge was navigating the tension between ambition and constraints. The desired experience involved:
- Continuous, scroll‑tied storytelling.
- Complex timeline animations.
- A prominent 3D hero element.
- A “Tokyo at night” dark mode that was more than a cosmetic theme.
All of these elements had to run smoothly across a range of devices and connection speeds, without compromising on visual quality.
Goals & Success Criteria
From the outset, the project was anchored to a few clear goals:
- Build a brand site that feels like a cohesive, cinematic experience rather than a simple brand introduction.
- Use Framer to its full potential, combining native tools with custom code to achieve a level of motion and interactivity that would stand out even to design‑savvy audiences.
- Treat performance as a first‑class constraint, ensuring that 3D, imagery, and animation do not degrade responsiveness.
- Deliver a structure the Experience.Lab team can update, extend, and iterate on after launch.
Success was evaluated through internal feedback, Framer community response, and engagement signals. The site was subsequently submitted to Framer’s Community Awards in the “Best Animations” category, and early analytics showed average session times above three minutes, indicating that visitors were not only landing, but also exploring the experience in depth.
Approach & Process
Translating the Creative Direction into a Framer System
The core creative idea was defined early on by the team: Experience.Lab should feel layered, energetic, and slightly surreal, but framed with the clarity and restraint needed for a professional, boutique studio.
My first step was to translate the creative direction, focusing on visual impact, and translating it into a system that Framer could handle reliably:
- Break the narrative into scroll‑linked sections that flow naturally without feeling like a long, single‑purpose landing page.
- Define motion “bands” for key sections, where motion is dense and expressive vs. where it needs to prioritise clarity and readability.
- Componentise large sections that required more complex interactions or animations.
This system-first thinking ensured that as new ideas emerged, they could be slotted into existing patterns rather than becoming one‑off exceptions that risked instability or costly tinkering further down the line.
Extending Framer with Custom Code Components
Many of the desired interactions were achievable with Framer’s built‑in tools. However, several requirements pushed beyond what could be comfortably managed with existing tooling:
- A custom 3D model viewer for the Experience.Lab lion mascot.
- Fine‑grained control of scroll‑bound animation timelines.
- More advanced state handling to keep interactions responsive regardless of scroll speed and device.
To address this, I implemented custom React‑based code components inside Framer.
The 3D model viewer was built with Three.js and integrated as a Framer code component, allowing tighter control over loading, scene composition, and interaction than a generic embed. I used Claude Code as an AI assistant during development, particularly for faster iteration on Three.js boilerplate, state handling, and custom component animations. This combination allowed rapid experimentation while maintaining code quality and performance.
For scroll‑linked motion, I combined Framer’s timeline tools with custom logic that tracked the user’s scroll position and synchronised multiple animation sequences. This required careful planning of ranges, easing, and transitions so that the experience felt smooth, natural, and not jittery.
Dark Mode as “Neon Tokyo”
Dark mode was treated as a central storytelling device rather than a basic accessibility feature. The design language for dark mode was built around three ideas:
- “Tokyo at night”: neon accents, deep blacks, and controlled glows rather than flat dark surfaces.
- Playfulness: subtle moments that reward exploration, such as the sleeping mask on the 3D lion that appears only in dark mode.
- Continuity: even as the mood shifts, typography, layout, and hierarchy remain consistent to preserve usability.
Early prototypes used a Spline embed for the 3D hero. While the visual quality was strong, this approach loaded and rendered the entire scene at runtime, heavily impacting performance. Scroll and animation responsiveness degraded significantly, especially on less powerful devices.
This led to a pivotal decision: move away from a Spline embed and implement a custom Three.js viewer instead. This change gave full control over what was rendered, when it was loaded, and how it responded to theme changes and interactions, all while staying inside the Framer environment.
Asset & Performance Optimisation
Given the level of animation and the presence of 3D content, performance was treated as a core design constraint from the beginning.
For 3D:
- The Three.js viewer was kept deliberately simple: just the model, without heavy scene lighting, reflections, or unnecessary geometry.
- Lighting was simulated using matcap textures applied directly to the model, delivering a stylised, “lit” appearance without real-time lighting calculations.
- Model assets were optimised and cleaned to minimise file size and runtime cost.
For imagery and video:
- Assets were aggressively compressed using tools such as Clop, tuning export settings to reduce size without visible degradation.
- Different compression strategies were used for accompanying imagery, key art, and videos to balance fidelity and page weight.
This combination of 3D simplification and asset compression ensured that complex timeline animations, scroll‑tracking, and dark mode transitions all remained responsive. The result is an experience that feels dense and expressive but doesn't feel heavy to interact with.
Key Design & Engineering Decisions
Several decisions defined the character and robustness of the final site:
- A bespoke Framer build, rather than modifying an existing template, to support a continuous, narrative scroll and complex motion while keeping the codebase understandable.
- A custom Three.js model viewer in place of a Spline embed, enabling significantly better runtime performance and tighter integration with theme and interaction states.
- A scroll‑tied motion system that uses carefully planned ranges and sequencing, so motion feels orchestrated rather than chaotic.
- Dark mode treated as a narrative layer, with unique visuals and interactions, instead of a simple global palette swap.
- Asset optimisation built into the design process, ensuring images, video, and 3D assets are performance-aware and play nicely with Framer's existing system.”
Outcomes & Impact
Experience.Lab launched in January 2026 as this arm of Publicis Groupe Japan’s primary experience practice showcase.
Notable outcomes:
- Internal stakeholders responded positively to the way the site captures the unique style and character of the team while still feeling precise and professional.
- The site has been shared within the Framer community as an example of a fully bespoke, interaction-rich build and submitted to Framer’s Community Awards in the “Best Animations” category.
- Early analytics show average session durations above three minutes, indicating that visitors spend time exploring the experience rather than bouncing quickly.
Learnings & Reflection
This project reinforced several principles for building high‑impact, motion‑heavy brand sites:
- Motion systems need to be designed as systems, not as isolated flourishes. Planning how motion behaves across the entire scroll made it easier to keep the experience cohesive and performant.
- 3D should be treated as a first‑class citizen in the performance budget. The move from a Spline embed to a focused Three.js viewer, combined with matcap‑based lighting, was a key factor in achieving the desired visual impact without compromising responsiveness.
- AI‑assisted implementation can noticeably improve iteration speed when working with complex integrations. Using Claude Code as a coding assistant allowed faster exploration of complex animations and 3D embedding approaches and reduced friction in building Framer code components.
- Maintainability is part of craft. The best brand experiences are not only impressive on launch day, they're easy for teams to keep current as their work and story evolve.
Experience.Lab is a prime example of how design, motion, and engineering can be combined inside Framer to create expressive yet practical interfaces for real teams.