Tools & technologies
Motion design y animación
El movimiento es lo que hace que algo aterrice.
El movimiento es lo que hace que algo aterrice. Uso el movimiento para guiar la atención, controlar el ritmo y dar a las interfaces una sensación de cadencia.
Por qué importa el movimiento
El movimiento decide cómo se siente un producto antes incluso de leer el contenido. Bien usado, comunica jerarquía, refuerza causa-efecto y hace que las interfaces se sientan responsivas y vivas. Mal usado, distrae o irrita.
Animación de interfaz y micro-interacciones
Transiciones de página, animaciones de scroll, hover states con personalidad, indicadores que reaccionan en tiempo real. Todo cuidadosamente cronometrado para que el producto se sienta intencionado en lugar de adornado.
Scroll storytelling
Coreografía de scroll con GSAP ScrollTrigger, Lenis smooth scroll y CSS animation-timeline. Secuencias que se despliegan a tu ritmo y convierten el scroll en una herramienta narrativa.
Entregables
Storyboards, animaciones Lottie/After Effects, prototipos animados, código de producción en GSAP/CSS y documentación de timing/easing.
Operating locations
Estudio en Madrid
Base en Madrid, trabajando en remoto con marcas, estudios y agencias dentro y fuera de España.
Info gráfico
Decision flow
El movimiento es el tono de voz de la pantalla. Cada curva comunica una intención distinta.
Info gráfico
Friction map
Una animación de 800ms se siente lenta; la misma a 320ms se siente premium.
Info gráfico
Journey shape
El easing no es decoración: es la forma en que el movimiento dice 'soy un objeto físico'.
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:
PHOTOGRAPHYE-COMMERCEMOTION-DESIGNUX
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.
Ver proyecto
3DMOTION-DESIGNBRANDINGE-COMMERCE
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.
Ver proyecto
3DCREATIVE-CODINGMOTION-DESIGNUX
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.
Ver proyecto
PHOTOGRAPHYART-DIRECTIONMOTION-DESIGN
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 proyecto