Templates do Claude Motion: 24 estilos de movimento

A especificação de cada estilo

Paper Editorial

Ideal para: Ensaios, vídeos explicativos, artigos de opinião. Papel quente, título com serifa e um único acento cor de ferrugem. Sem pressa, como uma matéria de revista.

Layout: Margem esquerda larga, título no canto superior esquerdo, um filete fino acima dos rótulos de seção. As barras são blocos chapados.

Movimento: Subidas lentas de 28px com fade, 0.8s, power2.out. Um elemento se move por vez. Sem efeito de quique.

Blueprint

Ideal para: Arquitetura, sistemas, tutoriais técnicos. Grade azul-marinho escura com traços ciano. Tudo é desenhado em contorno e surge com uma revelação gradual, como em um plotter.

Layout: Grade discreta de 60px ao fundo. Caixas e barras são só contorno, nunca preenchidas. Os rótulos são em mono, maiúsculas e pequenos.

Movimento: Revelações da esquerda para a direita (clip-path), 0.9s, power1.inOut. Os rótulos acompanham sua forma. Nada faz fade nem quica.

Kinetic Poster

Ideal para: Lançamentos, promos, cortes para redes sociais. Palco preto, tipografia condensada em escala de pôster e uma cor ácida. As palavras entram com força e rapidez.

Layout: Títulos condensados em maiúsculas preenchem o quadro, com entrelinha justa. Uma ideia por cena.

Movimento: Cortes secos: os elementos entram de repente a partir de 118% de escala em 0.32s, expo.out, com 0.07s de intervalo. Nada flutua.

Quiet Keynote

Ideal para: Histórias de produto, atualizações para investidores. Palco claro, bastante espaço e números tranquilos em cartões brancos. Um número domina cada quadro.

Layout: Centralizado. Cartões brancos com sombra suave. No máximo doze palavras por cena.

Movimento: Escala suave de 92% a 100% com fade, 0.7s, power3.out. Os números contam até o valor final em 1.2s.

Chalk Lesson

Ideal para: Aulas, tutoriais, módulos de curso. Lousa verde com títulos manuscritos e destaque amarelo. Os passos são escritos um a um.

Layout: Títulos manuscritos, passos numerados à esquerda. O termo-chave recebe um sublinhado amarelo.

Movimento: Revelações da esquerda para a direita, como se fossem escritas, 0.7s, power1.out, com intervalo de 0.22s entre as linhas.

Ledger

Ideal para: Relatórios, revisões de métricas, finanças. Página branca, números em mono e um único verde para crescimento. Feito para que os gráficos continuem legíveis.

Layout: Um filete fino sob cada título. Números em mono. Sem gradientes, sem sombras, sem 3D.

Movimento: Subidas rápidas de 16px, 0.45s, power2.out, com 0.08s de intervalo. As barras crescem a partir da linha de base; os rótulos vêm em seguida.

Terminal

Ideal para: Ferramentas para devs, changelogs, demos de CLI. Janela de terminal grafite em mono com prompt verde. As linhas são impressas em etapas, como uma saída real.

Layout: Tudo fica dentro de uma única janela com barra de título. Os títulos começam com um prompt. O destaque marca a linha alterada.

Movimento: Revelações em etapas que parecem digitação: 16 passos em 0.6s, 0.2s entre as linhas. Sem curvas de easing.

Sunrise

Ideal para: Brand reels, anúncios, aberturas de evento. Degradê de coral a violeta com tipografia branca arredondada. Amigável e vibrante, com entrada elástica.

Layout: Degradê em um elemento filho de sangria total. Os rótulos são em formato de pílula. Barras e passos são brancos translúcidos com cantos bem arredondados.

Movimento: Pops elásticos a partir de 86% de escala, 0.55s, back.out(1.6), com 0.09s de intervalo. O fundo nunca se move.

Glass

Ideal para: Histórias de produto, lançamentos premium. Palco claro com cor suave no ar e painéis de branco fosco. Calmo, com aspecto sofisticado e muito espaço.

Layout: Dois campos de cor desfocados ao fundo. Os painéis são brancos translúcidos, com borda brilhante e sombra profunda e suave.

Movimento: Escala lenta e suave a partir de 92% com fade, 0.8s, power3.out. Os painéis entram um após o outro, nunca juntos.

Midnight

Ideal para: Produtos para desenvolvedores, roadmaps, changelogs. Fundo quase preto, bordas finíssimas, tipografia compacta e um único brilho lavanda. Preciso e discreto.

Layout: Um brilho suave atrás do conteúdo. Todo painel tem borda fina de 2px. Os títulos são compactos, sem exagero no tamanho.

Movimento: Subidas curtas de 14px, 0.5s, power3.out, com intervalo curto de 0.07s entre os elementos. Rápido e preciso, sem overshoot.

Pixel

Ideal para: Explicações de tecnologia, histórias de dados com tom descontraído. Creme quente com blocos do laranja ao amarelo e cantos retos. Tudo entra por etapas, como pixels acendendo.

Layout: Cantos retos em todo o layout. As barras são blocos quentes empilhados. Uma fileira de quadradinhos fica sob cada título.

Movimento: Wipes em degraus, em 8 etapas ao longo de 0.5s, com 0.14s de intervalo. Sem easing suave em nenhum ponto: as coisas simplesmente ligam.

Aubergine

Ideal para: Atualizações de equipe, comunicação interna, onboarding. Roxo profundo com amarelo quente e painéis em formato de balão de chat. Amigável e conversacional, como uma mensagem de um colega.

Layout: As etapas são balões de chat com um canto reto. Os rótulos são em formato de pílula. Mantenha as frases curtas e em tom de fala.

Movimento: Os balões surgem a partir de 86% com um pequeno overshoot, 0.5s, back.out(1.4), com 0.16s de intervalo, como mensagens chegando.

Graph Paper

Ideal para: Documentação técnica, atualizações de engenharia, benchmarks. Uma grade técnica clara, tipografia mono e um único verde para o resultado que importa. Parece um caderno de laboratório bem cuidado.

Layout: Grade fina de 48px no fundo. Painéis brancos com borda de 2px. Os títulos são discretos; os dados são o destaque.

Movimento: Wipes da esquerda para a direita, 0.55s, power2.out, 0.1s de intervalo. As linhas são desenhadas, não surgem com fade.

Pastel Shapes

Ideal para: Workshops, briefings criativos, posts para a comunidade. Papel creme, geometria lúdica em tons pastel e formas redondas e quadradas misturadas. Colaborativo e um pouco fora da grade.

Layout: Cada barra e cada etapa recebe o próximo tom pastel em sequência. Os cantos alternam entre redondos e retos.

Movimento: Pops elásticos a partir de 86%, 0.5s, back.out(1.8), 0.1s de intervalo. As formas parecem posicionadas à mão.

Signal

Ideal para: Anúncios, revisões de incidentes, declarações fortes. Preto profundo com uma faixa vermelha cortante e tipografia branca pesada. Urgente e impossível de passar batido.

Layout: Uma faixa vermelha diagonal cruza o fundo. Os títulos são muito compactos. Um elemento vermelho por cena, não mais que isso.

Movimento: Cortes secos a partir de 118% de escala em 0.3s, expo.out, 0.06s de intervalo. Toda cena abre no ritmo da batida.

Harbor

Ideal para: Finanças, preços, revisões de negócios. Tipografia azul-marinho escuro sobre superfícies claras e um único índigo confiante. Confiável e organizado, com um gradiente suave no topo.

Layout: Uma faixa de cor inclinada na borda superior. Painéis brancos com sombra suave. Os números são grandes e azul-marinho.

Movimento: Subidas regulares de 22px, 0.6s, power2.out, 0.1s de intervalo. Estável e previsível, nada lúdico.

Jornal

Ideal para: Comunicados, relatórios públicos, histórias. Papel off-white, títulos pretos com serifa e um filete vermelho. Tem cara de primeira página.

Layout: Um filete preto grosso acima de cada título e um fino abaixo. Cantos retos em todo lugar.

Movimento: Assenta rápido a partir de um tamanho um pouco maior que o final, 0.45s, como uma página jogada na mesa. Sem quique.

Botânico

Ideal para: Bem-estar, sustentabilidade, educação. Papel creme, verde-sálvia e uma fonte serifada sem pressa. Calmo, com imagens em aquarela.

Layout: Margens amplas e painéis arredondados. Um pequeno filete verde-folha fica acima de cada rótulo.

Movimento: Subidas lentas de 20px com fade longo, 0.9s, com intervalo de 0.16s. Nada chega depressa.

Noite Neon

Ideal para: Eventos, música, games, vida noturna. Azul-meia-noite com luz magenta. Títulos chamativos, bordas brilhantes, feito para ambientes escuros.

Layout: Os painéis têm uma borda fina luminosa. A barra e o número em destaque brilham em magenta.

Movimento: Surge a partir de 86% e ultrapassa levemente o tamanho final, 0.5s, com intervalo de 0.09s. Animado, sem tremer.

Argila

Ideal para: Onboarding, tours de produto, vídeos explicativos descontraídos. Bege quente com terracota e formas arredondadas suaves. Amigável sem ser infantil.

Layout: Painéis bem arredondados com sombra suave por baixo. Os selos de número são círculos.

Movimento: Entradas suaves com um leve exagero no final, 0,6 s, com 0,12 s de intervalo, como algo sendo apoiado com cuidado.

Risografia

Ideal para: Zines, cultura, revisões de design. Papel branco quente impresso em azul e rosa fluorescente. Títulos grandes e condensados, propositalmente um pouco ásperos.

Layout: Títulos condensados em maiúsculas, em azul com destaques em rosa. Os rótulos são blocos rosa.

Movimento: Assentamentos secos e rápidos a partir de 118%, 0,4 s. Os elementos caem como carimbos.

Boardroom

Ideal para: Estratégia, consultoria, apresentações para o conselho. Branco, azul-marinho e um único azul-royal. Títulos que já trazem a resposta e painéis organizados, como um consultor monta uma página.

Layout: Uma linha azul à esquerda de cada título. Os painéis são chapados, com borda fina.

Movimento: Subidas curtas de 16 px, 0,5 s, com 0,08 s de intervalo. Ágil e uniforme, nunca decorativo.

Ink Brush

Ideal para: Ensaios, filosofia, histórias de marca. Papel de arroz, tinta preta e um pequeno selo vermelho. Muito espaço vazio, de propósito.

Layout: O texto fica nos dois terços da esquerda, com espaço ao redor. O rótulo é um pequeno selo quadrado vermelho.

Movimento: Revelações lentas da esquerda para a direita, 1 s, com 0,2 s de intervalo, como um pincel sendo arrastado.

Sticker

Ideal para: Crianças, salas de aula, posts em redes sociais, novidades divertidas. Amarelo ensolarado, contornos pretos grossos e rosa vibrante. Cada painel parece um adesivo.

Layout: Painéis brancos com contorno preto grosso e sombra deslocada e dura, como adesivos num caderno.

Movimento: Entradas saltitantes com um exagero bem visível, 0,45 s, com 0,1 s de intervalo. Divertido de propósito.