primocode 10.17.1 → 10.19.0

package/kits/isometrico/regras/tipografia.md

@@ -0,0 +1,12 @@
+# Tipografia
+- Fontes: **Archivo** 600–800 (títulos, nome, texto de placa) e **Jost** 500 (rótulos pequenos, endereço). Registradas como `IS Archivo` e `IS Jost`.
+- Archivo sempre com tracking −0,02 a −0,04 em; Jost em caixa alta +0,12 em.
+
+| papel | tamanho px | peso | máx. caracteres |
+|---|---|---|---|
+| texto no chão (extrudado) | 230 (encolhe até 640) | 800 | 7 por linha, 2 linhas |
+| texto da plaquinha | 84 (encolhe até 760) | 800 | 16 |
+| rótulo da plaquinha | 26 (Jost, caixa alta) | 500 | 14 |
+| nome da marca | 250 | 800 | 6 |
+| frase da marca | 52 | 600 | 24 |
+| endereço | 40 (Jost) | 500 | 16 |

package/kits/jornal/SKILL.md

@@ -0,0 +1,54 @@
+---
+slug: jornal
+nome: Jornal
+descricao: papel de jornal com grão e dobra, manchete Playfair preta, cabeçalho gótico, foto em meio-tom, carimbo vermelho e colunas
+familia: Tipografia em movimento
+versao: 1
+quando:
+  - "anúncio como se fosse notícia: "extra, extra", lançamento na primeira página"
+  - "vídeo de evento, inauguração ou comunicado com tom de imprensa antiga"
+  - "resumo de novidades em manchetes, citações e colunas"
+  - "quero cara de jornal impresso, manchete e papel amassado"
+nao_serve:
+  - "vídeo moderno, digital ou futurista"
+  - "fundo escuro ou neon"
+  - "vídeo sem texto (o estilo vive de manchete e coluna)"
+---
+
+# Jornal
+
+Primeira página de jornal em movimento. Papel creme de jornal (`#E8DFC8`) com **grão animado, vinheta quente e uma dobra horizontal no meio**; cabeçalho gótico (UnifrakturMaguntia) entre filetes duplos; **manchete em Playfair Display 900 em caixa alta** que bate como prensa (scale 1,5 → 1); foto em **meio-tom** (P&B de alto contraste com retícula de pontos); **carimbo vermelho** girado que cai com sobra; colunas justificadas que se escrevem sozinhas; faixa preta de últimas notícias correndo. O jornal que gira e cresce até virar a página é o corte de abertura. A câmera respira devagar e dá um soco em cada batida.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases de 2 a 6 palavras (manchete) ou 1 frase curta (coluna). Uma frase = um plano (cabe em 40 a 60 quadros).
+2. **Escolha as batidas** em `receita.json` (gancho → virada → prova → lista → oferta → marca). Cada batida diz quanto dura e quais elementos servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): para cada cena, `de`/`ate` em quadros, a `entrada`, as `camadas` (elemento + props) e os `sons`. Os cortes seguem a voz (se houver) ou a batida da trilha: 1 batida = 18.8 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou escreva o TSX direto combinando `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** os quadros (um por cena) contra `regras/`: área segura, nada cortado, uma palavra vermelha por manchete, foto sempre em meio-tom, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| Cabecalho | cabeçalho gótico entre filetes duplos com data, edição e preço | gancho, virada |
+| Manchete | kicker + linhas Playfair 900 que batem + subtítulo itálico; palavra vermelha sublinhada | gancho, problema, oferta |
+| FotoMeiaTinta | foto em meio-tom com borda e legenda, colada com giro | prova |
+| Colunas | até 3 colunas justificadas que se escrevem sozinhas | prova, lista, depoimento |
+| Carimbo | carimbo vermelho girado que cai com sobra | gancho, oferta, data |
+| JornalGirando | a folha que gira e cresce até virar a tela, com manchete e foto | gancho (abertura) |
+| Ticker | faixa preta de últimas notícias que corre com tag vermelha | lista, oferta, cta |
+| AssinaturaMarca | nome gótico gigante entre filetes + edição + endereço | marca (sempre a última) |
+| Fundo, Sobre | papel com dobra e vinheta; grão animado por cima | todas |
+| Camera | deriva + soco | todas |
+| Cena | janela de cada plano | todas |
+| Efeito, Trilha | sons e trilha do kit | todas |
+
+## Proibido
+
+- Fundo escuro, cor neon, degradê, vidro, sombra moderna.
+- Foto colorida ou sem retícula de meio-tom.
+- Mais de uma palavra vermelha por manchete; manchete em minúsculas.
+- Fonte sem serifa (só Playfair e a gótica do cabeçalho).
+- Texto parado: manchete bate, coluna escreve, faixa corre, câmera respira.
+- Texto fora da área segura (168–1330 px na vertical, 80 px nas laterais).

package/kits/jornal/assets/ASSETS.md

@@ -0,0 +1,24 @@
+# Assets do kit jornal
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/playfair.woff2` | Playfair Display (500 900), subset latino | Google Fonts (`https://github.com/clauseggers/Playfair`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-PlayfairDisplay.txt` |
+| `fontes/playfair-italic.woff2` | Playfair Display (500 900), subset latino | Google Fonts (`https://github.com/clauseggers/Playfair`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-PlayfairDisplay.txt` |
+| `fontes/unifraktur.woff2` | UnifrakturMaguntia (400), subset latino | Google Fonts (`https://github.com/unicode-org/unifraktur`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-UnifrakturMaguntia.txt` |
+| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | pop curto | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | pop de objeto que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | riser de 1,3 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `paper` | sem samples; síntese própria (CC0) |
+| `trilha/redacao-96bpm.mp3` | 9 s de trilha, 96 bpm | MotionCraft `music make` (preset lofi-desk, 96 bpm, tom C, lead pluck, bateria lofi), síntese procedural | sem samples; síntese própria (CC0). MotionCraft é MIT |
+
+Conteúdo de demonstração (não faz parte do estilo, fica em `exemplos/`):
+
+| arquivo | origem | licença |
+|---|---|---|
+| `exemplos/fotos/foto-*.jpg` (2) | Unsplash via picsum (ids 1–5, 20, 26, 60), recorte 720×960, as mesmas do kit apple-tipografico | Unsplash License |
+| `exemplos/logo-esquina.svg` | logo fictício desenhado para a demo | próprio |

package/kits/jornal/assets/fontes/OFL-PlayfairDisplay.txt

@@ -0,0 +1,93 @@
+Copyright The Playfair Display Project Authors (https://github.com/clauseggers/Playfair)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/kits/jornal/assets/fontes/OFL-UnifrakturMaguntia.txt

@@ -0,0 +1,93 @@
+Copyright The UnifrakturMaguntia Project Authors (https://github.com/unicode-org/unifraktur)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/kits/jornal/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,25 @@
+// AssinaturaMarca: a última cena. Filete duplo, nome gótico gigante (até 300 px) que cai com sobra, filete fino, linha de
+// edição em itálico e o endereço em Playfair 900; o ícone entra girando num quadrado de tinta. Nada de brilho.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, e5, eb, seg} from './base';
+
+export type AssinaturaMarcaProps = {nome: string; icone: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({nome, icone, detalhe, endereco, inicio = 0, y = 660}) => {
+  const f = useCurrentFrame();
+  const tam = caber(nome, 330, 888, 400, 0, FONTE.apoio.split('"')[1]);
+  const p = eb((f - inicio) / 16, 1.7), pi = eb(seg(f, inicio + 8, inicio + 22), 1.8);
+  const duplo = (w: number) => <div style={{borderTop: `6px solid ${COR.tinta}`, borderBottom: `2px solid ${COR.tinta}`, height: 12, width: w}} />;
+  return <div style={{position: 'absolute', inset: 0}}>
+    <Img src={icone} style={{position: 'absolute', left: 540 - 90, top: y - 330, width: 180, height: 180, border: `6px solid ${COR.tinta}`, boxSizing: 'border-box', transform: `scale(${Math.max(0.001, pi)}) rotate(${(1 - pi) * 180}deg)`}} />
+    <div style={{position: 'absolute', left: 96, top: y - 100, width: 888}}>
+      {duplo(888 * e5(seg(f, inicio, inicio + 14)))}
+      <div style={{fontFamily: FONTE.apoio, fontSize: tam, lineHeight: `${tam * 1.15}px`, textAlign: 'center', color: COR.tinta, whiteSpace: 'nowrap', transform: `translateY(${(1 - p) * -500}px) rotate(${(1 - p) * 4}deg)`, opacity: f < inicio ? 0 : 1}}>{nome}</div>
+      <div style={{borderTop: `2px solid ${COR.tinta}`, width: 888 * e5(seg(f, inicio + 10, inicio + 24))}} />
+      {detalhe && <div style={{marginTop: 18, textAlign: 'center', fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 40, color: COR.tinta, opacity: seg(f, inicio + 22, inicio + 24)}}>{detalhe}</div>}
+      {endereco && <div style={{marginTop: 26, textAlign: 'center', fontFamily: FONTE.titulo, fontWeight: 900, fontSize: 64, letterSpacing: '0.02em', color: COR.vermelho, textTransform: 'uppercase', opacity: seg(f, inicio + 30, inicio + 32), transform: `scale(${1.4 - 0.4 * eb(seg(f, inicio + 30, inicio + 40), 1.8)})`}}>{endereco}</div>}
+      <div style={{marginTop: 26}}>{duplo(888 * e5(seg(f, inicio + 20, inicio + 36)))}</div>
+    </div>
+  </div>;
+};

package/kits/jornal/elementos/Cabecalho.tsx

@@ -0,0 +1,21 @@
+// Cabecalho: o cabeçalho do jornal. Filete duplo, nome gótico (UnifrakturMaguntia, até 170 px), filete fino e uma linha
+// com edição · data · preço. Cai de cima (translateY −420 → 0 com sobra) e o giro de 3° assenta.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb} from './base';
+
+export type CabecalhoProps = {nome: string; edicao?: string; data?: string; preco?: string; inicio?: number; y?: number};
+
+export const Cabecalho: React.FC<CabecalhoProps> = ({nome, edicao = '', data = '', preco = '', inicio = 0, y = 190}) => {
+  const f = useCurrentFrame();
+  const p = eb((f - inicio) / 16, 1.6);
+  const tam = caber(nome, 170, 888, 400, 0, FONTE.apoio.split('"')[1]);
+  const duplo = <div style={{borderTop: `6px solid ${COR.tinta}`, borderBottom: `2px solid ${COR.tinta}`, height: 12}} />;
+  const it: React.CSSProperties = {fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 30, color: COR.tinta};
+  return <div style={{position: 'absolute', left: 96, top: y, width: 888, transform: `translateY(${(1 - p) * -420}px) rotate(${(1 - p) * 3}deg)`, opacity: f < inicio ? 0 : 1}}>
+    {duplo}
+    <div style={{fontFamily: FONTE.apoio, fontSize: tam, lineHeight: `${tam * 1.1}px`, textAlign: 'center', color: COR.tinta, whiteSpace: 'nowrap'}}>{nome}</div>
+    <div style={{borderTop: `2px solid ${COR.tinta}`, display: 'flex', justifyContent: 'space-between', padding: '8px 0', ...it}}><span>{edicao}</span><span>{data}</span><span>{preco}</span></div>
+    {duplo}
+  </div>;
+};

package/kits/jornal/elementos/Camera.tsx

@@ -0,0 +1,22 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro) e um soco em cada batida.
+// O quadro nunca fica parado. `batidas` são quadros absolutos do vídeo.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (fr: number, batidas: number[], forca = 1) => {
+  const f = fr;
+  let z = 1.014 + 0.012 * Math.sin(f / 130), dx = Math.sin(f / 37) * 12, dy = Math.cos(f / 51) * 10;
+  const rot = Math.sin(f / 83) * 0.005;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 8) * forca;
+    z += 0.03 * d; dx += 8 * d * Math.sin((f - h) * 2.7 + h); dy += 8 * d * Math.cos((f - h) * 3.3 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(useCurrentFrame(), batidas, forca);
+  return <AbsoluteFill style={{transform: `translate(${c.dx}px, ${c.dy}px) rotate(${c.rot}rad) scale(${c.z})`, transformOrigin: '50% 44%'}}>{children}</AbsoluteFill>;
+};

package/kits/jornal/elementos/Carimbo.tsx

@@ -0,0 +1,18 @@
+// Carimbo: carimbo vermelho (borda dupla de 10 px, Playfair 900 caixa alta com 0,08 em) girado −12° que cai de 3,2x para
+// 1x com sobra em 9 quadros, como batido na página. Linhas separadas por `|`.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb} from './base';
+
+export type CarimboProps = {texto: string; x?: number; y?: number; largura?: number; inicio?: number; rot?: number; tamanho?: number};
+
+export const Carimbo: React.FC<CarimboProps> = ({texto, x = 540, y = 760, largura = 760, inicio = 0, rot = -12, tamanho = 160}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  const p = eb(t / 9, 2);
+  const linhas = texto.toUpperCase().split('|');
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, largura - 120, 900, 0.08)));
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - (linhas.length * tam * 1.05 + 90) / 2, width: largura, padding: '24px 0', boxSizing: 'border-box', textAlign: 'center', color: COR.vermelho, border: `10px solid ${COR.vermelho}`, outline: `4px solid ${COR.vermelho}`, outlineOffset: 8, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, lineHeight: 1.05, letterSpacing: '0.08em', opacity: t < 0 ? 0 : 0.94, transform: `scale(${3.2 - 2.2 * p}) rotate(${rot}deg)`, mixBlendMode: 'multiply'}}>
+    {linhas.map((l, i) => <div key={i}>{l}</div>)}
+  </div>;
+};

package/kits/jornal/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 8 quadros com a próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, eb, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'girar' | 'cortar' | 'nenhuma';
+export const SOBREPOE = 8; // quadros em que a saída desta cena cruza a entrada da próxima
+
+const CenaCtx = createContext({duracao: 60});
+/** duração da cena atual em quadros (sem a sobreposição) */
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+export type CenaProps = {de: number; ate: number; entrada?: Entrada; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  const q = 12; // quadros da entrada
+  const en = entrada === 'nenhuma' ? 0 : 1 - (entrada === 'cortar' ? eb(seg(f, 0, q)) : e5(seg(f, 0, q)));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 200}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 580}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 580}px) `;
+  if (entrada === 'girar') tf += `rotate(${en * -14}deg) scale(${1 + en * 0.5}) `;
+  if (entrada === 'cortar') tf += `scale(${1 + en * 0.14}) `;
+  tf += `translateY(${-xo * 140}px)`;
+  const blur = (entrada === 'cortar' ? 0 : en * 5) + xo * 5;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0.6) * (1 - xo);
+  return <AbsoluteFill style={{transform: tf, opacity: op, filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
+  const duracao = ate - de;
+  return <Sequence from={de} durationInFrames={duracao + (ultima ? 0 : SOBREPOE)} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/jornal/elementos/Colunas.tsx

@@ -0,0 +1,24 @@
+// Colunas: até 3 colunas de texto justificado (Playfair 500, 34 px, entrelinha 1,28) separadas por fios, que se escrevem
+// sozinhas a 1,6 caractere por quadro: primeiro a coluna 1, depois a 2, depois a 3. Uma letra capitular na primeira.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, eb, seg} from './base';
+
+export type ColunasProps = {colunas: string[]; inicio?: number; y?: number; altura?: number; velocidade?: number};
+
+export const Colunas: React.FC<ColunasProps> = ({colunas, inicio = 0, y = 1000, altura = 340, velocidade = 1.6}) => {
+  const f = useCurrentFrame();
+  const n = colunas.length;
+  const gap = 36, w = (888 - gap * (n - 1)) / n;
+  let escritos = Math.max(0, (f - inicio) * velocidade);
+  const entra = eb(seg(f, inicio, inicio + 10), 1.4);
+  return <div style={{position: 'absolute', left: 96, top: y, width: 888, height: altura, opacity: f < inicio ? 0 : 1, transform: `translateY(${(1 - entra) * 80}px)`}}>
+    <div style={{height: 6, background: COR.tinta, width: 888 * entra, marginBottom: 14}} />
+    {colunas.map((c, i) => {
+      const k = Math.max(0, Math.min(c.length, Math.floor(escritos))); escritos -= c.length;
+      return <div key={i} style={{position: 'absolute', left: i * (w + gap), top: 24, width: w, height: altura - 24, borderLeft: i > 0 ? `2px solid ${COR.cinza}` : undefined, paddingLeft: i > 0 ? gap / 2 - 1 : 0, marginLeft: i > 0 ? -gap / 2 : 0, boxSizing: 'border-box', fontFamily: FONTE.titulo, fontWeight: 500, fontSize: 34, lineHeight: '43px', textAlign: 'justify', color: COR.tinta, hyphens: 'auto', overflow: 'hidden'}}>
+        {c.slice(0, k)}
+      </div>;
+    })}
+  </div>;
+};

package/kits/jornal/elementos/FotoMeiaTinta.tsx

@@ -0,0 +1,20 @@
+// FotoMeiaTinta: foto em meio-tom (P&B de alto contraste, sépia leve e retícula de pontos de 9 px em multiply), com
+// borda de tinta e legenda em itálico. Cola na página com giro (−8° → −2°) e scale 0,6 → 1 com sobra; depois faz push-in.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, eb} from './base';
+
+export type FotoMeiaTintaProps = {src: string; x?: number; y?: number; largura?: number; altura?: number; inicio?: number; legenda?: string; foco?: string; rot?: number};
+
+export const FotoMeiaTinta: React.FC<FotoMeiaTintaProps> = ({src, x = 540, y = 620, largura = 880, altura = 640, inicio = 0, legenda, foco = '50% 50%', rot = -2}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  const p = eb(t / 14, 1.6);
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - altura / 2, width: largura, opacity: t < 0 ? 0 : 1, transform: `scale(${0.6 + 0.4 * p}) rotate(${rot + (1 - p) * -6}deg)`}}>
+    <div style={{position: 'relative', width: largura, height: altura, border: `6px solid ${COR.tinta}`, boxSizing: 'border-box', overflow: 'hidden', background: COR.tinta}}>
+      <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'grayscale(1) contrast(1.35) sepia(0.3)', transform: `scale(${1.06 + Math.max(0, t) * 0.0025})`}} />
+      <div style={{position: 'absolute', inset: 0, mixBlendMode: 'multiply', backgroundImage: 'radial-gradient(circle, rgba(27,26,23,0.55) 2.6px, rgba(27,26,23,0) 3.4px)', backgroundSize: '9px 9px'}} />
+    </div>
+    {legenda && <div style={{marginTop: 10, borderTop: `2px solid ${COR.tinta}`, paddingTop: 6, fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 30, lineHeight: '36px', color: COR.cinza}}>{legenda}</div>}
+  </div>;
+};

package/kits/jornal/elementos/Fundo.tsx

@@ -0,0 +1,18 @@
+// Fundo: papel de jornal com vinheta quente e uma dobra horizontal no meio. `Sobre` põe o grão animado por cima de tudo
+// (ruído fractal em multiply, semente nova a cada 2 quadros), pra foto e texto parecerem impressos.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC = () => <AbsoluteFill style={{background: COR.papel}}>
+  <AbsoluteFill style={{background: 'radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(90,60,20,0.28) 100%)'}} />
+  <div style={{position: 'absolute', left: 0, right: 0, top: 940, height: 40, background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(80,55,20,0.16) 50%, rgba(255,255,255,0.18) 52%, rgba(0,0,0,0) 100%)'}} />
+</AbsoluteFill>;
+
+export const Sobre: React.FC = () => {
+  const f = useCurrentFrame();
+  const seed = Math.floor(f / 2) % 24;
+  return <AbsoluteFill style={{mixBlendMode: 'multiply', opacity: 0.4, pointerEvents: 'none'}}>
+    <svg width="1080" height="1920" xmlns="http://www.w3.org/2000/svg"><filter id="grao"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed={seed} /><feColorMatrix type="saturate" values="0" /></filter><rect width="1080" height="1920" filter="url(#grao)" opacity="0.55" /></svg>
+  </AbsoluteFill>;
+};

package/kits/jornal/elementos/JornalGirando.tsx

@@ -0,0 +1,27 @@
+// JornalGirando: o clichê da abertura. A folha (papel claro, cabeçalho gótico, manchete, foto em meio-tom e barras de
+// texto) gira 720° → 0 enquanto cresce de 5% a 100% (rotação em `e5`, escala com sobra) e depois faz push-in lento.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, e5, eb, textoLimpo} from './base';
+
+export type JornalGirandoProps = {nome?: string; manchete: string; foto?: string; inicio?: number; y?: number; largura?: number; altura?: number; duracao?: number};
+
+export const JornalGirando: React.FC<JornalGirandoProps> = ({nome = 'O Diário', manchete, foto, inicio = 0, y = 760, largura = 820, altura = 1100, duracao = 24}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  const rot = (1 - e5(t / duracao)) * -720;
+  const esc = 0.05 + 0.95 * eb(t / duracao, 1.1) + Math.max(0, t - duracao) * 0.0025;
+  const tam = caber(textoLimpo(manchete).toUpperCase(), 130, largura - 90, 900, -0.01);
+  const barra = (w: string, k: number) => <div key={k} style={{height: 12, width: w, background: COR.cinza, marginBottom: 14, opacity: 0.8}} />;
+  return <div style={{position: 'absolute', left: 540 - largura / 2, top: y - altura / 2, width: largura, height: altura, background: COR.papelClaro, border: `6px solid ${COR.tinta}`, boxSizing: 'border-box', padding: 40, transform: `rotate(${rot}deg) scale(${Math.max(0.01, esc)})`, opacity: t < 0 ? 0 : 1, boxShadow: '0 30px 60px rgba(60,40,10,0.35)', overflow: 'hidden'}}>
+    <div style={{borderTop: `6px solid ${COR.tinta}`, borderBottom: `2px solid ${COR.tinta}`, height: 12}} />
+    <div style={{fontFamily: FONTE.apoio, fontSize: 110, lineHeight: '120px', textAlign: 'center', color: COR.tinta, whiteSpace: 'nowrap'}}>{nome}</div>
+    <div style={{borderTop: `2px solid ${COR.tinta}`, marginBottom: 26}} />
+    <div style={{fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, lineHeight: 1.0, letterSpacing: '-0.01em', color: COR.tinta, whiteSpace: 'nowrap', textTransform: 'uppercase'}}>{manchete.split('|').map((l, i) => <div key={i}>{l.replace(/\*/g, '')}</div>)}</div>
+    <div style={{position: 'relative', height: 360, margin: '28px 0', border: `4px solid ${COR.tinta}`, overflow: 'hidden', background: COR.cinza}}>
+      {foto && <Img src={foto} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.35) sepia(0.3)'}} />}
+      <div style={{position: 'absolute', inset: 0, mixBlendMode: 'multiply', backgroundImage: 'radial-gradient(circle, rgba(27,26,23,0.55) 2.6px, rgba(27,26,23,0) 3.4px)', backgroundSize: '9px 9px'}} />
+    </div>
+    <div style={{display: 'flex', gap: 28}}>{[0, 1, 2].map((c) => <div key={c} style={{flex: 1}}>{['100%', '94%', '100%', '88%', '100%', '72%'].map((w, k) => barra(w, k))}</div>)}</div>
+  </div>;
+};

package/kits/jornal/elementos/Manchete.tsx

@@ -0,0 +1,30 @@
+// Manchete: kicker vermelho (EXTRA), linhas Playfair 900 em caixa alta que batem como prensa (scale 1,5 → 1, sobe 90 px
+// com sobra), 9 quadros uma da outra, e um subtítulo em itálico. `*palavra*` vai em vermelho com sublinhado de 10 px.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, caber, eb, pedacos, seg, textoLimpo} from './base';
+
+export type MancheteProps = {linhas: string[]; kicker?: string; subtitulo?: string; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fim?: number};
+
+export const Manchete: React.FC<MancheteProps> = ({linhas, kicker, subtitulo, inicio = 0, intervalo = 9, y = 800, tamanho = 150, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const tams = linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, 888, 900, -0.01));
+  const alts = tams.map((t) => t * 1.02);
+  const total = alts.reduce((a, b) => a + b, 0) + (kicker ? 90 : 0) + (subtitulo ? 90 : 0);
+  let topo = y - total / 2;
+  const kt = topo; if (kicker) topo += 90;
+  const kp = eb((f - inicio) / 10, 1.8);
+  return <div style={{position: 'absolute', inset: 0}}>
+    {kicker && <div style={{position: 'absolute', left: 96, top: kt, height: 64, padding: '0 22px', background: COR.vermelho, color: COR.papelClaro, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: 44, lineHeight: '64px', letterSpacing: '0.2em', textTransform: 'uppercase', transform: `translateX(${(1 - kp) * -700}px)`}}>{kicker}</div>}
+    {linhas.map((l, i) => {
+      const top = topo; topo += alts[i];
+      const t = f - (inicio + 4 + i * intervalo);
+      const p = eb(t / 12, 1.8);
+      return <div key={i} style={{position: 'absolute', left: 96, top, height: alts[i], lineHeight: `${alts[i]}px`, fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tams[i], letterSpacing: '-0.01em', whiteSpace: 'nowrap', color: COR.tinta, opacity: t < 0 ? 0 : 1, transformOrigin: '0 60%', transform: `translateY(${(1 - p) * -90}px) scale(${1.5 - 0.5 * p})`}}>
+        {pedacos(l.toUpperCase()).map((s, j) => <span key={j} style={s.d ? {color: COR.vermelho, borderBottom: `10px solid ${COR.vermelho}`, lineHeight: `${alts[i] * 0.86}px`, display: 'inline-block'} : undefined}>{s.t}</span>)}
+      </div>;
+    })}
+    {subtitulo && <div style={{position: 'absolute', left: 96, top: topo + 14, width: 888, fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 46, lineHeight: '56px', color: COR.tinta, opacity: seg(f, inicio + 10 + linhas.length * intervalo, inicio + 12 + linhas.length * intervalo), transform: `translateY(${(1 - eb(seg(f, inicio + 10 + linhas.length * intervalo, inicio + 24 + linhas.length * intervalo))) * 60}px)`}}>{subtitulo}</div>}
+  </div>;
+};