gabelul/stitch-kit

Stitch → Vídeos de Demonstração com Remotion

Restrição: Use esta habilidade apenas quando o usuário mencionar explicitamente "Stitch" e vídeo de demonstração, demo ou Remotion.

Você é um especialista em produção de vídeo criando vídeos de demonstração a partir de designs de aplicativos Stitch. Você recupera capturas de tela do Stitch e constrói uma composição Remotion — transições de slide, animações de zoom e sobreposições de texto.

Pré-requisitos

• Servidor MCP Stitch (ou IDs de tela já conhecidos)
• Node.js 18+ e npm
• CLI Remotion (npm install -g remotion ou use via npx)

Passo 1: Coletar assets do Stitch

Descobrir telas

1. Execute list_tools → encontre o prefixo MCP do Stitch
2. Chame [prefixo]:list_projects → selecione o projeto
3. Chame [prefixo]:list_screens com projects/[projectId] → liste todas as telas
4. Para cada tela que você deseja no vídeo, chame [prefixo]:get_screen com IDs numéricos

Baixar capturas de tela

Para cada tela:

# Baixar captura de tela para o diretório de assets
curl -L "[screenshot.downloadUrl]" -o "video/public/assets/[nome-da-tela].png"

Ou use o script de busca:

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/[nome-da-tela].html"
# As capturas de tela são separadas — baixe via curl com a URL da captura

Construir manifesto de telas

Crie screens.json descrevendo o vídeo:

{
  "projectName": "Meu App",
  "fps": 30,
  "screens": [
    {
      "id": "home",
      "title": "Tela Inicial",
      "description": "Painel principal com métricas chave",
      "imagePath": "./public/assets/home.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 4
    },
    {
      "id": "profile",
      "title": "Perfil do Usuário",
      "description": "Configurações e gerenciamento de conta",
      "imagePath": "./public/assets/profile.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 3
    }
  ]
}

Passo 2: Configurar projeto Remotion

# Criar novo projeto Remotion dentro do diretório de trabalho
cd video
npm create video@latest -- --blank
cd walkthrough-video
npm install @remotion/transitions

Passo 3: Construir a composição

Componente ScreenSlide

// video/src/ScreenSlide.tsx
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'

interface ScreenSlideProps {
  /** Caminho para a imagem da captura de tela */
  imagePath: string
  /** Título da tela exibido como sobreposição */
  title: string
  /** Texto de descrição complementar */
  description: string
  /** Se deve aplicar um zoom sutil durante a exibição */
  withZoom?: boolean
}

/**
 * Slide de tela única com efeito de zoom opcional e sobreposição de texto.
 * Faz fade-in, mantém e faz fade-out.
 */
export function ScreenSlide({ imagePath, title, description, withZoom = true }: ScreenSlideProps) {
  const frame = useCurrentFrame()
  const { fps, durationInFrames } = useVideoConfig()

  // Fade-in nos primeiros 15 frames
  const fadeIn = spring({ fps, frame, config: { damping: 200 } })

  // Zoom sutil: 100% → 105% durante a duração
  const scale = withZoom
    ? interpolate(frame, [0, durationInFrames], [1, 1.05], { extrapolateRight: 'clamp' })
    : 1

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      {/* Captura de tela */}
      <AbsoluteFill style={{ opacity: fadeIn, transform: `scale(${scale})`, transformOrigin: 'center' }}>
        <Img src={imagePath} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </AbsoluteFill>

      {/* Sobreposição de texto inferior */}
      <AbsoluteFill
        style={{
          justifyContent: 'flex-end',
          padding: '40px 60px',
          background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
          opacity: fadeIn,
        }}
      >
        <h2 style={{ color: '#fff', fontSize: 36, fontWeight: 700, margin: 0 }}>{title}</h2>
        {description ? (
          <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 20, margin: '8px 0 0' }}>
            {description}
          </p>
        ) : null}
      </AbsoluteFill>
    </AbsoluteFill>
  )
}

Composição Walkthrough

// video/src/WalkthroughComposition.tsx
import { Series, TransitionSeries } from '@remotion/transitions'
import { fade } from '@remotion/transitions/fade'
import { slide } from '@remotion/transitions/slide'
import screensData from '../../screens.json'
import { ScreenSlide } from './ScreenSlide'

const TRANSITION_FRAMES = 15  // 0.5s a 30fps

/**
 * Composição principal de demonstração — uma tela por slide, transições fade/slide.
 */
export function WalkthroughComposition() {
  return (
    <TransitionSeries>
      {screensData.screens.map((screen, i) => (
        <>
          <TransitionSeries.Sequence
            key={screen.id}
            durationInFrames={screen.durationSeconds * screensData.fps}
          >
            <ScreenSlide
              imagePath={screen.imagePath}
              title={screen.title}
              description={screen.description}
            />
          </TransitionSeries.Sequence>
          {/* Adicionar transição entre telas (exceto após a última) */}
          {i < screensData.screens.length - 1 && (
            <TransitionSeries.Transition
              key={`t-${screen.id}`}
              timing={fade({ durationInFrames: TRANSITION_FRAMES })}
            />
          )}
        </>
      ))}
    </TransitionSeries>
  )
}

Registrar no Root.tsx

// video/src/Root.tsx
import { Composition } from 'remotion'
import { WalkthroughComposition } from './WalkthroughComposition'
import screensData from '../../screens.json'

const TOTAL_FRAMES = screensData.screens.reduce(
  (acc, s) => acc + s.durationSeconds * screensData.fps,
  0
)

export const RemotionRoot = () => (
  <>
    <Composition
      id="Walkthrough"
      component={WalkthroughComposition}
      durationInFrames={TOTAL_FRAMES}
      fps={screensData.fps}
      width={screensData.screens[0]?.width ?? 390}
      height={screensData.screens[0]?.height ?? 844}
    />
  </>
)

Passo 4: Visualizar e renderizar

# Visualizar no navegador
cd video/walkthrough-video
npm run dev

# Renderizar para MP4
npx remotion render Walkthrough output.mp4

# Renderização de maior qualidade
npx remotion render Walkthrough output.mp4 --jpeg-quality 95 --concurrency 4

Estilos de vídeo comuns

Estilo	Configuração
Demo rápido (1–2 min)	2–3s por tela, transições fade, apenas título
Demonstração de funcionalidades	4–5s por tela, zoom + slide, título + descrição
Apresentação	5–8s por tela, apenas fade, sobreposição de descrição completa
Clipe para redes sociais	1–2s por tela, cortes rápidos, trilha musical

Estrutura de arquivos

project/
├── screens.json             ← Manifesto de telas
├── scripts/fetch-stitch.sh  ← Downloader GCS
└── video/
    ├── public/
    │   └── assets/          ← Capturas de tela baixadas
    └── walkthrough-video/
        ├── src/
        │   ├── WalkthroughComposition.tsx
        │   ├── ScreenSlide.tsx
        │   └── Root.tsx
        ├── remotion.config.ts
        └── package.json

Solução de problemas

Problema	Solução
Capturas de tela borradas	Baixe a resolução completa: use a URL da captura diretamente, não uma miniatura
Incompatibilidade de layout	Defina as dimensões da composição Remotion para corresponder à width + height da tela obtidas com get_screen
Transições bruscas	Aumente TRANSITION_FRAMES ou troque de slide para fade
Falha na compilação devido a ESM	Adicione "type": "module" ao package.json e verifique a compatibilidade da versão do Remotion
MP4 não reproduz	Verifique se o FFmpeg está instalado: ffmpeg -version

Referências

• Documentação do Remotion: https://www.remotion.dev/docs/
• Transições do Remotion: https://www.remotion.dev/docs/transitions
• scripts/fetch-stitch.sh — Downloader GCS confiável
• stitch-mcp-list-screens — Descubra telas em um projeto Stitch
• stitch-mcp-get-screen — Obtenha URLs de download de capturas de tela