Design de Movimento para Produtos

O que Design de Movimento para Produtos faz?

Crie uma história contínua, não uma apresentação de cards bonitos e sem conexão. Preserve o objeto de atenção do espectador através da sequência: intenção → ação → resultado → valor do produto → marca.

Escolha um ponto de partida

Leia o README do exemplo relevante e, em seguida, seu código-fonte. Resolva caminhos relativos a esta skill; nunca presuma que arquivos de uma sessão anterior existem.

Tarefa	Comece aqui
Seletor estilo iOS, dígitos rolantes, segmentos, régua	examples/controls/README.md
Tipografia cinética, entrada de UI distorcida, showcase guiado pelo cursor	examples/relay/README.md
Compositor grande, câmera vinculada à digitação, Enviar → resultado gerado	examples/composer/README.md
Giro curto 9:16 de dispositivo 3D real	examples/device-studio/README.md
Lançamento mobile completo de 22 segundos	examples/milo-launch/README.md
Composição MIDI, instrumentos sampleados, mixagem	examples/midi-score/README.md

Leia references/direction.md para encenação e temporização, references/deterministic-rendering.md antes da exportação de vídeo e references/asset-rights.md antes de publicar ou redistribuir assets. Links oficiais de inspiração de terceiros estão em references/gemini.md; esses vídeos são referências, não assets open-source incluídos.

Estabeleça o plano

1. Reutilize produto, público, proporção de tela, duração e tom já fornecidos. Pergunte apenas por informações ausentes que alterem o trabalho. Para um produto fictício, escolha um conceito coerente em vez de perguntar sobre cada detalhe.
2. Inspecione material real do produto/marca antes de fazer afirmações sobre o produto. Nunca invente capacidades, métricas, depoimentos ou capturas de tela de produção.
3. Para uma nova direção visual, comece com um plano HTML finalizado de 2–3 segundos, a menos que um filme completo tenha sido explicitamente solicitado. Preserve a coreografia aprovada ao estendê-la.
4. Use HTML/CSS/JavaScript autocontidos para protótipos por padrão. Uma solicitação HTML não é permissão para realizar um render de vídeo caro, upload ou publicação em nuvem. Mude de stack somente quando necessário ou solicitado.
5. Declare a sequência de ações e transferências de câmera brevemente antes de codificar. Mantenha o objeto focal de cada plano claro.

Dirija o movimento, não decore

• Meça as palavras após o carregamento real das fontes. Reflua palavras anteriores quando uma nova chegar, mantendo o centro da composição.
• Separe as curvas de posição, opacidade e desfoque. Torne o movimento visível cedo e limpe o desfoque antes do overshoot final. Anime a saída deliberadamente, em vez de fade-out padrão.
• Use um overshoot curto e legível e estabilize; não faça cada objeto balançar. examples/relay/scripts/motion-core.mjs contém molas de texto/câmera testadas, funções Bezier e de deformação cilíndrica.
• Deforme um painel com múltiplas faixas horizontais quando a curvatura for importante; uma única rotação plana não é uma superfície curvada. Conduza o movimento diagonal em ambos os eixos a partir de um único valor de progresso.
• Aproxime-se de uma ação real em vez de mostrar um painel de controle ilegível. Mova o cursor e a UI no mesmo sistema de coordenadas transformado, incluindo compensação de ponto de acesso.
• Mostre hover → pressão → liberação → mudança de estado real. Um arrasto precisa de pegar, percorrer, soltar e estado relacionado atualizado. Deixe o resultado seguir a ação que o causou.
• Mantenha o tempo do shader no relógio da cena. Diga quando o WebGL falha; nunca chame um gradiente estático de shader em execução.

Controles interativos versus movimento gravado

Use os controles fornecidos em vez de reconstruir sua física para cada vídeo.

• setValue(value) é interativo: integre uma mola a partir da posição e velocidade de apresentação atual. Permita que a entrada a interrompa.
• renderAt(value) é determinístico: defina imediatamente um valor de componente fracionário. Em vídeo, derive esse valor de quadro/fps; não execute uma mola ao vivo ou loop de relógio de parede durante a captura.
• Para um seletor (wheel), mostre uma janela de seleção central fixa e duas opções curvas de cada lado no meio da lista. Calcule posição, inclinação, escala e opacidade a partir da distância fracionária ao centro.
• Acompanhe o arrasto 1:1 com captura de ponteiro. Ao soltar, projete o momentum, encaixe em um item válido e carregue a velocidade na estabilização. Aplique resistência progressiva nos limites.
• Suporte roda/trackpad, teclado, foco, nomes/valores atuais acessíveis, viewports estreitos e movimento reduzido. Não toque sons ou haptics sem um requisito deliberado.
• Pare uma linha do tempo de demonstração externa ao manipular diretamente; dois relógios não devem lutar pelo mesmo componente.

Compositor e câmera

Mostre ambas as extremidades arredondadas enquanto o campo estiver vazio. Expanda um campo finito durante a digitação. Meça o texto e a posição do botão Enviar; siga o texto crescente desde o início com aceleração e frenagem, e pare no botão Enviar. Proteja uma região de texto separada para que as letras nunca passem sob o botão. Após Enviar, revele um resultado encenado independentemente e uma ação significativa dentro dele; não transforme a entrada na saída. Use o exemplo genérico do Canvas Lab para coreografia, não como uma afirmação sobre o comportamento ou latência de um modelo real.

Planos de dispositivos 3D reais

Use um GLB real e a malha de exibição original, não um quadro PNG ou uma tela DOM flutuante. Mantenha tela e corpo em um único rig. Use refletores de softbox de estúdio, materiais separados para metal/vidro/óptica, uma câmera com lente mais longa, rotação suavizada e uma pausa frontal legível. Anime as ações do aplicativo na textura da tela para que os indicadores de toque obedeçam à perspectiva. Capture tipografia DOM e WebGL juntos para o vídeo.

O iPhone GLB de referência não está incluído e não está licenciado sob MIT. Exija uma cópia licenciada separadamente do usuário ou uma alternativa explicitamente licenciada. Verifique nomes de malha, normais de exibição, UVs, escala e enquadramento antes de usar um modelo diferente. Nunca chame o exemplo de CAD oficial da Apple, render oficial da Apple ou path tracing.

Som, apenas quando solicitado

Leia references/music.md. Prefira um MIDI multitrilha original → SoundFont licenciado obtido separadamente → stems renderizados → mix quando MIDI/instrumentos forem solicitados; não torne uma API neural paga obrigatória. Amarre acentos sonoros esparsos a sinais visuais reais. Mantenha música, SFX e fala editáveis independentemente. Não afirme que uma partitura é boa ou aprovada sem ouvir/revisar do usuário. Medições e uma folha de sinalização não são uma faixa finalizada e audicionada.

Para HTML ao vivo, bloqueie o áudio por gesto e mantenha o relógio visual independente de uma promessa resume() de áudio ou de um relógio de áudio travado. Falhas de áudio não devem congelar a animação. Para vídeo offline, alinhe samples à linha do tempo em vez de gravar um stream de áudio ao vivo do navegador como única master.

Verifique e entregue

1. Execute os testes matemáticos/funcionais relevantes. Verifique busca direta, reversa, arbitrária e repetida; acertos do cursor; causalidade de estado; interrupção por teclado/arrasto; layout de 390px; e erros JS.
2. Respeite o escopo do usuário para revisão visual. Não afirme que a renderização ou verificações de metadados são inspeção visual. Se a garantia de qualidade visual for solicitada, inspecione de fato quadros representativos de entrada/intermediário/interação/saída e corrija sobreposição, cortes, cópia ilegível e camadas incorretas.
3. Para MP4, renderize e verifique duração, dimensões, fps, contagem de quadros, decodificação e presença de áudio. Não entregue instruções e as chame de vídeo exportado.
4. Entregue o HTML ou MP4 solicitado, além do código-fonte reproduzível, configuração exata, notas de direitos de assets e limitações honestas. Não adicione música silenciosamente.
5. Mantenha credenciais privadas, URLs de sessão, assets do sistema operacional, modelos comerciais baixados e pacotes gerados com assets restritos incorporados fora de um repositório público. A licença MIT raiz cobre código/documentação originais, não cada dependência ou asset externo.