# Como fazer um story animado no Instagram que prende a atenção

[Canonical HTML page](https://gradiently.design/pt-br/guide/animated-instagram-story)

Um story tem um ou dois segundos antes de o dedo seguir adiante. O tipo certo de movimento conquista o resto do quadro; o errado só dificulta a leitura das palavras.

## The short version

- Um story animado no Instagram é um vídeo de 1080×1920, geralmente um loop curto, usado no lugar de um story estático.
- Os stories animados mais legíveis mantêm o fundo se movendo devagar e trazem as palavras uma única vez, depois as deixam paradas.
- O primeiro segundo é o que mais importa, então o título deve estar totalmente na tela cerca de um segundo depois de o story abrir.
- Envie stories animados como vídeo MP4 em 1080×1920, e não como GIF, para os gradientes ficarem suaves.
- Mantenha texto e logos fora do topo e da base do quadro, onde o Instagram desenha a própria interface.

Um **story animado no Instagram** funciona quando uma coisa se move com propósito e todo o resto continua legível. Na prática, isso significa um fundo que deriva devagar, um título que chega uma vez com uma animação curta e depois fica parado, e nada importante no topo ou na base do quadro de 1080×1920. Exporte em MP4, não em GIF, e garanta que o primeiro quadro já pareça um design acabado, porque algumas pessoas só vão ver esse quadro.

## O que deve se mover em um story animado

Um story é visto por um instante, com o celular na altura do braço, muitas vezes sem som. O movimento atrai o olhar, então tudo o que se mexe compete com suas palavras. Os stories que prendem a atenção escolhem uma camada em movimento, deixam essa camada calma e deixam o texto fazer seu trabalho. Stories agitados parecem enérgicos no editor e cansativos no celular.

### Cansa de assistir

- Cada linha de texto anima de um jeito diferente
- As palavras continuam se mexendo depois de chegar
- Fundo rápido e de alto contraste atrás de texto pequeno
- Adesivos, GIFs e efeitos empilhados em um só quadro
- O título aparece depois de três segundos

### Prende a atenção

- Um único estilo de animação de texto em todo o story
- As palavras chegam e depois ficam perfeitamente paradas
- Fundo lento com uma área calma atrás das palavras
- Um elemento em movimento, escolhido de propósito
- O título é legível em até um segundo

O mesmo princípio vale para todo bom trabalho de movimento, de logos a sites. Se quiser a teoria por trás, os [princípios de motion design](https://gradiently.design/pt-br/guide/motion-design-principles) tratam de tempo, suavização e hierarquia com mais profundidade.

## Quatro animações de texto que funcionam em stories

A animação de texto é o movimento mais útil em um story, porque mostra ao olhar por onde começar. Mantenha-a curta. Uma entrada que leva mais de meio segundo começa a parecer espera, e as pessoas tocam para pular a espera.

| Animação | O que faz | Use para |
| --- | --- | --- |
| Subida | As palavras deslizam um pouco para cima e assentam | Anúncios calmos, citações, stories editoriais |
| Estouro | As palavras crescem com um leve excesso | Ofertas, lançamentos, marcas divertidas |
| Varredura | Uma linha é revelada de um lado | Títulos com forte direção de leitura |
| Máquina de escrever | As letras aparecem uma após a outra | Perguntas, teasers, chamadas de poucas palavras |

Escolha uma por story. A máquina de escrever é a mais lenta, então mantenha a frase curta, ou ela ainda estará digitando quando as pessoas tocarem para sair.

Escalone as linhas, não as palavras: título primeiro, linha de apoio um instante depois, chamada para o link por último. Essa ordem segue o jeito como as pessoas leem, e faz o story ter sentido mesmo que alguém saia no meio. Para mais padrões, incluindo tipografia cinética, veja [ideias de animação de texto](https://gradiently.design/pt-br/guide/text-animation-ideas).

Story vertical com fundo em gradiente em movimento anunciando que um novo estúdio abre na sexta-feira

O título sobe primeiro, depois o detalhe. Os dois ficam na faixa central, longe da interface.

Story vertical de contagem regressiva com o texto faltam dois dias para uma edição de primavera, sobre um gradiente animado suave

Uma contagem regressiva que estoura uma só vez. O fundo continua se movendo, então o story segue vivo enquanto as palavras ficam paradas.

## O tempo de um story animado no Instagram

Um story estático fica na tela cerca de cinco segundos antes de o Instagram passar adiante. Um story em vídeo toca enquanto o clipe durar, mas a atenção se concentra no início: se o primeiro segundo é vazio, o resto raramente é visto. Planeje a linha do tempo de trás para a frente a partir disso.

1. **0 a 1 segundo: o título** O fundo já está se movendo no primeiro quadro. O título termina a entrada até o fim do primeiro segundo.
2. **1 a 2 segundos: o apoio** Chega a segunda linha ou o produto. Use a mesma animação do título, com um movimento um pouco menor.
3. **2 a 3 segundos: a ação** Aparece a chamada para o link, a data ou o código. É a linha em que as pessoas agem, então ela precisa de tempo para ser lida.
4. **O resto: segurar** Nada de novo entra. O fundo continua à deriva para o story repetir sem um reinício visível.

De seis a dez segundos é uma duração confortável para um story desenhado com uma mensagem curta. Clipes mais longos servem para fala ou demonstração, não para um título. Se o story vai repetir, o fundo precisa terminar onde começou, o que é explicado passo a passo em [vídeo em loop contínuo](https://gradiently.design/pt-br/guide/seamless-loop-video).

> **Faça do primeiro quadro um design acabado** Miniaturas, prévias e conexões lentas podem mostrar o primeiro quadro sozinho. Se suas palavras entram animadas a partir do nada, esse quadro é um fundo vazio. Comece com o título parcialmente visível ou desenhe o primeiro quadro como uma imagem completa.

## Tamanho, zonas seguras e configurações de exportação

Um story animado usa o mesmo quadro de um estático: 1080×1920 pixels, 9:16. A interface do Instagram fica por cima do topo e da base, então mantenha palavras e logos na faixa central. Uma regra prática comum é deixar cerca de 250 pixels no topo e na base livres de texto. O detalhamento completo está em [tamanho do story do Instagram](https://gradiently.design/pt-br/guide/instagram-story-size).

- Story e Reel 9:16: 1080 × 1920
- Post de feed 4:5: 1080 × 1350
- Quadrado 1:1: 1080 × 1080

O quadro do story ao lado dos formatos de feed. Desenhe o story na altura total, em vez de esticar um post de feed.

| Configuração | Recomendação | Por quê |
| --- | --- | --- |
| Formato | MP4 | O Instagram reproduz vídeo nativamente e mantém os gradientes suaves |
| Tamanho | 1080×1920 px | Nada é redimensionado nem ganha barras |
| Taxa de quadros | 30 fps | Suave o bastante para movimento lento, arquivos pequenos |
| Som | Opcional | Muita gente assiste sem som, então as palavras precisam carregar a mensagem |
| Evite | Envio em GIF | 256 cores por quadro fazem os gradientes formarem faixas |

Configurações de exportação para um story animado desenhado.

O GIF é o único formato a evitar aqui. O limite de 256 cores transforma gradientes suaves em listras, e um story em movimento é vídeo para o Instagram, então entregue um vídeo. A comparação está em [GIF ou MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4).

## Como fazer stories animados que não se parecem com os de todo mundo

A maioria dos templates de story animado usa os mesmos poucos fundos em movimento, então um feed cheio deles se confunde. O fundo é onde sua marca pode ser reconhecida antes de alguém ler uma palavra. Um campo de cor em movimento que pertence a você faz mais do que qualquer loop de banco de imagens.

No Gradiently, um story começa em um **Mark**: um gradiente vivo com fundo de material que se move sozinho e é único. Adicione o título, escolha subida, estouro, varredura ou máquina de escrever, e o Mark mantém a região mais calma atrás das palavras enquanto a Tinta automática escolhe texto claro ou escuro linha por linha. O mesmo design pode ser redimensionado para um post de feed ou um [fundo para Reels](https://gradiently.design/pt-br/guide/reels-tiktok-backgrounds) sem refazer tudo. A exportação de vídeo faz parte do Pro e salva MP4 onde o navegador oferece suporte.

Story vertical minimalista com uma única frase sobre um cardápio novo sobre um gradiente em movimento lento

Um Mark lento atrás de uma frase parada. O fundo se move; as palavras nunca.

## FAQ

### Como faço um story animado no Instagram?

Desenhe um quadro de 1080×1920 com fundo em movimento e uma animação de texto, mantenha as palavras na faixa central, exporte em MP4 e envie como story. A maioria das ferramentas de design com exportação de vídeo faz isso.

### Qual formato um story animado do Instagram deve ter?

MP4 em 1080×1920 pixels. Evite GIF: o limite de 256 cores forma faixas nos gradientes, e o Instagram trata um story em movimento como vídeo de qualquer forma.

### Quanto tempo um story animado do Instagram deve durar?

Para um story desenhado com uma mensagem curta, de seis a dez segundos é confortável. Coloque o título na tela no primeiro segundo, porque a atenção cai rápido depois disso.

### Por que meu story animado fica borrado ou com faixas?

Em geral porque foi exportado como GIF, no tamanho errado ou com taxa de bits baixa. Exporte MP4 em exatamente 1080×1920 para o Instagram não ter nada a redimensionar.

### O texto deve se mover o tempo todo?

Não. Deixe as palavras entrarem animadas uma vez e depois ficarem paradas. Texto em movimento é mais difícil de ler, e um fundo se movendo devagar já mantém o story vivo.