MERSI is a Paris-based structure studio with a refined, exact and deeply visible strategy to house. After they got here to us, the problem was not solely to revamp an internet site, however to rebuild a digital presence that lastly felt aligned with the standard of their work.
The mission turned an entire transformation: a brand new visible course, a tailor-made Webflow expertise, and a custom-coded interactive layer designed to make their tasks really feel extra editorial, extra immersive and extra distinctive.
At its core, the web site was constructed round a easy thought: making a digital expertise that lives someplace between an architectural ebook and an interactive object.
Ranging from a Generic System
When MERSI approached us, their current web site had turn into extra of a constraint than a software.
It was primarily based on a generic Webflow template, tied to a month-to-month subscription mannequin, and locked right into a long-term dedication. Past the technical and monetary limitations, the most important concern was extra elementary: the web site by no means actually felt like theirs.
The visible system didn’t mirror the studio’s sensibility, and related templates had been used for different studios of their discipline. For an structure follow, the place picture, precision and positioning are important, this created an actual disconnect.
In consequence, the web site was by no means totally embraced internally. It was not used as a powerful enterprise software, nor as a correct illustration of the studio’s work. It existed, nevertheless it didn’t carry the model.
Our first purpose was to assist MERSI regain management over their digital presence.
Conserving Webflow, Rebuilding Every part
One vital resolution was made early: we might hold Webflow. MERSI was already snug with the platform and needed to maintain a well-recognized enhancing surroundings. The target was to not reject Webflow, however to maneuver away from the generic system that they had been given.
We handled Webflow as a CMS and publishing basis, whereas rebuilding all the expertise from scratch. The construction, layouts, visible course, interactions and {custom} code layer have been all redesigned to create one thing totally tailor-made to the studio.
This was an vital distinction for us. Webflow was not the limitation. The template was.
By maintaining the software however eradicating the generic framework, we might provide MERSI each autonomy and a a lot stronger inventive expertise.
Redefining the Model Across the Present Emblem
The web site redesign was additionally a part of a wider model refresh. MERSI already had a brand and monogram, created by Morgane Tubiana, and the thought was to not exchange them. As a substitute, we rebuilt the world round them.
The earlier visible id felt too loud for the studio. It relied closely on purple tones and a visible language that felt too aggressive, too ornamental and never aligned with the quiet magnificence of their architectural work.
MERSI needed to maneuver towards one thing extra refined. A course nearer to quiet luxurious: delicate, exact, tactile and assured with out being demonstrative.
We labored on a brand new visible ambiance primarily based on restraint, distinction, materiality and editorial rhythm. The purpose was to not make the model disappear into minimalism, however to create a quieter framework the place the tasks might take the lead.
The id needed to really feel premium, however not chilly. Minimal, however not empty. Digital, however with a powerful sense of fabric presence.
Between Print and Digital
From the start, we needed the web site to take a seat someplace between an architectural ebook and an interactive digital expertise.
Structure is usually offered by books, portfolios, printed paperwork and thoroughly composed visible programs. There’s a particular rhythm in these objects: the way in which pictures are positioned, the function of white house, the connection between typography and pictures, the strain between silence and element.
We needed to convey a few of that sensitivity into the browser.
The layouts have been designed with a powerful editorial affect. Pages are composed quite than merely crammed. Photos will not be handled as content material blocks, however as materials. Typography acts as a structural component. Shapes, labels and transitions create a way of framing and motion.
On the identical time, the expertise needed to stay unmistakably digital. The web site shouldn’t be making an attempt to mimic print. It makes use of interplay, movement and transitions to increase the editorial logic into one thing extra alive.
The result’s a visible system that feels calm, exact and immersive, whereas nonetheless providing moments of shock.
Designing to Sublimate the Tasks
The primary function of the web site was easy: to sublimate MERSI’s tasks.
However the accessible visible materials got here with an actual design problem. Lots of the mission pictures have been portrait-oriented, which could be tough to deal with on the internet, particularly when making an attempt to create immersive layouts with out cropping too aggressively or repeating the identical composition again and again.
As a substitute of forcing each mission into a standard grid, we designed a extra versatile visible system. The layouts permit portrait pictures to turn into a energy quite than a constraint. They create vertical rhythm, pressure and a extra gallery-like feeling.
This additionally helped us keep away from the standard structure portfolio construction the place each mission is lowered to a predictable sequence of full-width pictures.
We needed every mission to really feel curated. The interface needed to create house across the work, give every picture the precise presence, and information the consumer by the content material with out overexplaining it.
The problem was to not add extra design. It was to create the precise situations for the work to really feel extra highly effective.
A Signature Cut up-Display screen Slider
One of many key elements of the web site is the split-screen slider.
It’s constructed round two giant visible areas and a central label system. The composition creates a powerful sense of pressure between pictures, whereas the label acts as an anchor in the course of the display screen.
This element turned one of many signature moments of the positioning as a result of it captures the general course of the mission: editorial, minimal, however strongly interactive.
The interplay is straightforward to know, however visually memorable. It offers the consumer a strategy to transfer by tasks with out counting on an ordinary carousel sample. The split-screen construction additionally reinforces the thought of comparability, rhythm and spatial composition.
For an structure studio, this felt very pure. It’s nearly like transferring by a visible unfold, however with a digital layer of management and motion.
Getting into a Case Examine
We additionally needed the transition right into a case research to really feel like a deliberate second.
As a substitute of utilizing an ordinary web page load, we designed a transition the place the mission cowl flips and leads the consumer into the case research expertise. This motion creates continuity between the mission itemizing and the mission web page, making the navigation really feel extra bodily.
The duvet isn’t just a thumbnail. It turns into a transitional object.
This element was vital as a result of the web site is constructed across the thought of materiality. We needed interactions to really feel linked to the visible language of the positioning, not added as ornamental results.
The transition offers the consumer a way of coming into the mission, nearly like opening a ebook, turning a card or revealing a brand new floor.
As soon as inside, the case research expertise strikes right into a horizontal scroll construction, making a extra cinematic and editorial strategy to navigate by the mission.
Repositioning the Tasks on Scroll
One other vital interplay occurs on the tasks web page.
Because the consumer scrolls, the tasks progressively reposition right into a extra structured grid. The format begins with a dynamic composition and step by step resolves into order.
This motion displays one of many concepts we explored all through the mission: the connection between freedom and construction.
Structure is usually about this steadiness. A mission can really feel fluid, emotional or atmospheric, however it’s at all times supported by a rigorous underlying system. We tried to specific that very same pressure within the interface.
The animation isn’t just there to impress. It helps create a way of development and offers the mission index a stronger narrative high quality.
Somewhat than presenting all tasks as static playing cards, the web page turns into a spatial composition that reorganizes itself because the consumer strikes by it.
Constructing a Tailor-made Webflow Expertise
Though the web site was constructed on Webflow, the expertise was designed and developed as a {custom} digital product.
Webflow supplied the CMS construction and enhancing surroundings, permitting the MERSI crew to maintain management over their content material. Round that basis, Thomas Carré developed the {custom} interplay layer that offers the web site its distinctive habits.
This hybrid strategy allowed us to mix two vital wants: autonomy for the consumer, and a excessive degree of inventive execution.
For us, the mission was by no means about proving that Webflow might or couldn’t do one thing. It was about utilizing the precise elements of the software, then extending it the place the expertise required extra precision.
The result’s an internet site that continues to be manageable for the consumer, whereas feeling removed from an ordinary Webflow construct.
Technical Strategy
The positioning is constructed on Webflow for construction and CMS, with a completely {custom} JavaScript layer bundled with Vite and deployed on Netlify. The animation stack is:
- GSAP (with ScrollTrigger, SplitText, and Flip) for all animations
- Lenis for clean scrolling
- Taxi.js (not Barba) for web page transitions
- Splide for the information slider
Every part else is {custom} vanilla JS, no UI frameworks.
How is the duvet flip transition to case research dealt with?
There are two distinct transition varieties registered in Taxi.js: a DefaultTransition (curtain wipe) and a FlipTransition for mission hyperlinks tagged with a [flip-transition] attribute.
On go away, the FlipTransition captures the presently seen slide picture utilizing getBoundingClientRect() and clones it right into a fixed-position overlay on the , fully indifferent from the DOM movement. A single right-side curtain then wipes as much as cowl the previous web page.
On enter, GSAP Flip.match() animates that floating clone immediately into its goal container on the brand new web page (.img-project-flip), morphing place, dimension, and facet ratio concurrently over 1.2s with an expo.inOut ease. As soon as the animation completes, the clone is re-inserted into the goal container as a everlasting alternative for the native picture component.
On cell, the flip picture mechanic is skipped completely, each curtains animate utilizing clip-path as an alternative (prime half down, backside half up).
How does the horizontal scroll on case research work?
It’s a GSAP ScrollTrigger-driven strategy: a .horizontal_track component is pinned whereas a gsap.to() tween interprets it on the X axis, changing vertical scroll distance into horizontal motion.
- The full X distance is computed as
observe.scrollWidth - window.innerWidth, recalculated on refresh through invalidateOnRefresh: true - The ScrollTrigger finish is ready dynamically to +=${distance} to match precisely
- Lenis fires a scroll occasion that calls
ScrollTrigger.replace()on each body to remain in sync - The entire thing waits for
doc.fonts.preparedearlier than calculating dimensions, avoiding format jumps from late-loading fonts - A cancelled flag prevents the async
.then()callback from operating if cleanup was referred to as between navigation
How does the mission grid repositioning animation work?
That is most likely probably the most complicated system on the positioning. The tasks web page has two DOM states: grid__state__1 (the preliminary compact grid with a number of seen pictures) and grid__state_2 (the total expanded format).
When the consumer scrolls into the tasks part, GSAP Flip handles the transition:
Flip.getState()captures the present place and dimension of every picture in grid 1- The photographs are bodily moved within the DOM into their goal slots in grid 2
Flip.from()animates them from their captured positions to their new ones with 2s length,expo.inOut, with a 0.05s stagger
Photos past a MAX_VISIBLE_IN_GRID1 threshold are hidden initially and fade in throughout the flip. The filter widget additionally participates within the Flip. It will get captured, moved to a brand new mother or father, and animated to its new place concurrently.
Scrolling again up reverses all the animation: pictures return to grid 1, with a shorter 1.2s power4.inOut ease and a reverse stagger. Any pictures that have been hidden throughout the preliminary flip get a separate clip-path reveal on the way in which again.
On cell, the grid flip is disabled and solely the filter system stays energetic.
How is the split-screen slider with the central label constructed?
Each the house slider and the mission slider share the identical structure: two synchronized lists (.left and .proper) of stacked full-screen pictures, all overlapping in the identical house. Visibility is managed completely by clip-path: inset(...). There’s no opacity or show toggling.
The left column reveals slides from the highest (inset(X% 0% 0% 0%)), whereas the precise column reveals from the underside (inset(0% 0% X% 0%)). Because the consumer scrolls, the progress between the present and subsequent index is computed, and the inset worth is pushed immediately from that float — giving a scrub-like really feel with out truly utilizing ScrollTrigger scrub.
The central label/button overlay makes use of the very same clip-path method, revealing in sync with the slides. This implies all three layers (left picture, proper picture, label) are at all times in excellent sync with a single progress worth.
The house slider handles infinite looping by creating a really tall wrapper (100 × slideCount × vh) and silently repositioning the scroll to the center part at any time when the consumer approaches the perimeters — fully invisible to the consumer.
Infinite slider repositioning (homeSlider.js)
The house slider creates a wrapper tall sufficient for 100 scroll cycles, then silently teleports the
scroll place again to the center when the consumer approaches both edge:
if (relativeScroll < lowerThreshold || relativeScroll > upperThreshold) {
const cyclicPosition = relativeScroll % cycleHeight
const newScroll = wrapperTop + middlePosition + cyclicPosition
isRepositioning = true
lenis.scrollTo(newScroll, {
rapid: true,
onComplete: () => requestAnimationFrame(() => { isRepositioning = false })
})
return
}The cyclicPosition ensures the visible state is preserved precisely and the consumer by no means perceives the soar.
GSAP Flip web page transition (taxi.js)
On web page enter, the floating picture clone is fitted into its goal container utilizing Flip.match():
Flip.match(clone, targetContainer, {
length: 1.2,
ease: 'expo.inOut',
onComplete: () => {
Object.assign(clone.type, {
place: 'absolute',
prime: '0', left: '0',
width: '100%', top: '100%',
rework: '', zIndex: ''
})
targetContainer.appendChild(clone)
if (nativeImg) nativeImg.take away()
clone.removeAttribute('id')
}
})After the animation, the clone is completely adopted into the brand new web page’s format, and the unique native picture is eliminated, so there’s no visible pop when the transition ends.
Making a Web site the Consumer Might Lastly Personal
Past the visible and technical execution, one of the crucial vital outcomes of the mission was emotional. MERSI wanted an internet site they may acknowledge as their very own.
Their earlier resolution had created distance between the studio and its digital presence. It felt generic, tough to embrace and disconnected from the way in which they needed to be perceived.
With this redesign, the web site turned a extra correct extension of their work: refined, quiet, visible and exact.
It additionally turned a stronger enterprise software. Not as a result of it explains the whole lot, however as a result of it creates the precise notion from the primary interplay. It offers the studio a extra distinctive digital presence and a extra assured strategy to current its tasks.
Recognition
After launch, the MERSI web site acquired a number of recognitions from the inventive and digital design neighborhood:
AWWWARDS — Website of the Day
FWA — FOTD
CSSDA — WOTD
GSAP — Website of the Week
Communication Arts — Featured
These awards weren't the purpose of the mission, however they confirmed {that a} rigorously crafted structure web site can nonetheless really feel distinctive, even in a discipline usually dominated by restrained, template-like portfolios.
For us, the popularity was significant as a result of it rewarded either side of the work: the quietness of the visible course and the precision of the interactive layer.
Last Ideas
MERSI’s web site was constructed from a easy however demanding ambition: to create a digital presence that felt as thought of because the studio’s architectural work.
The mission was not about including complexity for the sake of it. It was about changing a generic system with a tailor-made expertise. It was about utilizing Webflow with out being restricted by a template. It was about creating a visible language that would really feel quiet, premium and interactive on the identical time.
Most significantly, it was about designing an internet site that would lastly serve the studio, not constrain it.
A web site someplace between print and digital.
Between construction and motion.
Between silence and interplay.
Credit
Produced by: FLOT NOIR
Web site & Branding: Clément Merouani
Artistic Dev: Thomas Carré
Due to Meryl Motyka and Simon Mimoun for his or her belief.
Emblem and MS monogram: Morgane Tubiana.
