Tutorial: Criar um Post Motivacional Animado

Aprenda a criar uma citação motivacional animada atraente para Instagram Stories usando animações Letter Collage.

Tempo: 10 minutos Dificuldade: Iniciante

O que você vai criar

Uma citação motivacional animada impressionante com três frases, cada uma usando diferentes estilos de colagem de letras e cambaleantes revelam animações.

Características que você vai aprender

• Letter Collage styles — Neon telhas, recortes de revistas, efeitos de corte de papel
• Animações agiadas — Cartas que aparecem uma a uma
• Geradores de fundo — Fundo de explosão solar
• Animações Keyframe — Transições de cores e efeitos brilhantes

Passo 1: Configurar a Tela

1. Abrir o Editor PinePaper
2. Clique no tamanho canvas dropdown no rodapé
3. Selecione História do Instagram (1080×1920)

Passo 2: Adicionar Fundo Animado

1. Clique na aba cenas no painel direito
2. Mudar o Modo de Fundo para Generator
3. Selecionar Sunburst
4. Configurar as cores:
   • Cor 1: #FF6B6B (coral vermelho)
   • Cor 2: #4ECDC4 (teal)
   • Cor 3: #FFE66D (amarelo)
5. Conjunto Ray Count: 16
6. Activar Animar e definir Velocidade: 0.5
7. Clique em Gerar

Passo 3: Criar “DREAM BIG” Carta Colagem

1. Clique no botão Carta Colagem no barra de ferramentas (ou pressione L)
2. Tipo: DREAM BIG
3. Configurar o estilo:
   • Estilo: Tile
   • Paleta: Neon
   • Tamanho da fonte: 72
   • Raio de Canto: 8
   • Activar a Sombra
4. Posição na área central (x: 540, y: 750)

Equivalente de código:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

Passo 4: Adicionar Animação Atormentada para “DREAM BIG”

1. Com a colagem selecionada, abra o painel **Timeline
2. Clique em Adicionar Animação Staggered
3. Configurar:
   • Efeito: Pop In
   • Atraso do Stagger: 0.08s
   • Duração: 0,5s
   • Sequência: Linear (da esquerda para a direita)
   • Calma, calma

Equivalente de código:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

Passo 5: Criar “Operação Difícil” Colagem de Cartas

1. Criar outra Colagem de Cartas com:

   • Texto: Trabalho difícil
   • Estilo: Magazine (olhar nota de resgate)
   • Paleta: Magazine
   • Tamanho da fonte: 60
   • Posição: (540, 920)

2. Adicionar animação escalonada:

   • Efeito: Deslize Fade Up
   • Atraso do Stagger: 0.1s
   • Sequência: Wave (revelação fluida)

Equivalente de código:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

Passo 6: Criar a Colagem de Cartas “STAY HUMBLE”

1. Criar a terceira Carta Colagem:

   • Texto: STAY HUMBLE
   • Estilo: Corte de papel efeito de sombra (3D)
   • Tamanho da fonte: 68
   • Posição: (540, 1100)

2. Adicionar animação escalonada com salto:

   • Efeito: Pop In
   • Atraso do Stagger: 0, 06s
   • Sequência: Centro (revelações do meio para fora)
   • Facilidade: Salto

Equivalente de código:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

Passo 7: Adicionar linha de sotaque decorativo

1. Criar um retângulo para um divisor decorativo:

   • Largura: 500, Altura: 8
   • Cor: Branco (#FFFFFF)
   • Posição abaixo das frases

2. Adicionar animação de keyframe para pulsação de cores:

Equivalente de código:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

Passo 8: Visualização e reprodução

1. Pressione Space para reproduzir a animação
2. A linha do tempo mostra um loop de 6 segundos
3. Veja o cambaleante revela:
   • “DREAM BIG” aparece em letra por letra
   • “MÁS” desliza para cima com um efeito de onda
   • “STAY HUMBLE” salta do centro para fora

Etapa 9: Exportação

Para História do Instagram (Vídeo)

1. Clique no botão Export
2. Selecione WebM (recomendado) ou MP4
3. Configurar:
   • Duração: 6 segundos
   • Taxa de Quadro: 30 fps
   • Qualidade: Alta
4. Clique em Exportar e aguarde o download

Para outras plataformas

Código completo

Aqui está o código completo para recriar esta animação:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

Início Rápido: Usar o Modelo

Em vez de construir do zero, carregue o modelo pré-construído:

1. Abrir Painel de Templates (barra lateral direita)
2. Selecionar categoria: Social Media
3. Clique em Citação motivacional
4. O modelo carrega com todas as animações prontas

Referência de Estilos de Colagem de Cartas

Padrões de Sequência do Stagger

Dicas Pro

Assuntos contraditórios — Texto claro sobre fundos escuros (ou vice-versa) é essencial para a legibilidade.

Stagger timing — 0,05-0.1s entre letras parece natural. Muito rápido parece mecânico.

Estilos MIX — Usando diferentes estilos Letter Collage para cada frase adiciona interesse visual.

Salte para ênfase — O bounce facilitando “STAY HUMBLE” chama mais atenção.

Passos Próximos

• Letter Collage Reference — Todos os estilos e opções
• [Keyframe Editor] (/features/keyframes) — Controle de tempo personalizado
• Efeitos — Adicionar brilhos e destaques
• Physics Animation — Efeitos de alívio avançados