Showreel de Motion Designer

Um showreel de motion designer de 15 segundos a 128 BPM, reconstruído a partir do original viral: um abridor de marca Open Design, uma marca de texto em expansão, seis curvas de easing, uma forma em morphing, um campo truchet, uma nuvem de pontos 3D, tipo cinético e um cartão final. example.html é a referência finalizada — comece por ela.

Fonte

Um remake de um post viral de @stephanlivera: https://x.com/stephanlivera/status/2103315922098470926 (2.25M visualizações · 17K curtidas · 13K marcadores no X (em 05/10/2026)). 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/archivo-OFL.txt, assets/archivo-condensed-black.ttf, assets/archivo-expanded-black.ttf, assets/archivo-extrabold.ttf, assets/gsap.min.js, assets/instrument-serif-OFL.txt, assets/instrument-serif-italic.ttf, assets/jetbrains-mono-OFL.txt, assets/jetbrains-mono-bold.ttf, assets/jetbrains-mono-medium.ttf, assets/soundtrack.mp3 para a composição, preservando o caminho assets/. As licenças de fonte viajam com suas fontes. Use estes bytes locais congelados; nenhum script em tempo de execução ou CDN de fonte é necessário.

Direção de arte

• Cortes de cor fortes na paleta Open Design: quase preto #202020, verde Open Design #87EA5C, papel #FAFAFA, verde escuro #007106 e verde pálido #D0FFB5; tinta #26251E.
• Fontes (SIL OFL, empacotadas): Archivo Expanded Black e Condensed Black para texto de exibição, Archivo ExtraBold, Instrument Serif Italic para a linha de função, JetBrains Mono para o HUD.
• HUD em cada quadro: marcas de canto, marca e "MOTION REEL — 2026", rótulo do capítulo, timecode, 60 FPS, 128 BPM com quatro quadrados de batida, BAR n/8 e uma linha de progresso.

Mapa de batidas (15s)

• 0–2.0s IDENTIDADE: raios explodem de um ponto e giram, a marca Open Design é desenhada e preenchida com um flash, tipo orbitando, um wipe de círculo de papel.
• 2.0–3.5s a marca de texto desliza em duas linhas, aperta e se acomoda; "motion designer" em serif itálico.
• 3.5–5.5s EASING: "Seis maneiras de ir de A a B." — linear, ease-in-out, expo-out, back-out, elástico, bounce.
• 5.5–7.45s MORPHING: círculo → triângulo → estrela → squircle com ecos verdes e doze satélites.
• 7.45–9.75s SISTEMAS: um ladrilho de papel se divide em um campo truchet cruzado por uma onda verde.
• 9.75–11.2s PROFUNDIDADE: um plano de pontos se dobra em uma lanterna, depois em um toro.
• 11.2–13.1s TIPO CINÉTICO: EASE / IN. / EASE / OUT. / NEVER / LINEAR.
• 13.1–15s FIM: um anel branco sai rolando, a marca Open Design giratória com confete se acomoda ao lado da marca de texto empilhada, linha de função e rodapé.

Adaptando o modelo

• Troque CFG.brand, CFG.role, o texto do rodapé e a paleta para o briefing; mantenha os sete capítulos na grade de 128 BPM.

Como a referência é construída

• Uma raiz de composição com camadas de tela. Um único render(t) desenha o quadro inteiro a partir do tempo da linha do tempo mestre t; constantes no topo contêm o texto, a paleta e o 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 é transportado 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 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: 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 possa parar 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 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 lentificam a exportação de MP4.

Som

assets/soundtrack.mp3 é uma trilha original de 15 segundos feita para este modelo e sincronizada com suas batidas; nenhum áudio do vídeo original é 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.

…