Web cinemática
Convierte una web plana en una landing con movimiento de cine, en uno o dos días.
Web e interfaz · JavaScript · Demo navegable
El problema
El movimiento que distingue a una web cara se suele resolver con vídeo generado por IA: pesa, cuesta cada mes y envejece mal. Construirlo en código pesa una fracción, se ve igual o mejor y no tiene cuota.
Qué hace
- Ocho módulos cinematográficos reutilizables: parallax al desplazar, revelados, galerías interactivas y 3D en tiempo real.
- El movimiento se construye con GSAP y React Three Fiber, en código, no con vídeo.
- Proceso de cinco fases documentado, del análisis de la web original a la entrega.
- Demo desplegada y navegable.
Lo que se decidió al construirlo
- El movimiento se construye en código, no se graba
- No hay un solo vídeo en el proyecto. Resolver el movimiento con vídeo generado pesa, cuesta cada mes y envejece: cambiar un titular obliga a volver a generarlo. En código, el titular es texto, se indexa, se traduce y se corrige en un minuto.
- Cada módulo limpia lo suyo
- Las animaciones se registran con ámbito propio, así que al desmontar el componente se van con él. Sin eso, las animaciones ligadas al desplazamiento se acumulan al navegar entre páginas y la web se va poniendo lenta sin que nada dé error.
- El 3D se reparte: una sección, no toda la página
- Siete de los ocho módulos son movimiento en dos dimensiones y solo uno monta una escena tridimensional. La biblioteca de 3D es la parte cara del paquete: una landing que no la necesita se queda en una fracción del peso simplemente no incluyendo ese módulo.
- La marca entra por variables, no por buscar y reemplazar
- Colores, tipografías y textos de marca viven en un solo objeto que se inyecta como variables de estilo al arrancar. Para un cliente nuevo se sustituye ese objeto y toda la web se retematiza sola, en lugar de perseguir códigos de color por veinte ficheros.
Hasta dónde llega
- Lo que se publica es el paquete de módulos y una plantilla que compila. El proceso de cinco fases está documentado, no automatizado: no hay ningún script que lo ejecute.
- La marca de la demo es inventada. Nombre, dirección y textos son de un negocio que no existe: sirve para ver el movimiento, no como caso de cliente.
- Incluir la escena tridimensional lleva el paquete a algo más de trescientos kilobytes comprimidos. Es el coste de tener 3D en tiempo real, y conviene decidirlo antes de empezar, no al final.
- El proceso completo, tal como está documentado, se apoya en servicios externos con clave propia para las imágenes. Esa parte no está resuelta en el repositorio.
- 8 módulos de movimiento
- 0 vídeos
- 5 fases documentadas
Construido con
- Vite
- React
- GSAP
- React Three Fiber