GSAP ScrollTrigger: como um vibe coder faz vídeo no scroll com 2 frames

Um site em que o scroll desmonta um carro não pede ferramenta cara de vídeo. Bastam 2 frames: Ferrari de lado, depois a mesma com o capô aberto. O Google Flow junta as duas num vídeo. No Antigravity, o GSAP ScrollTrigger faz o scroll avançar o tempo.

Thiago já tinha colocado isso na página dele, em soluções, como website imersivo 3D. Quando Aldoir pediu um site com vídeo que vai scrollando e o carro se desmonta, ele descreveu o caminho que já tinha usado na página, o mesmo que saiu no Antigravity.

Ele já testou Hfield e avisou o gasto

Aldoir queria o efeito. Thiago conhecia a trilha que o pessoal usa quando tem grana: Hfield com MCP no cloud, gerando o vídeo até a cena ficar no ponto. Ele já tinha testado.

vai gastar sim, porque todas as vezes que eu testei lá gastou pra caralho

Ele avisou que dá para torrar reais até chegar nesse nível no Hfield. Se tiver grana para seguir, beleza. O teste dele, todas as vezes, gastou.

Ele apontou para a página que já tinha feito e mandou o Aldoir olhar:

Não usei nada de Hfield. Não gastei R$ com isso. Fiz tudo no Antigravity

2 frames: Ferrari de lado e capô aberto

A cena que ele descreveu para a hero foi esta:

eu quero uma Ferrari na hero do site e na hora que eu vou rolando, eu quero que desmonta a Ferrari

O prompt da primeira imagem é a Ferrari vermelha vista de lado. O da segunda é a mesma Ferrari olhando para o capô, capô aberto, motor à mostra. A câmera sai da lateral da Ferrari para o capô. Ficam 2 imagens: a do início e a do final do vídeo. No Google Flow o pedido é criar o vídeo com imagem inicial e imagem final, um b-roll que pega a Ferrari de lado e vai até o motor.

No ChatGPT grátis ele calcula umas 4 imagens por dia por conta. Gemini e ChatGPT geram o par inicial e final. No plano Pro, o Nano Banana 2 gera imagens de graça, infinitas. Ele coloca 4 imagens e vai criando.

ponho 4 imagens e vou criando, pego umas 30 e acho a melhor

Ele disse ao Aldoir que o segredo é os vídeos: eles têm que estar exatamente como você quer que fique a cena.

GSAP ScrollTrigger no vibe coding amarra o scroll ao tempo

Aldoir estava no Antigravity, plano Pro. Thiago apontou a biblioteca e o pedido:

você pede para ele utilizar o ScrollTrigger, usando GSAP

Na fala dele, é o GSAP que faz o vídeo scrollar na página, e basta pedir. O ritmo que ele pediu foi este:

O usuário tem que dar 5 scroll para passar o vídeo inteiro

conforme vai rolando a página, é como se tivesse passando pra frente o frame do vídeo

No vibe coding o pedido curto chega: utilizar o ScrollTrigger, usando GSAP, para o scroll avançar o tempo. A cena é que ele mandou cuidar antes, porque o vídeo tem que estar exatamente como você quer que fique. Vale ver como isso terminou em ffmpeg o que é. Foi o mesmo caminho de overengineering.

Quem está montando o site ainda pode precisar de o que é PWA no mesmo projeto, que é outra peça da página.

5 scrolls só valem se a cena já estiver certa

Amanhã o pedido de GSAP ScrollTrigger no Antigravity só entra quando as 2 imagens e o b-roll do Google Flow já estiverem no ponto da cena. Fixe 5 scrolls para o vídeo inteiro. Esse é o vibe coding que ele mostrou na página. Dá para assistir à live e ouvir o pedido da Ferrari e o aviso do Hfield.