MOTION 01
Scroll narrativo
La página cuenta una historia a medida que bajas: secciones que se ensamblan, datos que aparecen cuando toca, un producto que gira. Ideal para presentar un servicio complejo en 30 segundos.
Diseño web con motion en Bilbao. Webs que se mueven, cargan rápido y venden.
Scroll cinematográfico, microinteracciones, transiciones y 3D en el navegador. El tipo de web que la gente recuerda y comparte, sin sacrificar velocidad, SEO ni accesibilidad: el contenido se lee aunque no se anime nada y el móvil va primero. Diseño y código hechos por mí, en Bilbao.
- servicio
- Diseño web con motion
- stack
- GSAP · Three.js · WebGL · Motion · CSS
- objetivo --móvil
- LCP < 2,5 s · CLS < 0,1 · INP < 200 ms
- accesible
- respeta “reducir movimiento”
- reseñas --google
- ★★★★★ 5.0 · 10 reseñas en Google
- agenda --next
- completo hasta enero 2027 · reservas: febrero
EN DIRECTO · TRABAJO REAL
Así se ve una web con motion bien hecha.
- Tema de WordPress propio, sin page builders, editable por el colegio
- Storytelling por etapas con GSAP y galerías que se deslizan al hacer scroll
- Bilingüe castellano/euskera de principio a fin
Ver ficha del caso · ver web ↗ de San Felix Ikastola (se abre en una pestaña nueva)
QUÉ ES · MOTION WEB
4 formas de movimiento que sí aportan.
El motion no es decoración: guía la vista, explica y da feedback. Si una animación no hace ninguna de esas tres cosas, sobra.
MOTION 02
Microinteracciones
Botones que responden, formularios que confirman, menús que se abren con intención. Son detalles de 200 ms que hacen que una web se sienta cara y fácil de usar.
MOTION 03
3D y WebGL
Globos, mapas, productos o fondos en 3D que se mueven con el ratón o el dedo, calculados por la tarjeta gráfica. Se cargan solo cuando se ven y tienen versión estática de respaldo.
MOTION 04
Transiciones entre páginas
Navegar sin pantallazos en blanco: la imagen de una tarjeta se convierte en la cabecera de la siguiente página. Con View Transitions, nativo del navegador y sin librerías.
- GSAP · ScrollTrigger
- Lenis
- Three.js
- WebGL · GLSL
- Motion (Framer Motion)
- CSS scroll-driven
- View Transitions
- Astro · Next.js
RENDIMIENTO · LA LETRA PEQUEÑA
Motion con presupuesto de rendimiento.
Una web animada que tarda en cargar en el móvil pierde visitas antes de enseñar nada: cada segundo cuenta. Estas son las reglas que cumplo en cada entrega:
| Regla | Cómo | Objetivo |
|---|---|---|
| El contenido primero | Texto y titulares en el HTML; las animaciones se cargan después | LCP < 2,5 s |
| Nada salta | Espacio reservado para cada elemento animado | CLS < 0,1 |
| Respuesta inmediata | Solo transform y opacity; lo pesado fuera del hilo principal | INP < 200 ms |
| Solo lo que se ve | Vídeo, 3D y canvas se activan en pantalla y se pausan fuera | 0 gasto oculto |
| Accesible | “Reducir movimiento” respetado y todo usable con teclado | WCAG AA |
Esta misma web es la prueba: tiene monitores CRT animados, un auditor en directo y un laboratorio con seis experimentos en canvas y WebGL, y aun así saca 99–100 en Lighthouse móvil.
PRECIO · MOTION WEB
Cuánto cuesta una web con motion.
▸ BASE
La web
El motion se añade sobre una web que ya funciona: landing desde 500 € o web corporativa desde 1.500 €, con SEO local y velocidad de fábrica.
▸ MOTION
Según el alcance
De microinteracciones y transiciones a un hero 3D o un scroll narrativo completo. Te enseño referencias, elegimos nivel y te paso presupuesto cerrado por escrito.
CASOS REALES · MOTION
Casos reales, con captura y resultado.
San Felix Ikastola es el caso de motion publicado: WordPress con tema propio y GSAP. Junto a él, otros proyectos con captura y resultado:
Colegio concertado · OrtuellaSan Felix IkastolaWeb motion en WordPress: tema propio + GSAP$> ver caso →
ver web ↗ de San Felix Ikastola (se abre en una pestaña nueva)
Autor de thriller · OnlineEgoitz Martínez+2.000 leads en 3 meses con landing + email$> ver caso →
ver web ↗ de Egoitz Martínez (se abre en una pestaña nueva)
Farmacia · BarakaldoFarmacia 365 ZuazoNº1 en Google Maps · 1.290 llamadas en 6 meses$> ver caso →
ver web ↗ de Farmacia 365 Zuazo (se abre en una pestaña nueva)COBERTURA · BIZKAIA
Webs con motion para negocios de toda Bizkaia.
Reuniones presenciales en Bilbao y alrededores; el resto, en remoto desde 2019. Si tu negocio está en cualquiera de estas zonas, hablamos:
DUDAS · MOTION WEB
Lo que me preguntan antes de animar nada.
¿Las animaciones hacen la web más lenta?
Solo si se hacen mal. El contenido se pinta antes que cualquier animación, lo pesado se carga al entrar en pantalla y se pausa al salir, y todo se anima con transform y opacity. Objetivo en móvil: LCP < 2,5 s, CLS < 0,1 e INP < 200 ms, medido en PageSpeed antes de entregar.
¿Una web con motion posiciona peor en Google?
No, si el texto es texto real en el HTML y la web cumple Core Web Vitals. Google indexa el contenido, no la animación. Y una web que se recuerda retiene más tiempo al visitante. Más sobre esto en la guía de SEO local en Bilbao.
¿Qué pasa con las personas a las que marean las animaciones?
Si tienes activado “reducir movimiento” en el móvil o el ordenador, la web se muestra completa y quieta, sin perder información ni funciones. Pruébalo en el ~/lab.
¿Funciona igual en móvil?
Se diseña empezando por móvil: menos capas, efectos que responden al dedo y vídeo o 3D que solo se cargan cuando se ven. En móviles modestos se simplifica solo para no gastar batería ni datos.
¿Con qué tecnología trabajas?
GSAP y ScrollTrigger, Lenis, Three.js y WebGL, Motion (Framer Motion) en React y animaciones CSS nativas cuando bastan. Sobre Astro, Next.js o HTML estático según el proyecto. Si ya tienes WordPress, también se puede.
¿Cuánto cuesta una web con motion en Bilbao?
Parte de la web base (landing desde 500 €, corporativa desde 1.500 €) y el motion se presupuesta según alcance. Presupuesto cerrado por escrito antes de empezar. Más detalle de precios en este artículo.
¿Quieres una web que se recuerde?
Mándame dos o tres webs que te gusten y cuéntame qué vendes. Te digo qué nivel de motion tiene sentido para tu negocio y cuánto cuesta, en menos de 24 horas.
SIGUIENTE PASO
Sigue por aquí.
> contacto · Motion web
Cuéntame tu proyecto. Respuesta en menos de 24 h.
Qué vendes, qué webs te gustan y qué plazo tienes. Te respondo con una propuesta honesta y, si encaja, presupuesto cerrado.