SuperHumanoMotion

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.

1
2
3
4
5
Abrir o ClaudeCopiado
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 completo
1

Personalize e copie

Preencha os campos acima com os dados da sua marca e carregue em "Copiar prompt".

2

Cole no Claude

Abra o Claude com o modelo Claude Opus 5.5, de preferência com esforço alto, e cole o prompt.

3

Abra o ficheiro

Guarde o HTML que o Claude devolve e abra-o no browser. A animação começa sozinha.

4

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