Promo de Produto

Um promo de produto de 15 segundos reconstruído do original viral com uma marca fictícia: um mascote em retícula pergunta "Tem algo para vender?", cartões de produto aparecem em azul, uma loja de telefonia se preenche, um quadro de checkout é carimbado "Resolvido." e o logotipo o fecha. example.html é a referência final — comece a partir dela.

Fonte

Um remake de um post viral de @achxvi: https://x.com/achxvi/status/2103918792845963545 (1,14M visualizações · 9,1 mil curtidas · 8,2 mil marcadores no X (em 2026-10-13)). A composição é reconstruída em código a partir da peça publicada; a trilha sonora é original. O original promove uma empresa real; este remake usa a marca fictícia Pennyflow.

Arquivos de referência

Copie example.html, assets/fraunces-OFL.txt, assets/fraunces-bold.ttf, assets/gsap.min.js, assets/instrument-serif-OFL.txt, assets/instrument-serif-italic.ttf, assets/inter-OFL.txt, assets/inter-regular.ttf, assets/inter-semibold.ttf, assets/jetbrains-mono-OFL.txt, assets/jetbrains-mono-regular.ttf, assets/soundtrack.mp3 para a composição, preservando o caminho assets/. As licenças de fonte acompanham suas fontes. Use estes bytes locais congelados; nenhum script em tempo de execução ou CDN de fonte é necessário.

Direção de arte

• Branco #FFFFFF, azul #1F70F3, tinta #111111, um quadro claro #FBFBFB e quase preto #060606.
• Fontes (SIL OFL, empacotadas): Inter Regular e SemiBold para títulos e UI, Fraunces Bold para o logotipo, Instrument Serif Italic para as palavras de destaque, JetBrains Mono para rótulos e o HUD.
• O mascote é uma garota com duas coques, um corte arredondado, mechas na testa e um grampo de cabelo; ela acena e pula no ritmo, pisca, segue o que aparece e pula com um "squash" a cada revelação.
• O mascote e os objetos do produto são desenhados em cinza em resolução de um quarto e ordenados em retícula (dithered), uma passagem halftone() por camada.
• HUD: o rótulo do capítulo no canto superior esquerdo, a marca e um timecode de 60 fps no canto superior direito; oculto no cartão final.

Mapa de batidas (15s)

• 0–2,45s GANCHO: o mascote desliza e sussurra "psst…"; "Tem algo / para vender?" com um sublinhado azul; o ponto de interrogação incha para azul.
• 2,45–4,45s QUALQUER COISA: o mascote sobe; cartões de curso, ebook e app aparecem um por um.
• 4,45–6,95s LOJA: um golpe para branco; "Pennyflow transforma em / uma loja / em minutos."; uma loja de telefonia se preenche (endereço, AO VIVO, avatar, produtos); o cursor clica em Obter agora.
• 6,95–11,2s RESOLVIDO: a câmera se afasta do botão de pagamento expresso para um bento de checkout: o número do cartão é digitado, R$ 9 / mês, o upsell do workbook, IVA, pagamentos contando, Pago, selos de verificação e o carimbo "Resolvido.".
• 11,2–13,3s FLUXO: no preto, "Você cria." / "Nós cuidamos do", o mascote piscando e sorrindo.
• 13,3–15s FIM: um wipe em retícula; "flow." se torna a cauda do logotipo, as letras caem, a cabeça aparece atrás dele; slogan, Comece a vender e o rodapé.

Personagem e encerramento

• SPEECH lista o início, duração e abertura dos gestos de boca visuais; mouth(t) abre a boca e acena com a cabeça junto com a cópia. Estes são apenas gestos visuais: a trilha sonora é música de fundo, sem voz ou fala simulada.
• No encerramento, "flow." salta de "Nós cuidamos do", viaja para o centro do palco e aparece na cauda do logotipo enquanto as outras letras caem; a cabeça espia por trás do logotipo, pula e pisca.

Adaptando o modelo

• Troque CFG.brand, CFG.domain, CFG.store, a cópia do cartão, produto e checkout, preços e paleta; mantenha os seis capítulos em seus tempos, e reajuste SPEECH para novas linhas.

Como a referência é construída

• Uma raiz de composição com camadas de tela. Uma única render(t) desenha o quadro inteiro a partir do tempo da linha do tempo mestre t; constantes no topo contêm cópia, paleta e tempo para que o filme possa ser re-tematizado em um só lugar.
• Todo valor visível é uma função pura de t (eases, springs ou keyframes avaliados a partir do tempo). Nenhum estado é transportado entre quadros.

Pré-visualização e exportação de vídeo

Mantenha o palco de ponta a ponta em captura de galeria e MP4. Os controles de reprodução são uma sobreposição que permanece transparente até que o mouse passe por cima ou o foco seja dado; nunca reserve espaço no palco para eles ou os inclua no pôster. Dentro de um projeto Open Design o player de origem de movimento se encaixa no palco e possui os controles, então o shell de pré-visualização cede seu próprio ajuste e controles lá.

A linha do tempo mestre GSAP é o único relógio. Renderize cada camada visível a partir de seu tempo atual no loop por quadro: a exportação busca suprimir a linha do tempo

…