lroe/apple-dracula

Skill: Animação Explicativa Minimalista — Dracula Dark (Estilo MinutePhysics / Provocador de Reflexão)

Gera storyboards, folhas de tempo, scripts visuais e prompts de produção no estilo visual e de ritmo de vídeos explicativos conceituais minimalistas desenhados à mão.

---

1. Identidade Visual & Regras Estéticas

• Canvas: Fundo noturno Dracula (#282A36), zero gradientes, zero sombras projetadas.
• Linhas: Estilo tinta desenhada à mão (giz/monolinha com rugosidade orgânica sutil), espessura de traço consistente (3px–4px), cor de primeiro plano Dracula (#F8F8F2). Piso seguro para celular: nenhum traço de diagrama abaixo de 3px em 1080p; linhas de base usam 4px.
• Piso tipográfico seguro para celular (master único 16:9 YouTube): Nenhum texto na tela abaixo de 36px em 1080p. Rótulos secundários 36–44px, rótulos-chave 48–56px, títulos 72–80px. Se um rótulo não couber em 36px, corte-o ou mova esse detalhe para a narração em vez de diminuí-lo.
• Paleta (Dracula):
  • Base: Fundo Dracula (#282A36) + primeiro plano (#F8F8F2).
  • Superfície: Linha atual Dracula (#44475A) para cartões destacados/ativos; use #313342 para painéis padrão e #1E1F29 para poços/áreas rebaixadas.
  • Acento Funcional A: Vermelho Dracula (#FF5555) — perda, demissões, saldo negativo, atrito.
  • Acento Funcional B: Verde Dracula (#50FA7B) — ganhos, emprego, substituição, equilíbrio.
  • Acentos de suporte (usar com moderação): Rosa (#FF79C6), Roxo (#BD93F9), Ciano (#8BE9FD), Laranja (#FFB86C), Amarelo (#F1FA8C).
  • Preenchimento Neutro: Linha atual Dracula (#44475A) — preenchimentos sutis de objetos (mesas, prédios).
  • Preenchimento Profundo: Comentário Dracula (#6272A4) — apenas para formas preenchidas maiores, nunca para texto do corpo.
• Tipografia:
  • Estilo de Fonte: Sans-serif manuscrito limpo ou lettering casual (ex.: Caveat, Patrick Hand).
  • Densidade de Palavras: Máximo de 1–5 palavras por chamada. Nunca transcrever a narração completa na tela.
  • Posicionamento: Posicionado diretamente acima, abaixo ou adjacente à âncora visual associada.
  • Sem texto de baixo contraste: Rótulos secundários, sobrancelhas e legendas devem permanecer legíveis no escuro: primeiro plano Dracula (#F8F8F2) ou cinza lavanda (#B8B9C5). Nunca usar comentário Dracula (#6272A4) ou cinza desbotado para texto; ele desaparece em projetores.
  • Sem cabeçalhos de cena no canto superior esquerdo: Não repetir a narração como título + subtítulo no topo das cenas de conteúdo. A narração carrega a frase; o diagrama carrega apenas rótulos funcionais curtos. Isso evita o "ping-pong visual" de ler no canto superior esquerdo e depois olhar para o centro.
  • Cartões de capítulo são a única exceção: um número de capítulo + um único motivo podem ser usados como transição de tela cheia. Mantenha-os esparsos e nunca adicione um parágrafo.

---

2. Design de Personagens e Metáforas

• Personagens: Figuras simples de palito ou feijão. Rostos mínimos (olhos de ponto, curva de boca neutra/sutil). Distinções feitas através de adereços simples (chapéu, mesa, telefone).
• Metáforas Conceituais:
  • Tarefas/Trabalhos: Aglomerados circulares, contornos pontilhados aparecendo/desaparecendo.
  • Macroeconomia: Balanças, gráficos de linhas 2D, grades/pontos de matriz (ex.: 1.000 pontos).
  • Instituições: Arte linear de edifícios geométricos básicos, molduras de portas representando acesso/vagas.

---

3. Regras de Tempo, Sincronização e Ritmo

• Gatilho de Sincronia com a Fala: Elementos visuais desenham ou aparecem na sílaba exata em que são falados.
• Escalonamento Sequencial: Divida conceitos complexos em componentes visuais discretos introduzidos um por um (ex.: Tarefa 1 $\rightarrow$ Tarefa 2 $\rightarrow$ Braço do ATM puxa Tarefa 1).
• A Regra do "Espaço para Respirar" (Crucial):
  • Nunca faça a transição imediatamente após um ativo aparecer.
  • Mantenha o quadro completo por 1,5 a 3,0 segundos ou mais, conforme necessário, após a narração daquele ponto terminar. Precisamos garantir que o usuário consiga processar tudo.
  • Os espectadores precisam de tempo para ler as chamadas, registrar a relação e absorver a percepção antes que o movimento seja retomado.
• Espera Mínima de Processamento (regra rígida):
  • A revelação visual final em uma cena deve ter pelo menos 2,0 segundos de tempo de tela antes do corte. Se a narração tornar isso impossível, mova a revelação para mais cedo quando for contextual, ou estenda a cena até a próxima pausa natural.
  • Nunca corte na mesma palavra que completa um diagrama.
  • Se a linha final da narração for apenas uma passagem de bastão ("vamos rodar os números", "adaptadores resolvem isso"), mova esse texto para a próxima cena em vez de deixá-lo 0,1–0,8 s na tela.
  • Cenas densas (diagramas de várias partes, matemática, arquitetura) precisam que o estado final seja mantido por 2,5–3,5 s. Simplifique o último batimento em vez de apressar o corte.
• Transições = fade curto através do fundo Dracula (regra rígida):
  • Use um fade de 4–6 quadros através de #282A36 a 30 fps (0,13–0,2 s). Não use um wipe da esquerda para a direita; isso faz o corte parecer mecânico.
  • Pré-carregue o primeiro visual da próxima cena para que a lacuna escura seja apenas uma piscada, nunca uma cena em branco. Nunca exponha uma tela vazia por mais de ~0,2 s.
  • Se uma cena realmente precisar de um cartão de capítulo, mantenha um motivo na tela para que o cartão nunca seja um slide de texto vazio.
  • Verifique com um quadro estático em início da cena + 0,4 s. Se estiver mais de ~80% vazio, mova o primeiro visual para mais cedo.

---

4. Composição e Espaço Negativo

• Espaço Negativo: Mantenha 60%–80% da tela vazia o tempo todo.
• Linha de Base / Baseline: Ancore figuras e prédios a uma diretriz horizontal inferior ininterrupta.
• Isolamento do Ponto Focal: Mantenha 1 zona de foco ativa por batimento (esquerda, centro ou direita). Não anime vários quadrantes não relacionados simultaneamente.
• Transições: Fade curto através do fundo Dracula #282A36 (4–6 quadros), pan lateral ao longo da linha de base, ou escurecimento súbito. Sem wipes da esquerda para a direita, zooms chamativos ou rotações.
• mantenha o tamanho da fonte grande

---

5. Fluxo de Trabalho de Geração de Storyboard

Ao receber um roteiro de narração ou tópico conceitual:

1. Divisão em Nível de Tarefa: Segmente a narração em batimentos visuais de 3–7 segundos.
2. Mapeamento de Metáfora Visual: Atribua metáforas concretas e mínimas a afirmações econômicas/técnicas abstratas.
3. Seleção de Texto na Tela: Selecione $\le 3$ palavras âncora por batimento para ênfase na tela.
4. Alocação de Tempo e Espera: Marque pontos de sincronia exatos ([SYNC]) e durações de pausa/espera ([HOLD: Xs]).

---

6. Template de Saída

Para cada cena de vídeo, formate a saída da seguinte forma:

### Cena [Número]: [Título da Cena]
**Timestamp de Áudio:** [MM:SS - MM:SS]
**Narração:** "[Segmento exato do roteiro]"

* **Descrição Visual:** (1-2 frases sobre layout visual e ativos)
* **Texto na Tela:** "[Texto exato]" | Posição: [ex.: Superior-Centro] | Cor: [ex.: Vermelho Dracula]
* **Sequência de Animação:**
  1. `[00:00.0 - Palavra]` Desenhe [Ativo A] na linha de base.
  2. `[00:02.0 - Palavra]` Apareça/deslize [Ativo B] em [Ativo A].
  3. `[00:03.5 - Palavra]` Rótulo aparece com um pequeno salto.
* **Espera Pós-Animação:** [X,X segundos] (Quadro estático mantido para garantir compreensão antes da transição)
* **Transição de Saída:** [Corte / Pan da Linha de Base para a Esquerda / Fade para o Escuro]

1. Motor de Linhas e Metáforas: Rough.js

• Porquê: Você não pode confiar em SVGs estáticos se quiser a sensação orgânica desenhada à mão do MinutePhysics. Rough.js é uma biblioteca leve de canvas/SVG que pega formas geométricas, linhas e caminhos e os renderiza com "rugosidade", "curvatura" e traços de caneta esboçados ajustáveis.

• Amigabilidade para LLM: Muito alta. Em vez de coordenadas spline complexas, o LLM simplesmente chama:

  codeTsx

  rc.line(x1, y1, x2, y2, { roughness: 1.5, stroke: '#F8F8F2', strokeWidth: 3 });
  rc.circle(x, y, diameter, { fill: '#50FA7B', fillWeight: 3, roughness: 1.2 });
  

2. Runtime de Animação e Tempo: Remotion (React + TypeScript)

• Porquê:

  • Diferente das animações CSS/navegador tradicionais que podem perder quadros, o Remotion renderiza quadro a quadro (fps = 30 ou 60).

  • Possui hooks integrados como interpolate() e spring() para aparecimentos e escritas lineares.

  • Manipulação nativa de tempo de áudio via useCurrentFrame().

• Implementando o Efeito "Desenhar": Para traços de linha SVG, um LLM anima strokeDashoffset do comprimento total do caminho até 0.

3. Tipografia: Google Fonts (Caveat ou Patrick Hand)

• Incorpore as fontes diretamente via @remotion/google-fonts ou @font-face local.
• Defina a estilização estritamente para #F8F8F2 com máximo de 1–5 palavras por chamada.

4. Pipeline de Sincronia de Áudio (Upstream): OpenAI Whisper (Timestamps no Nível da Palavra)

• Antes do LLM animar, a narração bruta é transcrita com timestamps JSON no nível da palavra (ex.: via Whisper timestamp_granularities=["word"]).

• O LLM recebe o roteiro com timestamps e os converte em números de quadro:

  Quadro Alvo = Timestamp (segundos) × FPS
  

---