Instagram Content
Comente CARROSSEL no Instagram @gastaomatos

Como criar Carrosséis Animados para Instagram com IA

Carrossel estático ninguém para pra ler. Com HyperFrames e GSAP você cria animações profissionais em HTML e renderiza em vídeo pronto para o Instagram.

Ferramentas necessárias

  • Bun: curl -fsSL https://bun.sh/install | bash (ou via PowerShell no Windows)
  • HyperFrames: não precisa instalar, use com bunx hyperframes
  • ffmpeg: winget install ffmpeg (Windows) ou brew install ffmpeg (Mac)

Como funciona o pipeline

  • Você cria um arquivo index.html com HTML + CSS + animações GSAP
  • O HyperFrames abre no navegador headless e grava frame a frame
  • O ffmpeg corta o vídeo em pedaços de 8s (um por card)
  • Você posta no Instagram: card-1 primeiro, depois os demais

Prompt para Claude Code criar seu carrossel

prompt
Crie um carrossel animado para Instagram (1080x1080) em HTML puro com GSAP 3.

Tema: [SEU TEMA]
Cards: 7 | Duração por card: 8s | Accent color: [SUA COR]

Estrutura:
- Card 1 (hook): badge + título grande + subtítulo (centralizado)
- Cards 2-6: badge + título + conteúdo
- Card 7 (CTA): palavra-chave + chamada para comentar

Regras técnicas obrigatórias:
- data-composition-id, data-width="1080", data-height="1080"
- data-duration="56", data-start="0"
- #card-1: justify-content center, align-items center, text-align center
- Timing cut-safe: saída em at(N+1, -0.6) dur 0.5, entrada em at(N+1, 0.1) dur 0.5
- window.__timelines["id"] = tl antes do tl.play()
- Scan bar 4px crescendo durante o card
- Contador "01 / 07" em JetBrains Mono no canto superior direito
- Fontes: JetBrains Mono + Space Grotesk

Renderizar:
bunx hyperframes render . -o video.mp4 -f 30 -q high --sdr

Cortar cards (8s cada):
for i in 1 2 3 4 5 6 7; do
  ffmpeg -ss $((($i-1)*8)) -i video.mp4 -t 8 -c:v libx264 -crf 18 card-$i.mp4
done

Perguntas frequentes

Por que carrossel em vídeo converte mais do que carrossel estático?

O movimento ativa o reflexo de atenção visual do cérebro humano. O Instagram também favorece vídeos no algoritmo, entregando mais alcance orgânico do que imagens estáticas. Carrosséis animados combinam os dois: o formato de carrossel (engajamento alto) com o vídeo (alcance alto).

O que é o HyperFrames?

HyperFrames é um renderizador de vídeo que converte HTML animado em arquivo de vídeo frame a frame. Você escreve o carrossel em HTML + CSS + GSAP e ele grava cada frame do navegador headless em alta resolução, sem precisar de After Effects ou Premiere.

O GSAP é gratuito para uso comercial?

Sim. O GSAP (GreenSock Animation Platform) tem licença gratuita para uso em projetos pessoais e comerciais. A versão paga só é necessária para plugins específicos como SplitText e MorphSVG.

Qual resolução o carrossel precisa ter para o Instagram?

Para feed quadrado: 1080x1080 pixels (proporção 1:1). Para Reels e Stories: 1080x1920 pixels (proporção 9:16). O HyperFrames aceita qualquer resolução via data-width e data-height.

Quanto tempo leva para criar um carrossel com esse método?

Com o prompt pronto, o Claude Code gera o HTML em 5-10 minutos. O render com HyperFrames leva 2-5 minutos dependendo da máquina. O corte de cards com ffmpeg leva menos de 1 minuto. Total: menos de 20 minutos do zero ao vídeo final.

Quer implementar isso?

Me chama no WhatsApp. Ajudo você a configurar ou implemento pra você.

Quero ajuda no WhatsApp
DT

Gastão Matos

@gastaomatos