Entre o impresso e o digital: a construção do site da MERSI | Codrops

MERSI é um estúdio de arquitetura com sede em Paris com uma abordagem refinada, precisa e profundamente visual do espaço. Quando nos procuraram, o desafio não era apenas redesenhar um site, mas reconstruir uma presença digital que finalmente se sentisse alinhada com a qualidade do seu trabalho.

O projeto se tornou uma transformação completa: uma nova direção visual, uma experiência de fluxo da Web personalizada e uma camada interativa com código personalizado projetada para tornar seus projetos mais editoriais, mais envolventes e mais distintos.

Basicamente, o site foi construído em torno de uma ideia simples: criar uma experiência digital que fica entre um livro de arquitetura e um objeto interativo.

Iniciando a partir de um sistema genérico

Quando a MERSI nos abordou, o seu site existente tornou-se mais uma restrição do que uma ferramenta.

Foi baseado em um modelo genérico de Webflow, vinculado a um modelo de assinatura mensal e vinculado a um compromisso de longo prazo. Além das limitações técnicas e financeiras, o maior problema era mais fundamental: o site nunca pareceu realmente deles.

O sistema visual não refletia a sensibilidade do estúdio, e modelos semelhantes foram usados ​​por outros estúdios em sua área. Para um escritório de arquitetura, onde a imagem, a precisão e o posicionamento são essenciais, isso criou uma verdadeira desconexão.

Como resultado, o site nunca foi totalmente adotado internamente. Não foi utilizado como uma forte ferramenta de negócios, nem como uma representação adequada do trabalho do estúdio. Existia, mas não carregava a marca.

Nosso primeiro objetivo era ajudar a MERSI a recuperar o controle sobre sua presença digital.

Mantendo o fluxo da Web, reconstruindo tudo

Uma decisão importante foi tomada antecipadamente: manteríamos o Webflow. A MERSI já estava confortável com a plataforma e queria manter um ambiente de edição familiar. O objetivo não era rejeitar o Webflow, mas afastar-se do sistema genérico que lhes foi dado.

Tratamos o Webflow como um CMS e uma base de publicação, enquanto reconstruíamos toda a experiência do zero. A estrutura, layouts, direção visual, interações e camada de código customizada foram todos redesenhados para criar algo totalmente sob medida para o estúdio.

Esta foi uma distinção importante para nós. Webflow não era a limitação. O modelo era.

Mantendo a ferramenta, mas removendo a estrutura genérica, poderíamos oferecer ao MERSI autonomia e uma experiência criativa muito mais forte.

Redefinindo a marca em torno do logotipo existente

A reformulação do site também fez parte de uma atualização mais ampla da marca. A MERSI já tinha logotipo e monograma, criados por Morgane Tubiana, e a ideia não era substituí-los. Em vez disso, reconstruímos o mundo ao seu redor.

A identidade visual anterior parecia muito barulhenta para o estúdio. Baseava-se fortemente em tons roxos e numa linguagem visual demasiado agressiva, demasiado decorativa e não alinhada com a elegância tranquila do seu trabalho arquitectónico.

MERSI queria avançar em direção a algo mais refinado. Uma direção mais próxima do luxo silencioso: sutil, precisa, tátil e confiante sem ser demonstrativa.

Trabalhamos uma nova atmosfera visual baseada na contenção, contraste, materialidade e ritmo editorial. O objetivo não era fazer a marca desaparecer no minimalismo, mas criar um quadro mais tranquilo onde os projetos pudessem assumir a liderança.

A identidade tinha que ser premium, mas não fria. Mínimo, mas não vazio. Digital, mas com forte sentido de presença material.

Entre impresso e digital

Desde o início, queríamos que o site ficasse entre um livro de arquitetura e uma experiência digital interativa.

A arquitetura é frequentemente apresentada através de livros, portfólios, documentos impressos e sistemas visuais cuidadosamente compostos. Há um ritmo específico nesses objetos: a forma como as imagens são colocadas, o papel do espaço em branco, a relação entre tipografia e fotografia, a tensão entre o silêncio e o detalhe.

Queríamos trazer um pouco dessa sensibilidade para o navegador.

Os layouts foram desenhados com forte influência editorial. As páginas são compostas em vez de simplesmente preenchidas. As imagens não são tratadas como blocos de conteúdo, mas como material. A tipografia atua como um elemento estrutural. Formas, rótulos e transições criam uma sensação de enquadramento e movimento.

Ao mesmo tempo, a experiência tinha que permanecer inconfundivelmente digital. O site não está tentando imitar a impressão. Utiliza interação, movimento e transições para estender a lógica editorial para algo mais vivo.

O resultado é um sistema visual calmo, preciso e envolvente, ao mesmo tempo que oferece momentos de surpresa.

Projetando para sublimar os projetos

O objetivo principal do site era simples: sublimar os projetos da MERSI.

Mas o material visual disponível trouxe um verdadeiro desafio de design. Muitas das imagens do projeto eram orientadas para retrato, o que pode ser difícil de manusear na web, especialmente ao tentar criar layouts imersivos sem cortar de forma muito agressiva ou repetir a mesma composição indefinidamente.

Em vez de forçar cada projeto em uma grade convencional, projetamos um sistema visual mais flexível. Os layouts permitem que as imagens de retrato se tornem um ponto forte e não uma restrição. Eles criam ritmo vertical, tensão e uma sensação mais de galeria.

Isso também nos ajudou a evitar a típica estrutura de portfólio de arquitetura, onde cada projeto é reduzido a uma sequência previsível de imagens de largura total.

Queríamos que cada projeto tivesse uma curadoria. A interface teve que criar espaço em torno da obra, dar a cada imagem a presença certa e guiar o usuário pelo conteúdo sem explicá-lo demais.

O desafio não era adicionar mais design. Era para criar as condições certas para que o trabalho parecesse mais poderoso.

Um controle deslizante exclusivo de tela dividida

Um dos principais componentes do site é o controle deslizante de tela dividida.

É construído em torno de duas grandes áreas visuais e um sistema central de etiquetas. A composição cria uma forte sensação de tensão entre as imagens, enquanto o rótulo funciona como uma âncora no meio da tela.

Esta componente tornou-se um dos momentos de assinatura do site porque capta a direção geral do projeto: editorial, minimalista, mas fortemente interativa.

A interação é simples de entender, mas visualmente memorável. Ele oferece ao usuário uma maneira de percorrer os projetos sem depender de um padrão de carrossel padrão. A estrutura de tela dividida também reforça a ideia de comparação, ritmo e composição espacial.

Para um estúdio de arquitetura, isso pareceu muito natural. É quase como mover-se através de uma propagação visual, mas com uma camada digital de controle e movimento.

Inserindo um estudo de caso

Também queríamos que a transição para um estudo de caso parecesse um momento deliberado.

Em vez de usar um carregamento de página padrão, projetamos uma transição em que a capa do projeto vira e leva o usuário à experiência do estudo de caso. Esse movimento cria continuidade entre a listagem do projeto e a página do projeto, tornando a navegação mais física.

A capa não é apenas uma miniatura. Torna-se um objeto transicional.

Esse detalhe foi importante porque o site é construído em torno da ideia de materialidade. Queríamos que as interações parecessem conectadas à linguagem visual do site, e não adicionadas como efeitos decorativos.

A transição dá ao usuário a sensação de entrar no projeto, quase como abrir um livro, virar um cartão ou revelar uma nova superfície.

Uma vez lá dentro, a experiência do estudo de caso se move para uma estrutura de rolagem horizontal, criando uma forma mais cinematográfica e editorial de navegar pelo projeto.

Reposicionando os projetos na rolagem

Outra interação importante acontece na página de projetos.

À medida que o usuário rola, os projetos se reposicionam progressivamente em uma grade mais estruturada. O layout começa com uma composição dinâmica e gradualmente se resolve em ordem.

Este movimento reflete uma das ideias que exploramos ao longo do projeto: a relação entre liberdade e estrutura.

A arquitetura geralmente envolve esse equilíbrio. Um projeto pode parecer fluido, emocional ou atmosférico, mas é sempre apoiado por um sistema subjacente rigoroso. Tentamos expressar essa mesma tensão na interface.

A animação não existe apenas para impressionar. Ajuda a criar uma sensação de progressão e dá ao índice do projeto uma qualidade narrativa mais forte.

Em vez de apresentar todos os projetos como cartões estáticos, a página se torna uma composição espacial que se reorganiza à medida que o usuário se move por ela.

Construindo uma experiência de fluxo da Web personalizada

Embora o site tenha sido construído em Webflow, a experiência foi projetada e desenvolvida como um produto digital personalizado.

O Webflow forneceu a estrutura do CMS e o ambiente de edição, permitindo que a equipe MERSI mantivesse o controle sobre seu conteúdo. Em torno dessa base, Thomas Carré desenvolveu a camada de interação personalizada que confere ao site um comportamento diferenciado.

Esta abordagem híbrida permitiu-nos combinar duas necessidades importantes: autonomia para o cliente e um elevado nível de execução criativa.

Para nós, o projeto nunca foi para provar que o Webflow poderia ou não fazer algo. Tratava-se de usar as partes certas da ferramenta e depois estendê-la onde a experiência exigisse mais precisão.

O resultado é um site que permanece gerenciável para o cliente, embora pareça longe de ser uma construção de fluxo de Web padrão.

Abordagem Técnica

O site é construído em Webflow para estrutura e CMS, com uma camada JavaScript totalmente personalizada empacotada com Vite e implantada no Netlify. A pilha de animação é:

• GSAP (com ScrollTrigger, SplitText e Flip) para todas as animações
• Lenis para rolagem suave
• Taxi.js (não Barba) para transições de páginas
• Dividir para o controle deslizante de notícias

Todo o resto é JS vanilla personalizado, sem estruturas de UI.

Como é tratada a transição da capa para os estudos de caso?

Existem dois tipos de transição distintos registrados em Taxi.js: um DefaultTransition (limpeza de cortina) e um FlipTransition para links de projeto marcados com um atributo [flip-transition].

Na licença, o FlipTransition captura a imagem do slide atualmente visível usando getBoundingClientRect() e a clona em uma sobreposição de posição fixa no <body>, completamente desanexado do fluxo DOM. Uma única cortina do lado direito é então removida para cobrir a página antiga.

Ao entrar, GSAP Flip.fit() anima aquele clone flutuante diretamente em seu contêiner de destino na nova página (.img-project-flip), transformando posição, tamanho, e proporção de aspecto simultaneamente acima de 1,2s com facilidade expo.inOut. Assim que a animação for concluída, o clone será reinserido no contêiner de destino como um substituto permanente para o elemento de imagem nativo.

No celular, a mecânica de virar imagem é totalmente ignorada; ambas as cortinas são animadas usando o clip-path (metade superior para baixo, metade inferior para cima).

Como funciona a rolagem horizontal nos estudos de caso?

É uma abordagem orientada pelo GSAP ScrollTrigger: um elemento .horizontal_track é fixado enquanto um gsap.to() tween o traduz no eixo X, convertendo a distância de rolagem vertical em movimento horizontal.

• A distância X total é calculada como track.scrollWidth - window.innerWidth, recalculada na atualização via invalidateOnRefresh: true
• O final do ScrollTrigger é definido dinamicamente para +=${distance} para corresponder exatamente
• Lenis dispara um evento de rolagem que chama ScrollTrigger.update() em cada quadro para permanecer sincronizado
• A coisa toda espera document.fonts.ready antes de calcular as dimensões, evitando saltos de layout de fontes de carregamento tardio
• Um sinalizador cancelado impede o assíncrono .then() retorno de chamada da execução se a limpeza foi chamada entre a navegação

Como funciona a animação de reposicionamento da grade do projeto?

Este é provavelmente o sistema mais complexo do site. A página de projetos tem dois estados DOM: grid__state__1 (a grade compacta inicial com algumas imagens visíveis) e grid__state_2 (o layout totalmente expandido).

Quando o usuário rola para a seção de projetos, GSAP Flip cuida da transição:

1. Flip.getState() captura a posição atual e o tamanho de cada imagem na grade 1
2. As imagens são movidas fisicamente no DOM para seus slots de destino na grade 2
3. Flip.from() as anima de suas posições capturadas para suas novas com duração de 2s, expo.inOut, com escalonamento de 0,05s

Imagens além de um limite MAX_VISIBLE_IN_GRID1 são ocultadas inicialmente e aparecem gradualmente durante a inversão. O widget de filtro também participa do Flip. Ele é capturado, movido para um novo pai e animado para sua nova posição simultaneamente.

Rolar para cima inverte toda a animação: as imagens retornam à grade 1, com uma facilidade power4.inOut mais curta de 1,2s e um escalonamento reverso. Quaisquer imagens que foram ocultadas durante a virada inicial recebem um caminho de clipe separado revelado no caminho de volta.

No celular, a inversão da grade está desabilitada e apenas o sistema de filtros permanece ativo.

Como é construído o controle deslizante de tela dividida com o rótulo central?

Tanto o controle deslizante inicial quanto o controle deslizante do projeto compartilham a mesma arquitetura: duas listas sincronizadas (.left e .right) de imagens empilhadas em tela cheia, todos sobrepostos no mesmo espaço. A visibilidade é controlada inteiramente por clip-path: inset(...). Não há opacidade ou alternância de exibição.

A coluna da esquerda revela os slides de cima (inset(X% 0% 0% 0%)), enquanto a coluna da direita revela de baixo (inset(0% 0% X% 0%)). À medida que o usuário rola, o progresso entre o índice atual e o próximo é calculado, e o valor inserido é direcionado diretamente desse ponto flutuante – dando uma sensação de esfrega sem realmente usar ScrollTrigger esfregar.

A sobreposição central de rótulo/botão usa exatamente a mesma técnica de clip-path, revelando-se em sincronia com os slides. Isso significa que todas as três camadas (imagem esquerda, imagem direita, rótulo) estão sempre em perfeita sincronia com um único valor de progresso.

O controle deslizante inicial lida com loop infinito criando um wrapper muito alto (100 × slideCount × vh) e reposicionando silenciosamente a rolagem para a seção intermediária sempre que o usuário se aproxima das bordas – completamente invisível para o usuário.

Reposicionamento infinito do controle deslizante (homeSlider.js )

O controle deslizante inicial cria um invólucro alto o suficiente para 100 ciclos de rolagem e, em seguida, teletransporta silenciosamente o 

role a posição de volta para o meio quando o usuário se aproxima de uma das bordas:

###PRE_5e8e2c7e863e2b04ecd38ee31290560e###

O cyclicPosition garante que o estado visual seja preservado com exatidão e o usuário nunca perceba o salto.

Transição de página invertida GSAP (taxi.js)

Na entrada da página, o clone da imagem flutuante é ajustado em seu contêiner de destino usando Flip.fit() :

###PRE_c0f9773c67776f5d986c732e778eb481###

Após a animação, o clone é permanentemente adotado no layout da nova página e a imagem nativa original é removida, portanto não há pop visual quando a transição termina.

Criando um site que o cliente poderia finalmente possuir

Além da execução visual e técnica, um dos resultados mais importantes do projeto foi emocional. A MERSI precisava de um site que pudesse reconhecer como seu.

A solução anterior criou distância entre o estúdio e sua presença digital. Parecia genérico, difícil de abraçar e desconectado da forma como queriam ser vistos.

Com esta reformulação, o site tornou-se uma extensão mais precisa do seu trabalho: refinado, silencioso, visual e preciso.

Também se tornou uma ferramenta de negócios mais forte. Não porque explica tudo, mas porque cria a percepção certa desde a primeira interação. Confere ao estúdio uma presença digital mais diferenciada e uma forma mais confiante de apresentar seus projetos.

Reconhecimento

Após o lançamento, o site MERSI recebeu vários reconhecimentos da comunidade criativa e de design digital:

AWWWARDS — Site do Dia
FWA — FOTD
CSSDA — WOTD
GSAP — Site da Semana
Artes de Comunicação — Em Destaque

Esses prêmios não eram o objetivo do projeto, mas confirmaram que um site de arquitetura cuidadosamente elaborado ainda pode parecer distinto, mesmo em um campo frequentemente dominado por portfólios restritos e semelhantes a modelos.

Para nós, o reconhecimento foi significativo porque premiou os dois lados do trabalho: a tranquilidade da direção visual e a precisão da camada interativa.

Considerações finais

O site da MERSI foi construído a partir de uma ambição simples mas exigente: criar uma presença digital que se sentisse tão considerada como a obra arquitetónica do atelier.

O projeto não pretendia adicionar complexidade só por adicionar. Tratava-se de substituir um sistema genérico por uma experiência personalizada. Tratava-se de usar o Webflow sem estar limitado por um modelo. Tratava-se de criar uma linguagem visual que pudesse parecer silenciosa, premium e interativa ao mesmo tempo.

O mais importante é que se tratava de criar um site que pudesse finalmente servir o estúdio, e não restringi-lo.

Um site entre o impresso e o digital.
Entre estrutura e movimento.
Entre o silêncio e a interação.

Créditos

Produzido por: FLOT NOIR
Site e branding: Clément Merouani
Desenvolvedor criativo: Thomas Carré

Obrigado a Meryl Motyka e Simon Mimoun pela confiança.

Logo e monograma MS: Morgane Tubiana.