roedyrustam/app-promo-media-expert

Especialista em Mídia Promocional para Aplicativos (Edição 2026)

English | Bahasa Indonesia

---

English

Orquestração e Integração

• ai-media-generation-expert: Gera imagens AI (Flux 1.1 Pro), vídeos B-roll (Sora, Runway Gen-3) e narração sintética (ElevenLabs v3).
• svg-animation-motion-expert: Animações SVG de alto desempenho, transições Framer Motion e tipografia cinética.
• file-upload-media-expert: Distribuição de assets em CDN, compressão de imagem com/sem perdas (Sharp) e transcodificação de vídeo.
• seo: Open Graph dinâmico (og:image), metadados Twitter Card e visualizações de crawlers sociais.
• ui-ux-pro-max: Tokens de design, hierarquias tipográficas e estilização de layout de cartões promocionais.
• visual-ui-auditor: Auditoria visual multimodal de capturas de tela de marketing, contraste e molduras de dispositivos.
• anti-slop: Gráficos de marketing anti-placebo, eliminando mockups genéricos e artefatos falsos de UI.
• senior-frontend / tailwind-expert: Molduras de dispositivos CSS de alta fidelidade, composição em canvas e estilização de layout responsivo.
• zero-to-prod-orchestrator: Coordena a Fase 5 (assets visuais e branding de UI) e a Fase 8 (lançamento, deploy, transferência de assets de marketing).
• Sinergia entre Domínios e Integração com Enxame de Subagentes: mobile-expo-expert, design-system-architect

Descrição

Guia de engenharia de nível profissional para criar mídia promocional de alta conversão para aplicações, abrangendo gráficos estáticos (capturas de tela para App Store, cartões para redes sociais, banners OG dinâmicos) e mídia dinâmica (vídeos teaser programáticos com Remotion, demonstrações cinéticas do aplicativo e demos de lançamento narradas por IA).

Condições de Ativação

• Gerar capturas de tela promocionais para Apple App Store e Google Play Store com mockups de dispositivos.
• Criar gráficos de lançamento para Product Hunt, banners do Twitter/X, showcases do LinkedIn e anúncios em carrossel do Instagram/TikTok.
• Implementar geração dinâmica de imagens de cartão social Open Graph (OG) via Satori / @vercel/og.
• Criar programaticamente vídeos promocionais, trailers teaser ou vídeos de tour do produto usando Remotion (vídeo baseado em React).
• Roteirizar e sintetizar storyboards de teaser de 30 segundos de alta conversão com narração por IA.
• Automatizar pipelines de captura de capturas de tela em múltiplas resoluções usando automação headless de navegador (Playwright/Puppeteer).

---

Arquitetura Principal e Pilares de Produção de Mídia

                     ┌──────────────────────────────────────────────┐
                     │          MECANISMO DE MÍDIA PROMOCIONAL       │
                     └──────────────────────┬───────────────────────┘
                                            │
               ┌────────────────────────────┴───────────────────────────┐
               ▼                                                        ▼
   IMAGENS ESTÁTICAS E GRÁFICOS                         CRIAÇÃO DE VÍDEO E MOVIMENTO
 ├── Capturas de tela App Store e Google Play           ├── Vídeos Programáticos Remotion (React)
 ├── Cartões Sociais (X, LinkedIn, Product Hunt)        ├── Fórmula de Teaser de 30s de Alta Conversão
 ├── Banners OpenGraph Dinâmicos (@vercel/og)           ├── Tipografia Cinética e Rastros de Cursor
 └── Mockups de Dispositivos em CSS/SVG Puro (iPhone/Pixel) └── Narração por IA e Sincronização B-Roll

---

1. Matriz de Capturas de Tela para App Store e Google Play

A. Padrão de Resolução e Especificação (2026)

Plataforma Alvo	Tamanho de Tela	Resolução Nativa	Proporção	Requisitos de Formato
Apple iOS (iPhone 16 Pro Max)	6,9" Super Retina	1320 × 2868 px	19,5:9	PNG 24-bit, RGB, sem alfa, máx. 10MB
Apple iOS (iPhone 16 / 15 Pro)	6,7" Super Retina	1290 × 2796 px	19,5:9	PNG 24-bit, RGB, sem alfa, máx. 10MB
Apple iPadOS (iPad Pro 13")	13,0" Liquid Retina	2064 × 2752 px	4:3	PNG 24-bit, RGB, sem alfa
Google Play Phone	Flagship Padrão	1080 × 2400 px (ou 1080 × 1920)	20:9 / 16:9	PNG/JPEG, mínimo 1080px no lado mais curto
Google Play Feature Graphic	Banner Hero	1024 × 500 px	~2:1	PNG/JPEG 24-bit, sem alfa, máx. 1MB
Vídeo Promocional App Store	Vídeo de Pré-visualização	1080 × 1920 px (Retrato) / 1920 × 1080	9:16 / 16:9	MP4/ProRes, máx. 30s, sem sobreposições falsas de SO

B. Fórmula de Composição de Captura de Tela de Alta Conversão

Cada captura de tela na sequência deve seguir uma hierarquia visual de 4 partes:

1. Título (Benefício Impactante): Máx. 4-6 palavras. Foco na transformação, não na característica técnica (ex.: "Automatize Contas em 3 Segundos" vs "Formulário de Geração de Faturas").
2. Subtítulo (Âncora Contextual): 1 frase curta esclarecendo o fluxo de trabalho.
3. UI Flutuante / Mockup em Moldura: Mockup de dispositivo de alto contraste, pixel-perfeito, inclinado 5°-12° ou de frente, centralizado nos 65% inferiores do quadro.
4. Canvas Ambiente / Gradiente: Gradiente de fundo OKLCH sutil combinando com o tema da marca com brilhos radiais suaves.

---

2. Especificações de Gráficos para Lançamento Social

• Kit de Lançamento Product Hunt:
  • Imagens da Galeria: 1270 × 760 px (proporção 5:3). Mostre os 3 principais recursos com tipografia nítida e telas reais de UI.
  • Teaser da Galeria Animada: GIF ou MP4 de 240 × 240 px (abaixo de 3MB) para a miniatura do cartão do produto.
• Cartões Twitter / X:
  • Cartão promocional no feed: 1200 × 675 px (16:9) ou 1200 × 630 px (1,91:1).
  • Banner do Perfil: 1500 × 500 px (proporção 3:1).
• Publicações Instagram e TikTok:
  • Slides do Carrossel no Feed: 1080 × 1350 px (proporção retrato 4:5).
  • Stories e Teaser Vertical: 1080 × 1920 px (proporção 9:16).

---

3. Gerador de Imagem Open Graph (OG) Dinâmica

A geração OG dinâmica garante que todo link compartilhado no Twitter/X, Discord, Slack e WhatsApp renderize um cartão personalizado de alta resolução com a marca.

// app/api/og/route.tsx (Next.js 15 + @vercel/og / Satori)
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || 'Next-Gen AI Workspace';
  const subtitle = searchParams.get('subtitle') || 'Built with VibesPlug Swarm Architecture';
  const tag = searchParams.get('tag') || 'v3.0 Production Ready';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          padding: '64px',
          backgroundColor: '#090a0f',
          backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 60%)',
          fontFamily: 'Inter, sans-serif',
          color: '#ffffff',
        }}
      >
        {/* Top Badges */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div
            style={{
              padding: '6px 16px',
              borderRadius: '9999px',
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              fontSize: '20px',
              fontWeight: 600,
              color: '#818cf8',
            }}
          >
            {tag}
          </div>
        </div>

        {/* Main Title & Subtitle */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '850px' }}>
          <h1
            style={{
              fontSize: '60px',
              fontWeight: 800,
              lineHeight: 1.1,
              letterSpacing: '-0.02em',
              background: 'linear-gradient(135deg, #ffffff 40%, #94a3b8 100%)',
              backgroundClip: 'text',
              color: 'transparent',
              margin: 0,
            }}
          >
            {title}
          </h1>
          <p
            style={{
              fontSize: '26px',
              color: '#94a3b8',
              lineHeight: 1.4,
              margin: 0,
            }}
          >
            {subtitle}
          </p>
        </div>

        {/* Footer Brand Branding */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
            borderTop: '1px solid rgba(255, 255, 255, 0.1)',
            paddingTop: '24px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div
              style={{
                width: '32px',
                height: '32px',
                borderRadius: '8px',
                background: 'linear-gradient(135deg, #6366f1, #a855f7)',
              }}
            />
            <span style={{ fontSize: '22px', fontWeight: 700 }}>MyApp.io</span>
          </div>
          <span style={{ fontSize: '18px', color: '#64748b' }}>Try free today • No credit card</span>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

---

4. Criação de Vídeo Programática com Remotion (React)

Remotion permite que desenvolvedores renderizem vídeos MP4 promocionais completamente a partir de código, possibilitando componentes de UI animados, tipografia cinética, física spring e rotações de dispositivos.

// src/remotion/AppPromoComposition.tsx
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import React from 'react';

export function AppPromoComposition({
  headline,
  subheadline,
  screenshotUrl
}: {
  headline: string;
  subheadline: string;
  screenshotUrl: string;
}) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Entrance spring animation for the device mockup
  const deviceEntrance = spring({
    frame,
    fps,
    config: { damping: 14, stiffness: 90 },
  });

  const translateY = interpolate(deviceEntrance, [0, 1], [400, 0]);
  const scale = interpolate(deviceEntrance, [0, 1], [0.85, 1]);

  // Floating continuous hover effect after entry
  const hoverY = Math.sin(frame / 20) * 12;

  // Text reveal animation
  const textOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
  const textTranslateY = interpolate(frame, [0, 20], [30, 0], { extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0a0d14',
        backgroundImage: 'radial-gradient(ellipse at 50% 10%, rgba(99, 102, 241, 0.35) 0%, transparent 70%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'Inter, sans-serif',
        overflow: 'hidden',
        padding: '60px',
      }}
    >
      {/* Kinetic Headline */}
      <div
        style={{
          opacity: textOpacity,
          transform: `translateY(${textTranslateY}px)`,
          textAlign: 'center',
          marginBottom: '40px',
          zIndex: 10,
        }}
      >
        <h1
          style={{
            fontSize: '56px',
            fontWeight: 800,
            color: '#ffffff',
            margin: '0 0 16px 0',
            letterSpacing: '-0.02em',
          }}
        >
          {headline}
        </h1>
        <p style={{ fontSize: '26px', color: '#94a3b8', margin: 0 }}>
          {subheadline}
        </p>
      </div>

      {/* Floating Device Container */}
      <div
        style={{
          transform: `translateY(${translateY + hoverY}px) scale(${scale})`,
          width: '720px',
          height: '1100px',
          borderRadius: '48px',
          padding: '16px',
          backgroundColor: '#1f2937',
          boxShadow: '0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.25)',
          border: '4px solid #374151',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        {/* Dynamic Notch / Island */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
          <div style={{ width: '120px', height: '24px', backgroundColor: '#000', borderRadius: '12px' }} />
        </div>
        
        {/* Screen Content */}
        <img
          src={screenshotUrl}
          alt="App Screen"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            borderRadius: '32px',
          }}
        />
      </div>
    </AbsoluteFill>
  );
};

Comando de Renderização CLI do Remotion

# Renderize um teaser promocional vertical 9:16 (Reels / TikTok / Shorts)
npx remotion render src/remotion/index.ts AppPromoTeaser out/promo-teaser.mp4 --props='{"headline":"Ship Apps in Minutes","subheadline":"Autonomous Swarm Intelligence","screenshotUrl":"/assets/screen.png"}'

---

5. A Fórmula de Vídeo Teaser de 30 Segundos de Alta Conversão

Timestamp	Fase	Pista Visual	Orientação de Áudio / Narração
00:00 - 00:04	O Gancho	Zoom rápido no problema (ex.: planilhas manuais bagunçadas ou builds com falha). Crachás de aviso Vermelho/Âmbar.	"Ainda perdendo horas manualmente fazendo deploys de releases?" (Narração enérgica e impactante).
00:04 - 00:12	A Revelação	Transição suave de inclinação 3D do dispositivo. O dashboard do aplicativo aparece com acentos interativos brilhantes.	"Conheça [Nome do App] — seu mecanismo autônomo de zero a produção."
00:12 - 00:20	Superpoderes Principais	3 cortes rápidos mostrando recursos principais: 1. Configuração com um clique; 2. Análises ao vivo; 3. Sincronização instantânea.	"Um clique transforma seu fluxo de trabalho, sincroniza dados em tempo real e elimina erros humanos."
00:20 - 00:26	Prova Social	Crachás de 5 estrelas, crachás G2/Product Hunt, pílulas de avatar de depoimento flutuantes.	"Confiado por mais de 10.000 desenvolvedores em todo o mundo."
00:26 - 00:30	Chamada para Ação	Grande e brilhante botão de CTA, crachás da App Store e Google Play, URL proeminente.	"Baixe agora na App Store ou visite myapp.io para começar grátis hoje."

---

6. Pipeline Automatizado de Captura de Tela para Múltiplos Dispositivos

...