Saltar al contenido
Mateo Sonzogni

Project · ynara-web

Ynara Web

Rol
Landing inmersiva · diseño y desarrollo
Año
2026
Tecnologías
  • GSAPMovimiento. Desde 2026. Orquestación temporal determinista para interfaces de alta precisión y micro-interacciones espaciales. También en La Rúcula Gastrobar y ARG Piscinas.
  • LenisMovimiento. Desde 2026. Scroll inercial normalizado multiplataforma sin romper el comportamiento nativo del navegador. También en La Rúcula Gastrobar.
  • Next.jsFrameworks. Desde 2026. Framework full-stack de React con optimización de assets, routing por sistema de archivos y SSR. También en Ynara.
  • ReactFrameworks. Desde 2026. Ecosistema masivo, React Server Components y rendering híbrido adoptado en la tesis Ynara. También en Ynara y Barberpole.
  • Tailwind CSSHerramientas. Desde 2026. Sistema de diseño componible y utilitario con purga agresiva para bundles ultra ligeros. También en La Rúcula Gastrobar y ARG Piscinas.
  • Three.jsGráficos. Desde 2026. WebGL y shaders GLSL para experiencias inmersivas 3D cuando el DOM no alcanza. Por ahora, solo en esta obra.
  • TypeScriptLenguajes. Desde 2023 · 3 años. Estándar obligatorio en cliente y servidor: si no está tipado en compilación, no llega a producción. También en Ynara y Eros Career OS.

Landing inmersiva WebGL para Ynara: una forma de luz que muta y reacciona al scroll. Puerta de entrada pública a la tesis.

Encargo

Una experiencia espacial que no se navega: se recorre. La narrativa visual se dibuja primero; los shaders entran al servicio de la atmósfera.

Proceso

  1. Concepto

    Traducir la inteligencia artificial adaptativa a una entidad lumínica tridimensional.

  2. Shaders

    Vertex y fragment shaders personalizados en GLSL sobre Three.js orquestados con GSAP ScrollTrigger.

Resultado

Shader procedural reactivo a la velocidad de scroll con fallback elegante para dispositivos de baja potencia.

Métricas

  • 4Draw callsDraw calls. Llamadas de dibujo a la GPU por cuadro.
  • 60 fpsFPS objetivoFPS objetivo. Cuadros por segundo que la animación sostiene.
  • 78 KBBundleBundle. Peso del JavaScript inicial comprimido que descarga el navegador.

Enlaces