# Como fazer um story animado no Instagram que prende

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

Um story tem um ou dois segundos antes de o polegar seguir em frente. O tipo certo de movimento ganha o resto do ecrã; o errado só torna as palavras mais difíceis de ler.

## The short version

- Um story animado do Instagram é um vídeo de 1080×1920, normalmente um loop curto, usado no lugar de um story estático.
- Os stories animados mais legíveis mantêm o fundo a mover-se devagar e fazem as palavras entrar uma vez, mantendo-as depois paradas.
- O primeiro segundo é o que mais conta, por isso o título deve estar totalmente no ecrã cerca de um segundo depois de o story abrir.
- Carrega os stories animados como vídeo MP4 a 1080×1920 e não como GIF, para os gradientes ficarem suaves.
- Mantém texto e logótipos fora do topo e da base do quadro, onde o Instagram desenha a sua própria interface.

Um **story animado do Instagram** funciona quando uma só coisa se move com um propósito e tudo 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, e nada importante no topo ou na base do quadro de 1080×1920. Exporta-o em MP4 e não em GIF, e garante que o primeiríssimo fotograma já se lê como um design acabado, porque algumas pessoas só vão ver esse fotograma.

## O que deve mover-se num story animado

Um story vê-se por um instante, à distância do braço, muitas vezes sem som. O movimento atrai o olhar, por isso tudo o que se move compete com as tuas palavras. Os stories que prendem a atenção escolhem uma camada em movimento e fazem-na calma, e depois deixam o texto fazer o seu trabalho. Os stories carregados parecem enérgicos no editor e cansativos num telemóvel.

### Cansativo de ver

- Cada linha de texto anima de uma maneira diferente
- As palavras continuam a mover-se depois de chegarem
- Um fundo rápido e de alto contraste atrás de letra pequena
- Autocolantes, GIFs e efeitos empilhados num só quadro
- O título aparece ao fim de três segundos

### Prende a atenção

- Um só estilo de animação de texto em todo o story
- As palavras chegam e depois ficam perfeitamente paradas
- Um fundo lento com uma zona calma atrás das palavras
- Um elemento em movimento, escolhido de propósito
- O título lê-se num segundo

O mesmo princípio atravessa todo o bom trabalho de movimento, dos logótipos aos sites. Se queres a teoria por trás, [princípios de motion design](https://gradiently.design/pt-pt/guide/motion-design-principles) trata do tempo, da suavização e da hierarquia com mais pormenor.

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

A animação de texto é o movimento mais útil num story, porque diz ao olhar por onde começar. Mantém-na curta. Uma entrada que demora mais de meio segundo começa a parecer espera, e as pessoas passam à frente quando esperam.

| Animação | O que faz | Usa para |
| --- | --- | --- |
| Subida | As palavras sobem uma pequena distância e assentam | Anúncios calmos, citações, stories editoriais |
| Estalo | As palavras crescem com um ligeiro excesso | Ofertas, lançamentos, marcas divertidas |
| Varrimento | Uma linha é revelada a partir de um lado | Títulos com uma direção de leitura forte |
| Máquina de escrever | As letras aparecem uma a seguir à outra | Perguntas, aperitivos, ganchos curtos de poucas palavras |

Escolhe uma por story. A máquina de escrever é a mais lenta, por isso mantém a linha curta ou ainda estará a escrever quando as pessoas passarem à frente.

Escalona as linhas e não as palavras: primeiro o título, a linha de apoio um instante depois, o convite à ligação no fim. Essa ordem corresponde à forma como as pessoas leem e faz com que o story tenha sentido mesmo que alguém saia a meio. Para mais padrões, incluindo texto cinético, vê [ideias de animação de texto](https://gradiently.design/pt-pt/guide/text-animation-ideas).

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

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

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

Uma contagem decrescente que entra com estalo uma vez. O fundo continua a mover-se, por isso o story ainda parece vivo enquanto as palavras ficam.

## Tempos de um story animado do Instagram

Um story estático fica no ecrã cerca de cinco segundos antes de o Instagram avançar. Um story em vídeo passa enquanto o clipe durar, mas a atenção concentra-se no início: se o primeiro segundo está vazio, o resto raramente é visto. Planeia a linha de tempo a partir daí, de trás para a frente.

1. **0 a 1 segundo: o título** O fundo já se move no primeiro fotograma. O título termina a sua entrada no fim do primeiro segundo.
2. **1 a 2 segundos: o apoio** Chega a segunda linha ou o produto. Usa a mesma animação do título, com um movimento ligeiramente menor.
3. **2 a 3 segundos: a ação** Aparece o convite à ligação, a data ou o código. É a linha em que as pessoas agem, por isso precisa de tempo para ser lida.
4. **O resto: manter** Nada de novo entra. O fundo continua a derivar para o story fazer loop sem reinício visível.

Seis a dez segundos é uma duração confortável para um story desenhado com uma mensagem curta. Os clipes mais longos servem para falar ou demonstrar, não para um título. Se o story vai fazer loop, o fundo tem de acabar onde começou, o que está explicado passo a passo em [vídeo em loop perfeito](https://gradiently.design/pt-pt/guide/seamless-loop-video).

> **Faz do primeiro fotograma um design acabado** As miniaturas, as pré-visualizações e as ligações lentas podem mostrar o primeiro fotograma sozinho. Se as tuas palavras entram a partir do nada, esse fotograma é um fundo vazio. Começa com o título parcialmente visível ou desenha o primeiro fotograma como uma imagem estática completa.

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

Um story animado usa o mesmo quadro que um estático: 1080×1920 píxeis, 9:16. A interface do Instagram cobre o topo e a base, por isso mantém palavras e logótipos na faixa central. Uma regra prática habitual é deixar cerca de 250 píxeis livres de texto no topo e na base. A descrição completa está em [tamanho dos stories do Instagram](https://gradiently.design/pt-pt/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. Desenha o story em altura total em vez de esticar um post de feed para caber.

| Definição | Recomendação | Porquê |
| --- | --- | --- |
| Formato | MP4 | O Instagram reproduz vídeo de forma nativa e mantém os gradientes suaves |
| Tamanho | 1080×1920 px | Nada é redimensionado nem fica com barras |
| Taxa de fotogramas | 30 fps | Suave o bastante para movimento lento, ficheiros pequenos |
| Som | Opcional | Muita gente vê sem som, por isso as palavras têm de levar a mensagem |
| Evitar | Carregamentos em GIF | 256 cores por fotograma fazem os gradientes formar bandas |

Definiçõ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 riscas, e um story em movimento é vídeo para o Instagram, por isso dá-lhe vídeo. A comparação está em [GIF ou MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4).

## Fazer stories animados que não se parecem com os dos outros

A maioria dos modelos de stories animados usa o mesmo punhado de fundos em movimento, por isso um feed cheio deles se confunde. O fundo é onde a tua marca pode ser reconhecida antes de alguém ler uma palavra. Um campo de cor em movimento que te pertence faz mais do que qualquer loop de banco de imagens.

No Gradiently, um story começa num **Mark**: um fundo vivo de gradiente e material que se move sozinho e é único. Junta o título, escolhe subida, estalo, varrimento ou máquina de escrever, e o Mark mantém a sua região mais calma atrás das palavras enquanto a Tinta automática escolhe letra clara ou escura linha a linha. O mesmo design pode depois ser redimensionado para um post de feed ou para um [fundo de Reels](https://gradiently.design/pt-pt/guide/reels-tiktok-backgrounds) sem o reconstruir. A exportação de vídeo faz parte do Pro e guarda MP4 onde o navegador o suporta.

Story vertical minimalista com uma única linha sobre um menu novo sobre um gradiente em movimento lento

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

## FAQ

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

Desenha um quadro de 1080×1920 com um fundo em movimento e uma animação de texto, mantém as palavras na faixa central, exporta-o em MP4 e carrega-o como story. A maioria das ferramentas de design com exportação de vídeo consegue fazê-lo.

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

MP4 a 1080×1920 píxeis. Evita o GIF: o limite de 256 cores faz os gradientes formar bandas, e o Instagram trata um story em movimento como vídeo de qualquer forma.

### Que duração deve ter um story animado do Instagram?

Para um story desenhado com uma mensagem curta, seis a dez segundos é confortável. Põe o título no ecrã no primeiro segundo, porque a atenção cai depressa a partir daí.

### Porque é que o meu story animado parece desfocado ou com bandas?

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

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

Não. Deixa as palavras animar uma vez e ficar paradas. O texto em movimento é mais difícil de ler, e um fundo em movimento lento já mantém o story vivo.