Vortex Studio
El hero de GTA VI, hecho con geometría medida en vez de un vídeo.
- HTML
- Tailwind CSS
- GSAP
- ScrollTrigger
- Lenis
- SVG
El problema
El efecto de portada que popularizó el tráiler de GTA VI suele resolverse haciendo trampa: se graba en vídeo, o se ajusta a mano con una media query por cada tamaño de pantalla. Lo primero pesa y no se puede tocar; lo segundo se rompe en el primer teléfono que no estaba en la lista.
La solución
Acá el efecto se calcula. Se mide el ancho real del texto y cuánto del lienzo se ve de verdad en ese viewport, y de ahí salen las dos escalas —letras gigantes al entrar, logotipo al final—. No hay una sola media query: la misma fórmula responde igual en un móvil que en un monitor ancho.
Arquitectura
- 01
Un solo archivo HTML, sin paso de build: se abre con doble clic y se edita con cualquier editor. Todo lo demás llega por CDN.
- 02
La portada son dos SVG superpuestos —el de la máscara calada y el del logo sólido— que se cruzan al final del recorrido, en vez de un solo elemento intentando ser las dos cosas.
- 03
El scroll suave y el motor de animación comparten un único bucle de cuadro, así que el trazo y la página nunca van desfasados.
- 04
Las tarjetas de trabajo llevan su propia velocidad de parallax como atributo, de modo que ajustar la profundidad de una es cambiar un número.
Stack
- HTML
- Tailwind CSS
- GSAP
- ScrollTrigger
- Lenis
- SVG
Retos técnicos
Que la intro no se pelee con el scroll
La portada tiene una animación de entrada que dura un par de segundos, y el usuario puede hacer scroll a la mitad. Si las dos animaciones siguen vivas, la máscara tiembla. La entrada se cancela al primer gesto —rueda, toque o scroll— saltando a su estado final, y el recorrido toma el control sin un solo salto visible.
Medir un texto que todavía no existe
El cálculo depende del ancho real de las letras, y ese ancho no es fiable hasta que la fuente de titulares terminó de cargar. Si se mide antes, el efecto arranca con una escala equivocada. Hay un valor de reserva para ese instante y las escalas se recalculan cuando el texto ya es medible, así que la primera visita se ve igual que las siguientes.
Resultados
- Peso del sitio
- Un archivo HTML, sin build
- Adaptable
- Sin una sola media query en el efecto