MERSI is a Paris-based architecture studio with a refined, precise and deeply visual approach to space. When they came to us, the challenge was not only to redesign a website, but to rebuild a digital presence that finally felt aligned with the quality of their work.
The project became a complete transformation: a new visual direction, a tailored Webflow experience, and a custom-coded interactive layer designed to make their projects feel more editorial, more immersive and more distinctive.
At its core, the website was built around a simple idea: creating a digital experience that lives somewhere between an architectural book and an interactive object.
When MERSI approached us, their existing website had become more of a constraint than a tool.
It was based on a generic Webflow template, tied to a monthly subscription model, and locked into a long-term commitment. Beyond the technical and financial limitations, the biggest issue was more fundamental: the website never truly felt like theirs.
The visual system did not reflect the studio’s sensibility, and similar templates had been used for other studios in their field. For an architecture practice, where image, precision and positioning are essential, this created a real disconnect.
As a result, the website was never fully embraced internally. It was not used as a strong business tool, nor as a proper representation of the studio’s work. It existed, but it did not carry the brand.
Our first goal was to help MERSI regain control over their digital presence.
One important decision was made early: we would keep Webflow. MERSI was already comfortable with the platform and wanted to keep a familiar editing environment. The objective was not to reject Webflow, but to move away from the generic system they had been given.
We treated Webflow as a CMS and publishing foundation, while rebuilding the entire experience from scratch. The structure, layouts, visual direction, interactions and custom code layer were all redesigned to create something fully tailored to the studio.
This was an important distinction for us. Webflow was not the limitation. The template was.
By keeping the tool but removing the generic framework, we could offer MERSI both autonomy and a much stronger creative experience.
The website redesign was also part of a wider brand refresh. MERSI already had a logo and monogram, created by Morgane Tubiana, and the idea was not to replace them. Instead, we rebuilt the world around them.
The previous visual identity felt too loud for the studio. It relied heavily on purple tones and a visual language that felt too aggressive, too decorative and not aligned with the quiet elegance of their architectural work.
MERSI wanted to move toward something more refined. A direction closer to quiet luxury: subtle, precise, tactile and confident without being demonstrative.
We worked on a new visual atmosphere based on restraint, contrast, materiality and editorial rhythm. The goal was not to make the brand disappear into minimalism, but to create a quieter framework where the projects could take the lead.
The identity had to feel premium, but not cold. Minimal, but not empty. Digital, but with a strong sense of material presence.
From the beginning, we wanted the website to sit somewhere between an architectural book and an interactive digital experience.
Architecture is often presented through books, portfolios, printed documents and carefully composed visual systems. There is a specific rhythm in those objects: the way images are placed, the role of white space, the relationship between typography and photography, the tension between silence and detail.
We wanted to bring some of that sensitivity into the browser.
The layouts were designed with a strong editorial influence. Pages are composed rather than simply filled. Images are not treated as content blocks, but as material. Typography acts as a structural element. Shapes, labels and transitions create a sense of framing and movement.
At the same time, the experience had to remain unmistakably digital. The website is not trying to imitate print. It uses interaction, motion and transitions to extend the editorial logic into something more alive.
The result is a visual system that feels calm, precise and immersive, while still offering moments of surprise.
The main purpose of the website was simple: to sublimate MERSI’s projects.
But the available visual material came with a real design challenge. Many of the project images were portrait-oriented, which can be difficult to handle on the web, especially when trying to create immersive layouts without cropping too aggressively or repeating the same composition over and over again.
Instead of forcing every project into a conventional grid, we designed a more flexible visual system. The layouts allow portrait images to become a strength rather than a constraint. They create vertical rhythm, tension and a more gallery-like feeling.
This also helped us avoid the typical architecture portfolio structure where every project is reduced to a predictable sequence of full-width images.
We wanted each project to feel curated. The interface had to create space around the work, give each image the right presence, and guide the user through the content without overexplaining it.
The challenge was not to add more design. It was to create the right conditions for the work to feel more powerful.
One of the key components of the website is the split-screen slider.
It is built around two large visual areas and a central label system. The composition creates a strong sense of tension between images, while the label acts as an anchor in the middle of the screen.
This component became one of the signature moments of the site because it captures the overall direction of the project: editorial, minimal, but strongly interactive.
The interaction is simple to understand, but visually memorable. It gives the user a way to move through projects without relying on a standard carousel pattern. The split-screen structure also reinforces the idea of comparison, rhythm and spatial composition.
For an architecture studio, this felt very natural. It is almost like moving through a visual spread, but with a digital layer of control and movement.
We also wanted the transition into a case study to feel like a deliberate moment.
Instead of using a standard page load, we designed a transition where the project cover flips and leads the user into the case study experience. This movement creates continuity between the project listing and the project page, making the navigation feel more physical.
The cover is not just a thumbnail. It becomes a transitional object.
This detail was important because the website is built around the idea of materiality. We wanted interactions to feel connected to the visual language of the site, not added as decorative effects.
The transition gives the user a sense of entering the project, almost like opening a book, turning a card or revealing a new surface.
Once inside, the case study experience moves into a horizontal scroll structure, creating a more cinematic and editorial way to navigate through the project.
Another important interaction happens on the projects page.
As the user scrolls, the projects progressively reposition into a more structured grid. The layout starts with a dynamic composition and gradually resolves into order.
This movement reflects one of the ideas we explored throughout the project: the relationship between freedom and structure.
Architecture is often about this balance. A project can feel fluid, emotional or atmospheric, but it is always supported by a rigorous underlying system. We tried to express that same tension in the interface.
The animation is not just there to impress. It helps create a sense of progression and gives the project index a stronger narrative quality.
Rather than presenting all projects as static cards, the page becomes a spatial composition that reorganizes itself as the user moves through it.
Although the website was built on Webflow, the experience was designed and developed as a custom digital product.
Webflow provided the CMS structure and editing environment, allowing the MERSI team to keep control over their content. Around that foundation, Thomas Carré developed the custom interaction layer that gives the website its distinctive behavior.
This hybrid approach allowed us to combine two important needs: autonomy for the client, and a high level of creative execution.
For us, the project was never about proving that Webflow could or could not do something. It was about using the right parts of the tool, then extending it where the experience required more precision.
The result is a website that remains manageable for the client, while feeling far from a standard Webflow build.
The site is built on Webflow for structure and CMS, with a fully custom JavaScript layer bundled with Vite and deployed on Netlify. The animation stack is:
Everything else is custom vanilla JS, no UI frameworks.
There are two distinct transition types registered in Taxi.js: a DefaultTransition (curtain wipe) and a FlipTransition for project links tagged with a [flip-transition] attribute.
On leave, the FlipTransition captures the currently visible slide image using getBoundingClientRect() and clones it into a fixed-position overlay on the <body>, completely detached from the DOM flow. A single right-side curtain then wipes up to cover the old page.
On enter, GSAP Flip.fit() animates that floating clone directly into its target container on the new page (.img-project-flip), morphing position, size, and aspect ratio simultaneously over 1.2s with an expo.inOut ease. Once the animation completes, the clone is re-inserted into the target container as a permanent replacement for the native image element.
On mobile, the flip image mechanic is skipped entirely, both curtains animate using clip-path instead (top half down, bottom half up).
It’s a GSAP ScrollTrigger-driven approach: a .horizontal_track element is pinned while a gsap.to() tween translates it on the X axis, converting vertical scroll distance into horizontal movement.
track.scrollWidth - window.innerWidth, recalculated on refresh via invalidateOnRefresh: trueScrollTrigger.update() on every frame to stay in syncdocument.fonts.ready before calculating dimensions, avoiding layout jumps from late-loading fonts.then() callback from running if cleanup was called between navigationThis is probably the most complex system on the site. The projects page has two DOM states: grid__state__1 (the initial compact grid with a few visible images) and grid__state_2 (the full expanded layout).
When the user scrolls into the projects section, GSAP Flip handles the transition:
Flip.getState() captures the current position and size of each image in grid 1Flip.from() animates them from their captured positions to their new ones with 2s duration, expo.inOut, with a 0.05s staggerImages beyond a MAX_VISIBLE_IN_GRID1 threshold are hidden initially and fade in during the flip. The filter widget also participates in the Flip. It gets captured, moved to a new parent, and animated to its new position simultaneously.
Scrolling back up reverses the entire animation: images return to grid 1, with a shorter 1.2s power4.inOut ease and a reverse stagger. Any images that were hidden during the initial flip get a separate clip-path reveal on the way back.
On mobile, the grid flip is disabled and only the filter system stays active.
Both the home slider and the project slider share the same architecture: two synchronized lists (.left and .right) of stacked full-screen images, all overlapping in the same space. Visibility is controlled entirely through clip-path: inset(...). There’s no opacity or display toggling.
The left column reveals slides from the top (inset(X% 0% 0% 0%)), while the right column reveals from the bottom (inset(0% 0% X% 0%)). As the user scrolls, the progress between the current and next index is computed, and the inset value is driven directly from that float — giving a scrub-like feel without actually using ScrollTrigger scrub.
The central label/button overlay uses the exact same clip-path technique, revealing in sync with the slides. This means all three layers (left image, right image, label) are always in perfect sync with a single progress value.
The home slider handles infinite looping by creating a very tall wrapper (100 × slideCount × vh) and silently repositioning the scroll to the middle section whenever the user approaches the edges — completely invisible to the user.
The home slider creates a wrapper tall enough for 100 scroll cycles, then silently teleports the
scroll position back to the middle when the user approaches either edge:
if (relativeScroll < lowerThreshold || relativeScroll > upperThreshold) {
const cyclicPosition = relativeScroll % cycleHeight
const newScroll = wrapperTop + middlePosition + cyclicPosition
isRepositioning = true
lenis.scrollTo(newScroll, {
immediate: true,
onComplete: () => requestAnimationFrame(() => { isRepositioning = false })
})
return
}The cyclicPosition ensures the visual state is preserved exactly and the user never perceives the jump.
On page enter, the floating image clone is fitted into its target container using Flip.fit():
Flip.fit(clone, targetContainer, {
duration: 1.2,
ease: 'expo.inOut',
onComplete: () => {
Object.assign(clone.style, {
position: 'absolute',
top: '0', left: '0',
width: '100%', height: '100%',
transform: '', zIndex: ''
})
targetContainer.appendChild(clone)
if (nativeImg) nativeImg.remove()
clone.removeAttribute('id')
}
})After the animation, the clone is permanently adopted into the new page’s layout, and the original native image is removed, so there’s no visual pop when the transition ends.
Beyond the visual and technical execution, one of the most important outcomes of the project was emotional. MERSI needed a website they could recognize as their own.
Their previous solution had created distance between the studio and its digital presence. It felt generic, difficult to embrace and disconnected from the way they wanted to be perceived.
With this redesign, the website became a more accurate extension of their work: refined, quiet, visual and precise.
It also became a stronger business tool. Not because it explains everything, but because it creates the right perception from the first interaction. It gives the studio a more distinctive digital presence and a more confident way to present its projects.
After launch, the MERSI website received several recognitions from the creative and digital design community:
AWWWARDS — Site of the Day
FWA — FOTD
CSSDA — WOTD
GSAP — Site of the Week
Communication Arts — Featured
These awards were not the goal of the project, but they confirmed that a carefully crafted architecture website can still feel distinctive, even in a field often dominated by restrained, template-like portfolios.
For us, the recognition was meaningful because it rewarded both sides of the work: the quietness of the visual direction and the precision of the interactive layer.
MERSI’s website was built from a simple but demanding ambition: to create a digital presence that felt as considered as the studio’s architectural work.
The project was not about adding complexity for the sake of it. It was about replacing a generic system with a tailored experience. It was about using Webflow without being limited by a template. It was about creating a visual language that could feel quiet, premium and interactive at the same time.
Most importantly, it was about designing a website that could finally serve the studio, not constrain it.
A website somewhere between print and digital.
Between structure and movement.
Between silence and interaction.
Produced by: FLOT NOIR
Website & Branding: Clément Merouani
Creative Dev: Thomas Carré
Thanks to Meryl Motyka and Simon Mimoun for their trust.
Logo and MS monogram: Morgane Tubiana.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。