YouMind
Entrar

Prompt de Animação de Design de Movimento de UI

Um prompt detalhado para o Claude Opus 5.5 criar um vídeo sofisticado e em loop de design de movimento de UI usando HTML/Canvas, com física de molas e transições sincronizadas com a batida.

Comando
<inputs> Pergunte-me estas 3 coisas: 8-12 componentes de UI que se transformam uns nos outros (ex.: botão, carregador, player de música, slider de volume, interruptor, aba, gráfico, paleta de comandos, notificação), esquema de cores (preto e branco estrito ou uma cor de destaque) e uma faixa livre de royalties em torno de 120 BPM (ex.: do Mixkit). </inputs> <direction> Crie movimento de tela polido digno do Dribbble. Use apenas uma forma; nunca corte cenas. Represente todos os estados pela mesma forma mudando de tamanho, raio da borda e cor, trocando conteúdo com borrões curtos. O cursor impulsiona todas as mudanças via cliques e arrastos reais. O fundo é cinza claro quente, os componentes são preto e branco. O texto está em japonês (Noto Sans JP) e inglês/símbolos (Geist). Todo o movimento usa física natural de molas com overshoot mínimo. A câmera faz zoom para preencher a tela para cada estado. Faça loop perfeitamente (último quadro corresponde ao primeiro). Proibido: movimento saltitante, explosões de partículas, efeitos de brilho, gradientes nos componentes, pesos inconsistentes de ícones, silêncio morto, estéticas genéricas. </direction> <structure> 120 BPM, 7 compassos (~14 segundos), algo acontece a cada batida. Botão -> Carregador -> Marca de seleção -> Estilo Ilha Dinâmica -> Morph play/pause do Player de Música -> Arrasto do Scrubber -> Estiramento do Slider de Volume -> Sincronização do Interruptor -> Seleção líquida de aba -> Aba abre para gráfico auto-desenhante -> Colapsa para Paleta de Comandos -> Digitar/Pesquisar -> Enter -> Notificação -> De volta ao Botão. </structure> <build> 1. Arquivo HTML único, quadrado 1440x1440. Calcule todos os visuais dentro de seek(t). Sem transições/timers CSS. Stateless entre quadros. 2. Molas como respostas de passo em forma fechada. Sobreponha cálculos para alvos em mudança. 3. Seleção de aba: molas separadas para bordas esquerda/direita, a borda líder se estende mais rápido. 4. Arrastar: manipulação direta enquanto pressionado, retorno com mola quando solto. 5. Analise o áudio com numpy para grade de batidas. Sincronize sons com picos medidos. 6. Renderize com Playwright. Exporte 4 subquadros por quadro, misture com ffmpeg tmix para desfoque de movimento a 60fps. 7. Pré-visualize um quadro por batida antes da renderização completa para corrigir problemas de timing/legibilidade. </build> <gotchas> Nunca use will-change em elementos com zoom de câmera (causa desfoque no texto). Dê tempos únicos para textos entrando/saindo para evitar sobreposição. Garanta que o último quadro corresponda exatamente ao primeiro (incluindo posição/velocidade do cursor) para um loop suave. </gotchas> <start> Primeiro peça pelos inputs, depois mostre-me a lista de estado batida por batida antes de escrever o código. </start>

Como usar este prompt

  1. 1

    Copie o prompt completo acima.

  2. 2

    Abra uma plataforma compatível com o Claude Opus 5.5, como a YouMind, e cole o prompt.

  3. 3

    Troque o tema, o estilo ou os detalhes conforme a sua ideia e gere.

Este é um prompt de IA gratuito da biblioteca de prompts da YouMind. Explore outros milhares de prompts de vídeo, todos gratuitos para copiar e adaptar.

Explorar mais prompts de vídeo

Mais de Claude Opus 5.5

Modelo de Design de Movimento com Morphing de UI

@zero

Comparação de Motion Graphics: Opus vs GPT

@ホシノ@エンジニア

Prompt para Filme de Spoken Word Cinético

@TechHalla

Prompt de Motion Design para Revelação do Logo TypingMind

@Tony Dinh

Vídeo Raymarched de Pelicano Andando de Bicicleta

@Axton

Cena Interativa de Barco com Opus 5.5

@Mo Elgaraihy

Todas as categorias de Vídeo

01

Casos de uso

Mostra de Cenas CinematográficasVlog / Estilo de Vida SocialCurta-metragemVideoclipeComercial de Marca / ProdutoVer mais
02

Estilos

Cinematográfico e RealistaFantasia / MágicoCyberpunk / Ficção CientíficaAnimeFilme Vintage / RetrôVer mais
03

Assuntos

Pessoa / PersonagemEsportes / AçãoNatureza / PaisagemArquitetura / InterioresAbstrato / VFXVer mais

Mais recursos de prompts

Biblioteca de IA

Busca de prompts com IA

Deixe a IA buscar em dezenas de milhares de prompts. Filtre por modelo, período e palavras-chave, e ordene por engajamento: visualizações, favoritos, compartilhamentos e mais.

Testar grátis
Ferramentas de visão

Imagem para prompt

Transforme qualquer foto em um prompt de imagem IA detalhado. O conversor gratuito de imagem para prompt analisa composição, estilo e iluminação para recriar qualquer visual em segundos.

Converter imagem em prompt

Outros recursos de prompts

Por modelo

Prompts do GPT Image 2.5Comandos do GPT Image 2Comandos do Nano Banana ProComandos do Seedream 4.5Comandos do GPT Image 1.5Prompts de vídeo do GeminiComandos do Seedance 2.0Grok Imagine PromptsPrompts do Gemini 3 Pro para sites

Por mídia

Prompts de imagemPrompts de vídeoPrompts de IA para criar sites

Ferramentas de IA

Imagem para promptPrompts de fotoApresentações do GPT Image 2

Feito para criadores. Grátis para sempre.

YouMind é o copiloto criativo de IA usado por criadores no mundo todo. Cada prompt aqui é curado para ajudar você a criar melhor e mais rápido.

Explorar mais prompts
Prompts
Prompts do GPT Image 2.5Comandos do Nano Banana ProComandos do GPT Image 2Comandos do Seedance 2.5Comandos do Seedance 2.0Prompts de Claude Opus 5.5Comandos do GPT Image 1.5Prompts de GPT 6 Astra
Recursos
Para agentsAlternativas ao NotebookLMApresentações do GPT Image 2Markdown para artigo do 𝕏Nano Banana 2 vs. ProEditor de fotos com IAPrompts de fotoImagem para promptLenny Career CoachTeste de personalidade ABTI
Ferramentas
Ferramentas gratuitasGerador de posts para 𝕏Gerador de posts para LinkedInGerador de legendas para InstagramGerador de posts para ThreadsGerador de posts para RedditGerador de posts para FacebookGerador de posts para BlueskyGerador de legendas para TikTok
Produto
SkillsExtensãoAppPreçosBlogsNovidades
Comparar
NotionNotebookLMChatGPTCodexGenSparkGammaLovartManusMyMindPerplexity
Empresa
Fale Conosco
PrivacidadeTermosPolítica de cookies

© 2026 MIND MOTOR PTE. LTD.

AI Summary