Respostas de Thomas Aufresne, desenvolvedor front-end e back-end; Glenn Catteeuw, diretor criativo e designer; Rogier de Boevé, desenvolvedor criativo; Kurt Drubbel, otimizador 3D; Paul Guilhem-Repaux, diretor de arte 3D; e Romain Rope, designer de som.
Fundo: Hashgraph Ventures é uma empresa de capital de risco em estágio inicial que apoia fundadores em blockchain e IA. O site é direcionado principalmente a fundadores, investidores e parceiros no espaço tecnológico emergente: pessoas que precisam entender rapidamente o que a Hashgraph Ventures representa e por que ela é diferente.
A maioria dos sites de capital de risco são bastante tradicionais: layouts limpos, perfis de parceiros, grades de portfólio e uma linguagem visual previsível. A Hashgraph Ventures queria um site que se destacasse em seu cenário e sinalizasse imediatamente que funciona de forma diferente.
Núcleo de projeto: A principal característica é a viagem subaquática. A experiência começa acima da superfície e gradualmente atrai os usuários para um mundo mais envolvente. Essa progressão cria uma sensação de descoberta e torna o site mais memorável do que um site convencional de capital de risco.
Ao mesmo tempo, tomamos cuidado para não tornar o conceito muito literal. Não queríamos depender de criaturas subaquáticas enigmáticas ou de referências típicas do oceano. Em vez disso, utilizámos atmosfera, luz, profundidade, partículas e movimento para criar uma interpretação mais premium do oceano.
A interface foi mantida mínima e restrita. Muitos sites dependem de tipografia superdimensionada, mas queríamos que a interface do usuário fosse mais controlada, permitindo que o mundo subaquático transmitisse a emoção enquanto o conteúdo permanecesse claro e confiável.
Detalhes favoritos: Estamos particularmente orgulhosos do sistema de partículas utilizado em todo o local, que imita correntes subaquáticas orgânicas e reage dinamicamente ao rato. Com o WebGPU, foi possível fazer com que cada partícula reagisse dinamicamente à iluminação personalizada e aos cáusticos simulados, criando uma sensação de profundidade genuinamente envolvente.
Desafios: Encontrar o estilo certo de como visualizamos o corpo humanóide. Passamos por diversas iterações — desde abordagens baseadas em contornos até diferentes sistemas de partículas — antes de chegarmos a um estilo de partícula altamente interativo. Precisava parecer elegante e conectado ao mundo subaquático, sem se tornar muito sci-fi ou muito literal. A direção final nos deu algo que parecia envolvente, ao mesmo tempo que se ajustava ao tom premium da marca.
Tecnologia: O site foi projetado em Figma e Blender e desenvolvido como uma experiência front-end customizada usando GSAP, Nuxt.js, Theatre.js, Vue.js e WebGPU. Foi gerado como site estático e implantado através do Netlify, utilizando Sanity como CMS.
Esta foi a primeira vez que experimentamos WebGPU em um projeto. Queríamos levar a qualidade visual além do que normalmente tentaríamos em uma experiência baseada em navegador, especialmente no que diz respeito à atmosfera subaquática, ao comportamento das partículas e à sensação de profundidade.
A experiência subaquática imersiva foi criada usando gráficos em tempo real, trabalho de shader, sistemas de partículas e técnicas de animação baseadas em navegador. Coreografamos o movimento e as transições da câmera com Theatre.js, ajudando o site a parecer mais cinematográfico do que uma experiência de rolagem tradicional.
Muita atenção foi dada ao equilíbrio entre qualidade visual, tempo de carregamento, capacidade de resposta e usabilidade para que a experiência pudesse parecer cinematográfica e ao mesmo tempo funcionar como um site prático.
Navegar em projetos
Clique na imagem para ver mais de cada projeto
Credit Post By: