O Futuro Já Chegou

Um vídeo de tecnologia elétrico-azul de 20 segundos, reconstruído a partir do original viral: cubos 3D, um túnel de palavras, texto em cromo líquido, uma área de trabalho FUTURE.EXE, uma contagem regressiva, objetos de vidro e um herói FUTURE em cromo, cortado a 120 BPM. example.html é a referência finalizada — comece a partir dela.

Fonte

Um remake de um post viral do Douyin: https://www.douyin.com/video/7690393045783346918 (6.439 curtidas · 2.164 salvamentos · 1.285 compartilhamentos no Douyin (em 2026-10-12)). A composição é reconstruída em código a partir da peça publicada; a trilha sonora é original.

Arquivos de referência

Copie example.html, assets/gsap.min.js, assets/three-addons.js, assets/unbounded-black-glyphs.js, assets/jetbrains-mono-OFL.txt, assets/jetbrains-mono-subset.ttf, assets/soundtrack.mp3, assets/three.min.js.gz, assets/unbounded-OFL.txt, assets/unbounded-subset.ttf para a composição, preservando o caminho assets/. As licenças de fonte acompanham suas fontes. Use estes bytes locais congelados; nenhum script de tempo de execução ou CDN de fonte é necessário.

A galeria carrega assets/three.min.js. O pacote de referência congelado carrega os mesmos bytes do Three.js comprimidos como assets/three.min.js.gz para caber no orçamento por arquivo. Antes de renderizar, descomprima-o na composição: gzip -dc "<reference-root>/assets/three.min.js.gz" > "<composition-root>/assets/three.min.js". Ambos os placeholders são os diretórios reais de referência e composição nesta tarefa. Mantenha o URL do script HTML apontando para o arquivo descomprimido .js.

Direção de arte

• Azul elétrico, preto, branco e cromo; tipografia de exibição pesada Unbounded Black com JetBrains Mono para o HUD (ambos SIL OFL, empacotados).
• Three.js para a camada 3D (#gl) sob uma tela de sobreposição 2D (#ui). Todas as cenas são código legível dentro de example.html.
• assets/three-addons.js contém os add-ons do three.js que o filme precisa (RoomEnvironment, FontLoader, TextGeometry), desempacotados. assets/unbounded-black-glyphs.js contém contornos Unbounded Black para cada palavra 3D: A–Z, a–z, 0–9 e pontuação comum.
• O original é um post chinês de 62s; esta referência é um corte de destaque em inglês de 20s.

Mapa de batidas (20s)

• 0–1,5 cubos 1→4→64 · 1,5–2,5 SINAL · 2,5–4,0 retina + 97,2% · 4,0–5,0 túnel de palavras ACORDE · 5,0–6,0 O FUTURO · 6,0–6,5 cromo líquido FUTURO
• 6,5–7,5 JÁ / ESTÁ AQUI · 7,5–9,0 área de trabalho FUTURE.EXE · 9,0–9,5 CARREGANDO 99% · 9,5–11,0 3·2·1 · 11,0–13,0 PRISMA / RAIO / PLANETA / MENTE
• 13,0–14,0 vórtice em anel · 14,0–14,5 grade quadriculada · 14,5–18,5 herói FUTURE em cromo · 18,5–20,0 falha → FIM DA TRANSMISSÃO

Adaptando o template

• Altere a cópia em CFG no topo de example.html: brand, headline, hero (a palavra 3D em cromo, dimensionada para caber quando for mais longa que FUTURE), heroLine, date, signal, wake, awaken, tags, objects e endLine.
• Mantenha cortes bruscos na grade de 120 BPM, a ordem das cenas em EDIT e o herói em cromo. O código da cena fica no mesmo arquivo, agrupado por cena.
• Palavras 3D suportam letras latinas, dígitos e pontuação comum; a fonte de exibição empacotada cobre apenas latinas.

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 a 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 é carregado entre os quadros.

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

Mantenha o palco de ponta a ponta na galeria e na captura de MP4. Os controles de reprodução são uma sobreposição que permanece transparente até ser passada o mouse ou focada; 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 ajusta ao 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: as buscas de exportação suprimem callbacks da linha do tempo. Agende o próximo quadro de animação antes de desenhar para que um quadro com falha não interrompa o loop. Buscas para trás devem reproduzir quadros idênticos. Aguarde as fontes empacotadas antes da reprodução e sinalize "preview-ready" em um quadro de herói legível. Preserve window.__timelines e os atributos de tempo da composição. Evite gradientes de tela grandes e ruído por pixel: eles tornam cada quadro capturado caro e atrasam a exportação de MP4.

Som

assets/soundtrack.mp3 é uma partitura original de 20 segundos feita para este template

…