# Templates de vídeo curto · Recortes Mentais Peças estáticas para YouTube Shorts, TikTok e Instagram Reels: capas, guias de área segura, o estilo de legenda e as figurinhas do Crescêncio. Tudo em 1080 × 1920 (9:16), feito para funcionar em qualquer editor: CapCut, Canva, Premiere, After Effects, DaVinci Resolve ou direto no celular. Os clipes animados (reações do Crescêncio, intro, outro, transições, carimbos, etiquetas) ficam em `brand/video/reacoes/` e `brand/video/graficos/`. Quando usar cada coisa, quanto tempo e onde ele entra no quadro está na **Bíblia do Crescêncio** (`brand/video/BIBLIA-DO-CRESCENCIO.md`). Este arquivo é o manual das peças estáticas. --- ## O que tem nesta pasta | Arquivo | Medida | Pra quê | |---|---|---| | `capa-shorts-01.png` / `.svg` | 1080 × 1920 | Capa-exemplo preenchida: “Por que eu travo?”. Tira rasgada, pilha de post-its, caderno Miudezas. | | `capa-shorts-02.png` / `.svg` | 1080 × 1920 | Modelo “página cheia de cor”: fundo Ameixa, título em tiras presas com fita, Crescêncio pensativo subindo. | | `capa-shorts-03.png` / `.svg` | 1080 × 1920 | Modelo “polaroid”: papel pautado, título direto no papel e a sua foto ao lado do Crescêncio. | | `capa-shorts-0X-sem-titulo.png` | 1080 × 1920 | As mesmas capas sem título, carimbo e nota, para escrever por cima no editor. Na 03, a janela da foto é **vazada** (transparente): ponha a sua foto numa camada por baixo. | | `elementos/` | vários | Peças soltas para montar o título à mão: `tira-folha-longa`, `tira-folha-curta`, `tira-ameixa`, `marca-texto-limao`, `fita-crepe` (PNG transparente). | | `guia-area-segura-tiktok.png` | 1080 × 1920, transparente | Onde a interface do TikTok cobre o vídeo. | | `guia-area-segura-shorts.png` | 1080 × 1920, transparente | O mesmo para o YouTube Shorts. | | `guia-area-segura-reels.png` | 1080 × 1920, transparente | O mesmo para o Instagram Reels. | | `guia-area-segura-universal.png` | 1080 × 1920, transparente | As margens mais apertadas dos três juntas, mais a zona da legenda. **Use este quando o mesmo vídeo vai para os três apps.** | | `estilo-legenda.png` / `.svg` | 2560 × 1720 | Prancha do estilo de legenda, com exemplos certos e errados. | | `figurinhas/crescencio-*.png` | 1024 × 1024, transparente | Dez figurinhas do Crescêncio com balão em Caveat. | | `figurinhas-prancha.png` | — | As dez lado a lado, para escolher rápido. | Cópias leves (para o site e para mandar no celular) ficam em `public/brand/video/templates/`: capas em 540 px, figurinhas em 512 px, guias e pranchas comprimidos. ### Fontes Instale as fontes de `brand/fonts/` antes de abrir qualquer `.svg` ou de montar texto no editor: | Uso | Arquivo | Nome que aparece no editor | |---|---|---| | Título da capa | `Fraunces-900.ttf` | Fraunces · Black | | Legenda (versão A) | `BricolageCond-800.ttf` | Bricolage Grotesque Condensed · ExtraBold | | Legenda (versão B) e @ | `Bricolage-600.ttf` | Bricolage Grotesque · SemiBold | | Carimbo “Recorte nº” | `BricolageCond-800.ttf` | Bricolage Grotesque Condensed · ExtraBold | | Balão e nota à mão | `Caveat-700.ttf` | Caveat · Bold | - **Windows:** clique com o botão direito no `.ttf` › Instalar para todos os usuários. Feche e abra o editor de novo. - **Mac:** dois cliques no `.ttf` › Instalar (Catálogo de Fontes). - **Celular:** o CapCut deixa importar fonte pelo próprio app (na lista de fontes do texto procure a opção de importar ou adicionar fonte; o nome do botão muda de versão para versão). Mande os `.ttf` para o celular antes. - **Canva:** procure “Fraunces”, “Bricolage Grotesque” e “Caveat” na lista de fontes. Se alguma não aparecer, o envio de fonte própria exige o plano Pro (Kit de Marca › Fontes). --- ## Área segura: as medidas As interfaces cobrem o topo, a coluna de botões à direita e uma faixa grossa embaixo (perfil, legenda do post, som e a barra do app). Os números abaixo são **conservadores**: em cada lado foi usado o maior valor entre os guias mais citados por criadores e arredondado para cima. | App | Topo | Faixa de baixo | Direita (botões) | Esquerda | Área segura | |---|---|---|---|---|---| | TikTok | 150 px | 500 px | 160 px | 60 px | 860 × 1270 (x 60–920, y 150–1420) | | YouTube Shorts | 200 px | 440 px | 150 px | 60 px | 870 × 1280 (x 60–930, y 200–1480) | | Instagram Reels | 270 px | 480 px | 140 px | 60 px | 880 × 1170 (x 60–940, y 270–1440) | | **Os três ao mesmo tempo** | **270 px** | **500 px** | **160 px** | **60 px** | **860 × 1150 (x 60–920, y 270–1420)** | - **Grade do perfil:** o Instagram e o TikTok mostram a capa cortada em 3:4 (1080 × 1440, de y 240 a y 1680). Os guias marcam esse corte com uma linha lilás tracejada. - **Zona da legenda:** centralizada, x 160–920, y 1110–1400 (aparece no guia universal). - **Anúncio e parceria paga:** no Reels patrocinado a faixa de baixo cresce por causa do botão de chamada. A Meta recomenda deixar cerca de 35% de baixo livre de texto nesses casos. > **As interfaces mudam** com a versão do app, o tamanho do celular, o idioma e até o tamanho da legenda que você escreve no post. Estes guias são **aproximados** (revisados em outubro de 2026). De tempos em tempos, publique um rascunho privado ou “só para mim” e confira se nada importante ficou embaixo de botão. ### Como usar os guias no editor O guia é a **camada mais de cima** da linha do tempo, esticada na tela inteira, só durante a edição. **Desligue ou apague antes de exportar.** - **CapCut (celular):** Sobreposição › Adicionar sobreposição › escolha o PNG › estique até cobrir a tela › arraste para durar o vídeo inteiro. Antes de exportar, apague a sobreposição. - **CapCut (computador):** arraste o PNG para uma trilha acima de tudo e estique na tela. Antes de exportar, desative a trilha (ícone de olho) ou apague o clipe. - **Canva:** Envios › suba o PNG › arraste para o design 1080 × 1920 e ajuste à página inteira › trave o elemento (cadeado). Antes de baixar, apague o guia (ou duplique a página e deixe o guia só na cópia). - **Premiere Pro:** importe o PNG e coloque na trilha de vídeo mais alta. Antes de exportar, desative o clipe (botão direito › Ativar) ou o olho da trilha. - **After Effects:** importe, ponha no topo da composição e marque como **camada-guia** (Camada › Camada-guia). Camada-guia aparece na edição e nunca sai no render. - **DaVinci Resolve:** coloque numa trilha acima de tudo e desative a trilha antes do render. --- ## Capas **A regra:** título de 2 a 4 palavras em forma de pergunta honesta, Fraunces Black, com **uma** palavra em marca-texto limão; Crescêncio recortado com a borda de adesivo; carimbo “Recorte nº” no alto. O título mora dentro da área segura dos três apps (x 60–920, y 270–1420) e dentro do corte 3:4 da grade. Nada de seta vermelha, cara de susto fingida ou título inteiro em caixa alta. As três composições: 1. **Tira rasgada e pilha de post-its** (`capa-shorts-01`): papel quadriculado em cima, a cor do caderno embaixo, o Crescêncio afundando na pilha de tarefas. Boa para temas do cotidiano. 2. **Página cheia de cor** (`capa-shorts-02`): fundo Ameixa com retícula e o Crescêncio pensativo subindo por trás de uma faixa de papel. Boa para perguntas grandes e séries. 3. **Polaroid** (`capa-shorts-03`): você na foto, o Crescêncio de co-apresentador encostado nela, título direto no papel pautado. Boa quando o seu rosto é o gancho. > Na capa 03, a legenda escrita na base da polaroid cai na faixa de baixo do feed: aparece na grade do perfil, mas some atrás da interface quando o vídeo toca. Use para um enfeite, nunca para uma informação. ### Jeito mais rápido: gerar a capa pronta O gerador monta a capa com o título medido na fonte de verdade, a palavra em marca-texto no lugar certo e o número do recorte no carimbo: ```bash node scripts/video/templates/capas.mjs --modelo 1 --titulo "Por que eu|travo?" --destaque travo --numero 002 --nota "spoiler: não é preguiça." node scripts/video/templates/capas.mjs --modelo 2 --titulo "Por que a gente procrastina?" --destaque procrastina --numero 043 node scripts/video/templates/capas.mjs --modelo 3 --titulo "Uma pergunta honesta?" --destaque honesta --numero 044 --legenda "eu, tentando entender" ``` - `|` força a quebra de linha (“Por que eu|travo?”). Sem ele, o gerador escolhe o maior corpo que cabe em 2 linhas. - `--saida caminho/capa.png` escolhe onde salvar (por padrão, `.shots/video/capas/`). O `.svg` sai junto. - `--sensivel` é para tema de cuidado (o “amarelo” da Bíblia): tira os post-its, os brilhos e as bolhas, e o Crescêncio fica pequeno, só ouvindo. - Em tema **vermelho** (crise, suicídio, autolesão, luto por morte, violência), a capa vai **sem o Crescêncio**: use a base sem título com o seu rosto (modelo 3) ou peça a capa só com o título. ### Montar à mão (Canva ou CapCut) 1. Use a `capa-shorts-0X-sem-titulo.png` como fundo. 2. Ponha `elementos/tira-folha-longa.png` (ou a curta) onde vai cada linha do título. Pode esticar na horizontal; não estique na vertical. 3. Escreva o título em **Fraunces Black**, Nanquim #2A2130, entre 150 e 200 px de corpo, uma linha por tira. 4. Ponha `elementos/marca-texto-limao.png` **atrás** de uma palavra só. 5. O carimbo “RECORTE Nº 0XX” é Bricolage Grotesque Condensed ExtraBold, Tinta de Carimbo #9E3B26, levemente girado (−6°). Se for difícil reproduzir, gere a capa pelo script. 6. Na capa 03, a sua foto vai **numa camada abaixo** da base (a janela é vazada). Se puder, trate a foto em duotone: sombras Berinjela #3F1B4B, luzes Papel #F5EEE1. ### Editar o SVG (Figma, Illustrator, Inkscape) Os `.svg` têm o texto vivo. Com as fontes instaladas, dê dois cliques no título e troque. A mancha de marca-texto não se move sozinha: ajuste-a à mão para ficar atrás da palavra nova. ### Onde a capa entra em cada app Os nomes dos botões mudam com as versões. O caminho é este: - **Instagram Reels:** na tela de publicação, toque em editar a capa e escolha **adicionar da galeria** (a imagem da capa). Confira o corte 3:4 da grade na mesma tela. - **TikTok:** na tela de publicação, toque em editar a capa. Se a sua versão deixar escolher uma imagem da galeria, use a capa. Se não deixar, ponha a capa como **primeiro quadro** do vídeo (meio segundo basta) e escolha esse quadro. - **YouTube Shorts:** o caminho mais seguro é a capa como **primeiro quadro** (ou o quadro do gancho, que na Bíblia já é a capa) e escolher esse quadro como miniatura na hora de publicar. --- ## Legenda A prancha `estilo-legenda.png` mostra tudo. Existem **duas versões aprovadas**: - **A · contorno** (a dos templates): Bricolage Grotesque Condensed ExtraBold, 80 a 88 px num quadro 1080, texto Folha #FBF7EF com contorno Nanquim #2A2130 por fora (por volta de 8 px visíveis), entrelinha 1,05. - **B · caixa de fita crepe** (a do brandbook e da Bíblia, seção 11): Bricolage Grotesque SemiBold, 60 a 68 px, entrelinha 1,15, texto Nanquim sobre caixa Fita Crepe #E8D9B5, folga de 18 px nas laterais e 10 px em cima e embaixo. É a melhor em fundo agitado. Nas duas: **uma** palavra-chave em Nanquim sobre marca-texto Mousse de Limão #F2D35B (no máximo um destaque a cada 10 s); centralizada entre y 1110 e 1400, com até 760 px de largura; até 2 linhas de 26 a 30 caracteres; 2 a 6 palavras por tela; caixa normal; sem ponto final no fim da tela; sem emoji; entra com fade de 3 quadros. Caveat nunca é legenda: é a letra do Crescêncio e das notas de margem. ### Receita em cada editor (versão A) - **CapCut:** Texto › escreva › Fonte: Bricolage Grotesque Condensed ExtraBold (importada) › Estilo: cor #FBF7EF; **Contorno** ligado, cor #2A2130, espessura até ficar como na prancha (por volta de um décimo da altura das letras). Posicione na zona da legenda com o guia universal ligado. Para a palavra-chave, selecione só a palavra e troque a cor para #2A2130 com fundo ou realce #F2D35B. Se a sua versão não deixar estilizar só um trecho, ponha `elementos/marca-texto-limao.png` como sobreposição atrás da palavra. Nas legendas automáticas, aplique o estilo a todas de uma vez e **revise nome por nome**. - **Canva:** Texto › fonte Bricolage Grotesque Condensed (ou envie a sua) › cor #FBF7EF › Efeitos › **Contorno** em #2A2130. Se o contorno da sua versão deixar a letra vazada, duplique o texto: a cópia de trás com contorno grosso Nanquim, a da frente em Folha, exatamente por cima. A palavra-chave vai numa caixa de texto separada, em Nanquim, com o `marca-texto-limao.png` atrás. - **Premiere Pro:** na sequência 1080 × 1920, use Gráficos essenciais (ou a trilha de legendas). Preenchimento #FBF7EF, **Traçado** #2A2130 externo de 8 px, junção arredondada. Na trilha de legendas, salve como estilo (por exemplo, “RM Legenda”) e aplique a todas. Palavra-chave: selecione a palavra e mude o preenchimento para #2A2130, sem traçado, com o PNG do marca-texto numa trilha abaixo. - **After Effects:** camada de texto em Bricolage Grotesque Condensed ExtraBold; no painel Caractere, preenchimento #FBF7EF, traçado #2A2130 de 16 px com **preenchimento sobre o traçado** e junção arredondada. Palavra-chave em #2A2130 sem traçado, com uma camada de forma #F2D35B atrás (−1,5°). Entrada: opacidade 0 → 100% em 3 quadros. - **DaVinci Resolve:** Text+ › fonte Bricolage Grotesque Condensed ExtraBold › Shading: elemento 1 (preenchimento) #FBF7EF, elemento 2 em **Outline** #2A2130, espessura ajustada até bater com a prancha. Salve como predefinição. - **No app do TikTok ou do Instagram, direto no celular:** esses apps raramente aceitam fonte própria. Use o CapCut com a fonte importada. Se precisar escrever no próprio app, escolha o estilo mais simples (texto claro com contorno ou fundo), em caixa normal. Nunca os estilos neon, tremidos ou coloridos palavra por palavra. --- ## Figurinhas Dez PNGs transparentes de 1024 × 1024 com o Crescêncio e o balão já desenhado, cortados juntos como figurinha de papel (borda Papel e sombra Nanquim a 18%). Todas foram testadas reduzidas a 200 px sobre fundo claro, escuro e colorido. | Arquivo | Balão | Humor e acessório | Quando usar | |---|---|---|---| | `crescencio-hmm.png` | hmm… | pensativo, balão de pensamento | conceito ganha nome, pergunta no ar | | `crescencio-faz-sentido.png` | faz sentido! | feliz, óculos redondos | “isso tem nome”, a ficha caiu | | `crescencio-oxe.png` | oxe? | curioso, cabeça inclinada, interrogações | cena absurda do dia a dia | | `crescencio-anota-ai.png` | anota aí | curioso, caderninho e lápis | dica prática, definição | | `crescencio-pausa-pro-cafe.png` | pausa pro café | sonolento, xícara de pingado | pausa, fim de bloco | | `crescencio-spoiler.png` | spoiler! | espantado, balde de pipoca | antes de contar a trama (com o carimbo de spoiler) | | `crescencio-isso-e-real.png` | isso é real? | curioso, lupa | abertura do *Mito ou fato* | | `crescencio-pensa-comigo.png` | pensa comigo? | curioso, coração colado com fita | pergunta final, convite pros comentários | | `crescencio-respira.png` | respira… | abajur (sem halo), olhos fechados, soltando o ar | pausa, calma, tema de cuidado | | `crescencio-eita.png` | eita | espantado (susto contido), tênis | dado surpreendente, virada | **Como usar** - O Crescêncio **comenta, não narra**: uma figurinha por vez, de 1,5 a 3 s na tela e pelo menos 6 s entre uma aparição e outra. - Tamanho: por volta de 42% da largura do quadro (cerca de 430 px), no **lado esquerdo**, com o canto encostado em x 60. O balão sempre aponta para dentro, longe dos botões do app. - Nunca em cima do seu rosto nem da zona da legenda (x 160–920, y 1110–1400). - Entrada: o “colar” (escala 90% → 104% → 100% em 3 ou 4 quadros, girando de −2° a 0°). Saída: fade de 3 ou 4 quadros. - **Nunca** espelhe (o olho esquerdo maior é de propósito), recolora, distorça nem tire a borda de adesivo. - **Temas de cuidado:** só as calmas (`hmm`, `faz-sentido`, `anota-ai`, `respira`, `pensa-comigo`, `isso-e-real`). **Temas sensíveis de verdade:** nenhuma figurinha. A tabela de semáforo completa está na Bíblia, seção 4. **Em cada editor** - **CapCut:** Sobreposição › Adicionar › o PNG (a transparência vem junto). - **Canva:** Envios › arraste o PNG para o design. Em vídeo, defina a duração do elemento na linha do tempo. - **Premiere, After Effects, DaVinci:** importe o PNG como imagem; a transparência é reconhecida sozinha. Se aparecer uma borda escura, interprete o alfa como “direto” (straight). - **Stories e WhatsApp:** as versões de 512 px em `public/brand/video/templates/figurinhas/` servem de figurinha de foto no Stories e podem virar figurinha de WhatsApp num app de figurinhas. Para um balão com texto novo, siga a Bíblia, seção 6 (como escrever e montar um balão novo). --- ## Como regenerar tudo Os arquivos saem de scripts, a partir do mascote de verdade (`src/components/brand/Crescencio.tsx`) e das fontes da marca: ```bash node scripts/video/templates/build.mjs # tudo (figurinhas, capas, guias, legenda) node scripts/video/templates/build.mjs figurinhas # só uma parte: figurinhas | capas | guias | legenda ``` | Script | Gera | |---|---| | `scripts/video/templates/lib.mjs` | medidas da área segura (`SAFE`, `UNIVERSAL`, `LEGENDA`), Crescêncio, borda de adesivo, balões | | `scripts/video/templates/figurinhas.mjs` | `figurinhas/*.png`, `figurinhas-prancha.png` | | `scripts/video/templates/capas.mjs` | `capa-shorts-0X`, bases sem título, `elementos/` e a capa sob medida pela linha de comando | | `scripts/video/templates/guias.mjs` | `guia-area-segura-*.png` | | `scripts/video/templates/legenda.mjs` | `estilo-legenda.svg` / `.png` | Se as interfaces mudarem, ajuste os números em `SAFE` (no `lib.mjs`) e rode de novo: os guias, a prancha de legenda e as capas acompanham. Pranchas de revisão (cada guia sobre a capa, figurinhas a 200 px) saem em `.shots/video/templates/`.