Respuestas de Thomas Aufresne, desarrollador front-end y back-end; Glenn Catteeuw, director creativo y diseñador; Rogier de Boevé, desarrollador creativo; Kurt Drubbel, optimizador 3D; Paul Guilhem-Repaux, director de arte 3D; y Romain Rope, diseñador de sonido.
Fondo: Hashgraph Ventures es una firma de capital de riesgo en etapa inicial que respalda a fundadores en blockchain e inteligencia artificial. El sitio está dirigido principalmente a fundadores, inversores y socios en el espacio tecnológico emergente: personas que necesitan comprender rápidamente qué representa Hashgraph Ventures y por qué es diferente.
La mayoría de los sitios web de capital de riesgo son bastante tradicionales: diseños limpios, perfiles de socios, cuadrículas de cartera y un lenguaje visual predecible. Hashgraph Ventures quería un sitio que se destacara en su escena y señalara inmediatamente que opera de manera diferente.
Núcleo de diseño: La característica principal es el viaje submarino. La experiencia comienza sobre la superficie y gradualmente lleva a los usuarios a un mundo más inmersivo. Esa progresión crea una sensación de descubrimiento y hace que el sitio sea más memorable que un sitio web de capital de riesgo convencional.
Al mismo tiempo, tuvimos cuidado de no hacer que el concepto fuera demasiado literal. No queríamos depender de criaturas submarinas efectistas ni de referencias típicas del océano. En cambio, utilizamos la atmósfera, la luz, la profundidad, las partículas y el movimiento para crear una interpretación más premium del océano.
La interfaz se mantuvo mínima y sobria. Muchos sitios web dependen de tipografía de gran tamaño, pero queríamos que la interfaz de usuario se sintiera más controlada, permitiendo que el mundo submarino transmitiera la emoción mientras el contenido se mantuviera claro y creíble.
Detalles favoritos: Estamos particularmente orgullosos del sistema de partículas utilizado en todo el sitio, que imita las corrientes orgánicas submarinas y reacciona dinámicamente al ratón. Con WebGPU, fue posible hacer que cada partícula reaccionara dinámicamente a la iluminación personalizada y las cáusticas simuladas, creando una sensación de profundidad que se siente genuinamente inmersiva.
Desafíos: Encontrar el estilo adecuado para visualizar el cuerpo humanoide. Pasamos por varias iteraciones, desde enfoques basados en esquemas hasta diferentes sistemas de partículas, antes de llegar a un estilo de partículas altamente interactivo. Tenía que sentirse elegante y conectado con el mundo submarino, sin volverse demasiado de ciencia ficción o demasiado literal. La dirección final nos dio algo que parecía inmersivo y al mismo tiempo encajaba con el tono premium de la marca.
Tecnología: El sitio fue diseñado en Figma y Blender y desarrollado como una experiencia front-end personalizada utilizando GSAP, Nuxt.js, Theatre.js, Vue.js y WebGPU. Se generó como un sitio estático y se implementó a través de Netlify, utilizando Sanity como CMS.
Esta fue la primera vez que experimentamos con WebGPU en un proyecto. Queríamos llevar la calidad visual más allá de lo que normalmente intentaríamos en una experiencia basada en navegador, especialmente para la atmósfera submarina, el comportamiento de las partículas y la sensación de profundidad.
La experiencia inmersiva bajo el agua se creó utilizando gráficos en tiempo real, trabajo de sombreado, sistemas de partículas y técnicas de animación basadas en navegador. Coreografiamos el movimiento de la cámara y las transiciones con Theatre.js, lo que ayudó a que el sitio se sintiera más cinematográfico que una experiencia de desplazamiento tradicional.
Se prestó mucha atención a equilibrar la calidad visual con el tiempo de carga, la capacidad de respuesta y la usabilidad para que la experiencia pudiera parecer cinematográfica y al mismo tiempo funcionar como un sitio web práctico.
Explorar proyectos
Haga clic en una imagen para ver más de cada proyecto.
Credit Post By: