YouMind
Entrar

Modelo de Design de Movimento com Morphing de UI

Um modelo de prompt abrangente para criar designs de movimento de interface do usuário em loop, onde os elementos se transformam através de vários estados sincronizados com a música.

Comando
<inputs> Peça-me: 8 a 12 estados de UI que quero que a forma assuma (ex.: botão, carregador, player, slider, toggle, abas, gráfico, command palette, toast), preto e branco puro ou uma cor de destaque, e uma música livre de royalties em torno de 120 BPM (ex.: Mixkit, gratuita para uso comercial). </inputs> <direction> Movimento de UI nível Dribbble. Uma única forma, nunca cortada: cada estado é o mesmo elemento mudando seu tamanho, raio e cor enquanto seu conteúdo troca com um leve desfoque. Um cursor impulsiona cada mudança com cliques e arrastos reais. Tela cinza-quente clara, componentes em preto e branco, uma fonte de UI limpa (Geist). Molas por toda parte, no máximo um pequeno overshoot. A câmera faz zoom para que cada estado preencha o quadro. O último quadro é o primeiro quadro, então ele entra em loop. Proibido: easing elástico, explosões de partículas, brilhos, gradientes na estrutura da UI, traços de ícones incompatíveis, tempo morto, qualquer coisa que pareça um template genérico. </direction> <structure> 120 BPM, 7 compassos, algo acontece em cada batida. Botão → carregador → check → dynamic island → music player com morphing play/pause → scrub na barra de progresso → ela se torna um slider de volume que estica quando arrastado além do máximo → um toggle vira na batida → o knob se torna um indicador de aba líquido → as abas se abrem em um gráfico que se desenha sozinho, com tooltip ao passar o mouse → colapsa em ⌘K → digite para filtrar → enter → toast → volta para o botão. </structure> <build> 1. Um único arquivo HTML, quadrado 1440x1440. Cada estilo é calculado a partir do tempo dentro de seek(t): sem transições CSS, sem timers, sem estado carregado entre frames. 2. As molas são respostas de passo em forma fechada. Um valor que muda de alvo várias vezes é a soma de uma mola por mudança, então permanece uma função pura do tempo. 3. As duas bordas do indicador de aba usam molas diferentes, então a borda líder estica à frente da borda traseira. Mesmo truque para o knob do toggle. 4. Os arrastos são manipulação direta: enquanto o cursor está pressionado, o valor é calculado a partir de sua posição. Ao soltar, ele retorna com mola de onde estava. 5. Analise a música com numpy para a grade de batidas e comece em um downbeat. Posicione cada som de UI pelo seu pico medido. 6. Renderize com Playwright: 4 subframes por frame, misturados com ffmpeg tmix para motion blur a 60fps. 7. Renderize um frame por batida antes da renderização completa. Corrija qualquer coisa fora da grade, apertada ou difícil de ler. </build> <gotchas> Nunca coloque will-change em nada que a câmera escale ou onde o texto fique desfocado. Texto que troca dentro de um contêiner em morphing precisa de seus próprios tempos de entrada e saída, ou ele se sobrepõe. Faça o último quadro ser idêntico ao primeiro, incluindo posição e velocidade do cursor, ou o loop terá travamentos. </gotchas> <start> Peça-me os inputs, depois mostre-me a lista de estados na grade de batidas antes de escrever qualquer 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

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

Prompt de Vídeo Showreel para Marca

@Ismail Fahmi

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