3D
CREATIVE-CODING
MOTION-DESIGN
GENERATIVE
+2

Genesis

Exploración de creative coding sobre poliedros que contienen átomos. La pieza viaja en bucle entre simulación física (gravedad invertida) y composición editorial pura. Hecho con Three.js + GSAP, una de mis favoritas técnicamente.

Este caso de estudio entró en producción combinando dirección de arte, diseño UX/UI, motion design y desarrollo creativo en un único pipeline. El objetivo: que la navegación del producto se sintiera como una pequeña experiencia cinematográfica, no como otro catálogo.

Stack técnico: React, Three.js, GSAP + ScrollTrigger, GLSL shaders custom y Lenis para smooth scroll. Modelos 3D optimizados con DRACO y texturas en KTX2 para mantener 60 fps en mobile mid-range.

Fase 1

Concepto

Workshops con el cliente, exploración de referencias visuales, definición del ritmo narrativo y de los hitos del scroll.

Fase 2

Diseño

Mockups en Figma con sistema de componentes, tipografía variable, paleta basada en oklch y especificación completa de motion.

Fase 3

Build

Implementación React + Three.js, optimización de assets, integración con CMS headless, QA cross-device y handoff documentado.

Trabaja con JMWEB

Construyamos algo con personalidad.

Todo arranca con una conversación. Trae un brief, una referencia, una idea a medio cocinar — del resto me ocupo yo.

Empezar un proyecto

Próximos proyectos:

Cumbres

Landing page + e-commerce para una marca de material de alpinismo. Producción fotográfica en glaciar real, configurador 3D del arnés y una historia con scrollytelling sobre las primeras cordadas. Construido con Next.js + Three.js para que el equipo se vea, gire y pese.

Sweet Studio

Identidad visual + e-commerce para un obrador de pastelería boutique. Render 3D producto a producto en Blender, paleta pastel sobre fondo negro y un checkout que evita la fricción típica del DTC alimentación. Mucho cariño en la dirección de arte.

Prism Core

Concept de marca para una plataforma de trading on-chain. El gema-hologramada gira en WebGL con dispersión cromática real (índices de refracción reales, no fake), y el anillo de circuito reacciona al cursor. Three.js + GLSL custom shaders.

Pour Sessions

Pieza de art direction + fotografía para un estudio que pinta con tinta y leche sobre lienzo. Cápsula de marca con web editorial, vídeos macro a 240 fps de cada salpicadura y una tienda de prints. Spoiler: olía mejor de lo que parece.

Ver todos los proyectos