--- title: Between Print and Digital: The Making of MERSI’s Website description: FLOT NOIR, a creative agency, rebuilt the website for MERSI, a Paris-based architecture studio, using Webflow as a CMS foundation with a fully custom... canonical: https://daily.dev/posts/between-print-and-digital-the-making-of-mersi-s-website-hwccfssww twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Between Print and Digital: The Making of MERSI’s Website | daily.dev og:description: FLOT NOIR, a creative agency, rebuilt the website for MERSI, a Paris-based architecture studio, using Webflow as a CMS foundation with a fully custom... og:url: https://daily.dev/posts/between-print-and-digital-the-making-of-mersi-s-website-hwccfssww og:image: https://api.daily.dev/og/posts/HWCcFsSWw.png og:image:alt: Between Print and Digital: The Making of MERSI’s Website og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Between Print and Digital: The Making of MERSI’s Website **[Codrops](https://daily.dev/sources/codrops)** · 14 min read · 1 upvotes · 0 comments ## Summary FLOT NOIR, a creative agency, rebuilt the website for MERSI, a Paris-based architecture studio, using Webflow as a CMS foundation with a fully custom JavaScript interaction layer. The technical stack includes GSAP (ScrollTrigger, SplitText, Flip), Lenis for smooth scrolling, Taxi.js for page transitions, and Vite for bundling, deployed on Netlify. Key interactive features include a split-screen slider driven by clip-path inset values, a GSAP Flip-powered page transition that morphs a project thumbnail into the case study hero image, a scroll-triggered grid repositioning animation using two DOM states, and an infinite scroll home slider that silently teleports scroll position to avoid edge detection. The redesign moved MERSI away from a generic Webflow template toward a tailored editorial experience inspired by architectural print publications, earning awards including Awwwards Site of the Day and FWA FOTD. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Reshaping Telha Clarke’s Digital Home from Wordmark to Motion System](https://daily.dev/posts/reshaping-telha-clarke-s-digital-home-from-wordmark-to-motion-system-brddxclxs) · Codrops · 3 upvotes · 0 comments - [1820 Productions: Minimal Design, Maximal Motion](https://daily.dev/posts/1820-productions-minimal-design-maximal-motion-psma9wl8o) · Codrops · 29 upvotes · 0 comments - [The Exat Microsite: Pushing a Typography Showcase to New Creative Extremes](https://daily.dev/posts/the-exat-microsite-pushing-a-typography-showcase-to-new-creative-extremes-m12bja4fc) · Codrops · 3 upvotes · 0 comments --- Tags: [#nocode](https://daily.dev/tags/nocode), [#web-animation](https://daily.dev/tags/web-animation) [View this post on daily.dev](https://daily.dev/posts/between-print-and-digital-the-making-of-mersi-s-website-hwccfssww) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Between Print and Digital: The Making of MERSI’s Website","url":"https://daily.dev/posts/between-print-and-digital-the-making-of-mersi-s-website-hwccfssww","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/between-print-and-digital-the-making-of-mersi-s-website-hwccfssww"},"datePublished":"2026-07-27T13:23:02.388Z","dateModified":"2026-07-28T00:44:28.541Z","description":"FLOT NOIR, a creative agency, rebuilt the website for MERSI, a Paris-based architecture studio, using Webflow as a CMS foundation with a fully custom...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/951ffebacdb2d31e1276763718e1f779?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/951ffebacdb2d31e1276763718e1f779?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/between-print-and-digital-the-making-of-mersi-s-website-hwccfssww","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"nocode,web-animation","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Between Print and Digital: The Making of MERSI’s Website"}]} ```