Web cinemàtica
Converteix un web pla en una landing amb moviment de cinema, en un o dos dies.
Web i interfície · JavaScript · Demo navegable
El problema
El moviment que distingeix un web car se sol resoldre amb vídeo generat per IA: pesa, costa cada mes i envelleix malament. Construir-lo en codi pesa una fracció, es veu igual o millor i no té quota.
Què fa
- Vuit mòduls cinematogràfics reutilitzables: parallax en desplaçar, revelats, galeries interactives i 3D en temps real.
- El moviment es construeix amb GSAP i React Three Fiber, en codi, no amb vídeo.
- Procés de cinc fases documentat, de l’anàlisi del web original al lliurament.
- Demo desplegada i navegable.
El que es va decidir en construir-lo
- El moviment es construeix en codi, no es grava
- No hi ha ni un sol vídeo al projecte. Resoldre el moviment amb vídeo generat pesa, costa cada mes i envelleix: canviar un titular obliga a tornar-lo a generar. En codi, el titular és text, s’indexa, es tradueix i es corregeix en un minut.
- Cada mòdul neteja el que és seu
- Les animacions es registren amb àmbit propi, així que en desmuntar el component se’n van amb ell. Sense això, les animacions lligades al desplaçament s’acumulen en navegar entre pàgines i el web es va tornant lent sense que res doni error.
- El 3D es reparteix: una secció, no tota la pàgina
- Set dels vuit mòduls són moviment en dues dimensions i només un munta una escena tridimensional. La biblioteca de 3D és la part cara del paquet: una landing que no la necessita es queda en una fracció del pes simplement no incloent aquest mòdul.
- La marca entra per variables, no per cercar i reemplaçar
- Colors, tipografies i textos de marca viuen en un sol objecte que s’injecta com a variables d’estil en arrencar. Per a un client nou se substitueix aquest objecte i tot el web es retematitza sol, en lloc de perseguir codis de color per vint fitxers.
Fins on arriba
- El que es publica és el paquet de mòduls i una plantilla que compila. El procés de cinc fases està documentat, no automatitzat: no hi ha cap script que l’executi.
- La marca de la demo és inventada. Nom, adreça i textos són d’un negoci que no existeix: serveix per veure el moviment, no com a cas de client.
- Incloure l’escena tridimensional porta el paquet a poc més de tres-cents quilobytes comprimits. És el cost de tenir 3D en temps real, i convé decidir-ho abans de començar, no al final.
- El procés complet, tal com està documentat, s’apuja en serveis externs amb clau pròpia per a les imatges. Aquesta part no està resolta al repositori.
- 8 mòduls de moviment
- 0 vídeos
- 5 fases documentades
Construït amb
- Vite
- React
- GSAP
- React Three Fiber