Movimento de UI de Forma Única

Uma peça de movimento de UI de 14 segundos, apenas com código, reconstruída a partir do original viral: uma forma se transforma de um botão em um carregador, player, slider, toggle, abas, gráfico, paleta de comandos e toast, impulsionada por um cursor a 120 BPM. example.html é a referência finalizada — comece por ela.

Fonte

Um remake de um post viral de @twoclipping: https://x.com/twoclipping/status/2103273003555402193 (1,03M visualizações · 12K curtidas · 20K favoritos no X (em 2026-10-05)). 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/geist-OFL.txt, assets/geist-medium.ttf, assets/geist-regular.ttf, assets/geist-semibold.ttf, assets/gsap.min.js, 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

• Tela de cinza claro quente #EDEDE8, componentes pretos #0A0A0A e brancos, trilha do toggle #D0D1CA; uma sombra suave.
• Fonte (SIL OFL, incluída): Geist Regular, Medium e SemiBold.
• O original é um quadrado de 1440×1440; esta referência mantém sua escala em um palco de 1920×1080.

Mapa de batidas (14s)

• 120 BPM, 7 compassos: Botão Gerar → carregador → check → ilha dinâmica → player de música (morph play/pause, scrub) → slider de volume que se estende além do máximo → toggle → indicador de aba líquido → gráfico que se desenha com tooltip de hover e um switch de Semana → paleta ⌘K (digite "frame", enter) → toast → botão Gerar.
• O último quadro corresponde ao primeiro, então ele faz loop.

Adaptando o template

• Substitua os estados de UI em SHAPE e seus conteúdos; mantenha uma forma que nunca corta, molas somadas por mudança, e um cursor que causa toda mudança.

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ópias, 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, molas ou keyframes avaliados a partir do tempo). Nenhum estado é carregado entre quadros.

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

Mantenha o palco de ponta a ponta tanto na galeria quanto na captura MP4. Os controles de reprodução são uma sobreposição que permanece transparente até ser focada ou ter o mouse sobre ela; nunca reserve espaço no palco para eles ou os inclua no pôster. Dentro de um projeto Open Design o player de origem do 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: a exportação busca suprimir callbacks da linha do tempo. Agende o próximo quadro de animação antes de desenhar para que um quadro falho não pare o loop. Buscas para trás devem reproduzir quadros idênticos. Aguarde as fontes incluídas antes da reprodução e sinalize preview-ready em um quadro hero 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 MP4.

Som

assets/soundtrack.mp3 é uma trilha sonora original de 14 segundos feita para este template e sincronizada com suas batidas; nenhum áudio do vídeo fonte é usado. A música faz parte do visual que está sendo refeito. Estas regras substituem as orientações gerais de som para este remake; aplique a primeira que corresponda ao briefing:

1. O usuário pede sem música: remova o elemento <audio>, não copie o arquivo e congele motionDelivery.audio como silent.
2. O usuário fornece um arquivo de áudio e pede para usá-lo: copie-o para a assets/ do filme e aponte <audio id="soundtrack"> para ele.
3. Caso contrário, mantenha esta trilha sonora, inclusive quando o briefing pedir música diferente, um gênero ou um humor. Este fluxo não pode gerar música: nunca gere, baixe ou sintetize áudio, e não adicione narração.

Sob as regras 2 e 3, congele motionDelivery.audio como required.

Mantenha id="soundtrack", data-start="0" e um data-volume numérico. Defina data-duration para o menor entre a música e o filme (o comprimento do filme quando o comprimento da música é desconhecido); a exportação desvanece a música lá. Nunca use loop: em um filme mais longo que a música, a música toca uma vez e o resto é silêncio.

Não adicione uma nota musical à resposta final. Apenas quando um pedido de música ou narração não puder ser atendido, diga isso em uma frase curta.

O elemento <audio> permanece dentro da raiz da composição; o exportador de desktop

…