Conteúdo deste artigo
- Master GSAP Web Animation
- História do projeto
- Pilha de tecnologia e ferramentas
- Design visual e de interação
- Sobre a página
- Página de demonstração
- Página inicial
- Reflexões
Hoje quero apresentar o site 4WIDE, lançado em 31 de março de 2026. Apresentarei o histórico, um pouco do lado técnico e o pensamento por trás do design visual. Espero que você fique até o fim!
História do projeto
Mantenha o tom, mas corrija-o, faça-o fluir melhor, não adicione nada nem retire nada, não use travessões: Este projeto foi criado como o site de negócios para minha prática independente sob o nome 4WIDE.
Do conceito inicial ao lançamento público, o projeto demorou cerca de três meses, durante os quais explorei um vasto leque de ideias tanto ao nível do conteúdo como da expressão. O ponto principal que foquei neste site foi equilibrar expressividade com clareza de mensagem. Não é um site destinado apenas a mostrar minhas sensibilidades artísticas pessoais. Como site de negócios, precisava comunicar claramente o que faço e o que posso oferecer.
Ao mesmo tempo, uma das áreas que quero seguir no meu trabalho é o design expressivo. Portanto, procurei encontrar um equilíbrio onde essa intenção pudesse ser transmitida adequadamente e ao mesmo tempo permitir que o site funcionasse como um site de negócios.
Pilha de tecnologia e ferramentas
A pilha de tecnologia é a seguinte:
- Framework: Astro
- Transições de página: Swup
- CMS: WordPress (Headless)
- Hospedagem: Vercel
- Animação: GSAP, Three.js
Selecionei esses frameworks e bibliotecas de ferramentas que já usava e com as quais me sentia familiarizado. Dito isso, também houve tecnologias que usei corretamente pela primeira vez neste site: Swup e WordPress headless. Ambas eram ferramentas pelas quais eu já estava interessado há algum tempo, mas não tinha tido a oportunidade de usar antes, então decidi aproveitar e experimentá-las neste projeto.
Design visual e de interação
Há três elementos visuais e interativos que gostaria de apresentar.
Sobre a página
Esta página é estruturada de forma que uma imagem curva emerge do visual principal e leva à seção de mensagens. A ideia por trás dessa estrutura era deixar uma forte impressão da minha postura tanto em relação ao meu negócio quanto ao meu trabalho criativo. A narrativa é que por trás dos elementos superficiais rotulados como “Notas”, que descrevem meu escopo e abordagem, as ideias mais fundamentais começam a aparecer.
À medida que desenvolvi esse fluxo, senti que simplesmente revelar o conteúdo por trás não criaria impacto visual suficiente, então adicionei uma distorção curva e efeito de desfoque, junto com uma interação onde o próprio texto se move em sincronia com a rolagem.
Abaixo está parte do código usado para criar o efeito curvado.
float distortion = 1.0 + u_strength * r * r; vec2 distortedUv = uv / distortion; distortedUv.x /= u_aspect; distortedUv = distortedUv * 0.5 + 0.5; float t = clamp(r / 1.2, 0.0, 1.0); float t2 = t * t; vec2 radialDir = r > 0.001 ? normalize(uv) : vec2(0.0); vec2 radialDirNorm = vec2(radialDir.x / u_aspect, radialDir.y);Houve também um ponto técnico com o qual tive particular dificuldade, que foi a otimização móvel. Essa expressão foi importante para a narrativa desta seção, por isso nunca pensei em desligá-la no celular.
No entanto, à medida que o desenvolvimento avançava, fiquei cada vez mais preocupado com o custo de desempenho em dispositivos móveis. Para melhorá-lo ao máximo, fiz vários ajustes. Aqui estão alguns deles:
1. Otimizando as imagens
Preparei imagens otimizadas para tamanhos mobile e mudei o formato para WebP.
2. Ajustando o tamanho da geometria e a contagem de segmentos
Reduzi o tamanho e o número de segmentos pela metade.
3. Ajustando o efeito de desfoque
O efeito de desfoque está desativado no celular.
4. Ajustando a preferência de potência do renderizador
No celular, está configurado para baixo consumo de energia.
O mais eficaz deles foi o terceiro ajuste: modificar o efeito de desfoque. Os visuais baseados em desfoque são extremamente exigentes em termos de desempenho.
Página de demonstração
Esta página foi criada para apresentar diversos trabalhos selecionados com forte ênfase na expressão visual. Para melhorar a imersão, reutilizei o efeito curvo e desfocado da página Sobre, ao mesmo tempo que introduzi um grande efeito de paralaxe móvel e deslocamento RGB.
Sinto que os efeitos de desfoque e RGB funcionam extremamente bem quando o objetivo é aumentar a imersão. Eles são usados não apenas em web design, mas também frequentemente em mídia visual e baseada em movimento.
Conforme pretendido, sinto que a experiência geral de rolagem se tornou muito suave e criou um espaço com uma forte sensação de profundidade.
Abaixo está parte do código usado para criar o efeito de paralaxe.
vec2 uv = imageAspect(u_planeSize, u_imageSize, vUv); uv = (uv - vec2(0.5)) / u_imageScale + vec2(0.5); uv.x -= u_imageOffsetX; uv.y -= u_imageOffsetY;images.forEach((img, index) => { gsap.to(this.objcts[index].material.uniforms.u_imageOffsetY, { value: -0.3, scrollTrigger: { trigger: img, scroller: container, start: "top bottom", end: "bottom top", scrub: true, }, }); });Como a página também está conectada ao CMS, o conteúdo pode ser substituído livremente, adicionado ou removido do painel de administração.
Página inicial
O visual principal na página superior é um vídeo em estilo de rolo, mas na verdade tem dois modos: padrão e foco.
No modo foco, os visitantes podem visualizar informações sobre o 4WIDE, o que eu valorizo e os elementos de design que compõem o site, como Grid e Type. A mudança para o modo de foco afeta não apenas as informações mostradas, mas também o vídeo de fundo, que fica fortemente distorcido e é reproduzido mais lentamente. Ao fazer isso, ajustei a experiência para que parecesse mais focada.
Abaixo está parte do código usado para criar o modo de foco.
setupMvModeChange() { const modeButton = document.querySelector(".index-mv__mode-button"); let modeFlag = false; modeButton.addEventListener("click", () => { if (mvModeRunning) return; modeFlag = !modeFlag; if (flag) { gsap.to(this.plane.material.uniforms.u_filter, { value: 0.9, duration: 1.4, ease: "power4.out", }); if (this.fisheyePass.uniforms.u_strength) { gsap.to(this.fisheyePass.uniforms.u_strength, { value: 0.7, duration: 1.4, ease: "power4.out", }); } if (this.video) { gsap.to(this.video, { playbackRate: 0.6, duration: 1.4, ease: "power4.out", }); } } else { gsap.to(this.plane.material.uniforms.u_filter, { value: 0.3, duration: 1.4, ease: "power4.out", }); if (this.fisheyePass.uniforms.u_strength) { gsap.to(this.fisheyePass.uniforms.u_strength, { value: 0.0, duration: 1.4, ease: "power4.out", }); } if (this.video) { gsap.to(this.video, { playbackRate: 1, duration: 1.4, ease: "power4.out", }); } } }); }Reflexões
Este projeto, criado como o site do meu próprio negócio, tornou-se algo através do qual pude pensar profundamente e experimentar extensivamente. No geral, estou muito satisfeito com o resultado final, embora tenha certeza de que ainda há áreas onde ele poderia ter sido apresentado ainda melhor. Este site não é algo que considero acabado e quero continuar a aprimorá-lo e aprimorá-lo para que possa me servir por muito tempo.
Por fim, gostaria de agradecer à Codrops por me dar a oportunidade de apresentar este projeto desta forma. Muito obrigado por ler até o final.
