Showreel de estúdio digital
Showreel editorial de um estúdio de design, com grelhas, componentes a encaixar, microinterações e curvas de easing.
Personalizar
Altere os campos e o prompt à direita atualiza-se. Depois é só copiar.
Crie um único ficheiro HTML (1920×1080 px, 16:9 horizontal, GSAP via CDN) com um showreel de 20 segundos para FORM Studio, um estúdio especializado em UX/UI Design e experiências digitais. Identidade: branco (#F7F7F5), grafite (#171717), #4353FF e #FF6B3D. Tipografia sans-serif condensada e bold, títulos grandes, etiquetas técnicas, linhas de construção e grelhas de alinhamento visíveis por instantes, como num editor de design. Cenas, por ordem: 1. "CADA PIXEL CONTA.": um pequeno cursor em #4353FF entra no ecrã e desenha as linhas de uma grelha de 12 colunas. As linhas transformam-se em formas geométricas e o título surge em letras grandes, com revelação sequencial. 2. "ESTRUTURA.": cartões, botões, campos de formulário e componentes aparecem dispersos e encaixam numa interface perfeitamente alinhada. Mostram-se por momentos guias, margens e espaçamentos. 3. "INTERAÇÃO.": sequência rápida de microinterações: um botão reage ao hover, um interruptor muda de estado, um cartão expande-se para modal e um indicador de carregamento transforma-se num sinal de confirmação. 4. "MOVIMENTO.": três cartões deslocam-se com tipos diferentes de easing. Surge brevemente um gráfico animado das curvas de aceleração. Os cartões transformam-se numa navegação horizontal fluida. 5. "ADAPTAÇÃO.": uma interface de computador aparece completa e as colunas reorganizam-se até se transformar numa interface de telemóvel, mantendo a hierarquia dos elementos. 6. Final: todos os componentes e linhas convergem para formar o nome FORM Studio. Surge a assinatura "UX/UI Design e experiências digitais" e, numa pequena anotação manuscrita, "Desenhado para fazer sentido.". Direção criativa: ritmo rápido, composição editorial, alternância entre fundos claros e escuros, efeitos stagger, morphing e movimentos de câmara simulados. Crie todos os elementos em HTML/CSS e anime-os com GSAP. Reprodução automática, sem interação, distribuída pelos 20 segundos totais. O resultado deve parecer o showreel de um estúdio internacional de design digital.
Como usar este prompt
Guia completoPersonalize e copie
Preencha os campos acima com os dados da sua marca e carregue em "Copiar prompt".
Cole no Claude
Abra o Claude com o modelo Claude Opus 5.5, de preferência com esforço alto, e cole o prompt.
Abra o ficheiro
Guarde o HTML que o Claude devolve e abra-o no browser. A animação começa sozinha.
Grave em vídeo
Grave o ecrã com o QuickTime ou o OBS, ou peça ao Claude ajustes até ficar como quer.
Mais em Produto Digital
Ver todos
Apresentação de app mobile
Vídeo promocional ao estilo App Store, com telemóvel 3D flutuante, brilho colorido, cartões a saltar do ecrã e transições com desfoque.

Lançamento de aplicação
Vídeo de lançamento minimalista a preto e branco, com títulos revelados palavra a palavra, mockups de interface e transições com rasto.