primocode 10.17.1 → 11.0.0

package/kits/revista/assets/ASSETS.md

@@ -0,0 +1,24 @@
+# Assets do kit revista
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/cormorant.woff2` | Cormorant Garamond (500 700), subset latino | Google Fonts (`https://github.com/CatharsisFonts/Cormorant`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-CormorantGaramond.txt` |
+| `fontes/cormorant-italic.woff2` | Cormorant Garamond (500 700), subset latino | Google Fonts (`https://github.com/CatharsisFonts/Cormorant`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-CormorantGaramond.txt` |
+| `fontes/jost.woff2` | Jost (400 600), subset latino | Google Fonts (`https://github.com/indestructible-type/Jost`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Jost.txt` |
+| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | pop curto | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | pop de objeto que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | riser de 1,3 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `glass` | sem samples; síntese própria (CC0) |
+| `trilha/editorial-100bpm.mp3` | 9 s de trilha, 100 bpm | MotionCraft `music make` (preset dreamy, 100 bpm, tom Bb, lead glock, bateria soft, comp sustain), 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` (6) | Unsplash via picsum (ids 1–5, 20, 26, 60), recorte 720×960, as mesmas do kit apple-tipografico | Unsplash License |
+| `exemplos/logo-linho.svg` | logo fictício desenhado para a demo | próprio |

package/kits/revista/assets/fontes/OFL-CormorantGaramond.txt

@@ -0,0 +1,93 @@
+Copyright The Cormorant Garamond Project Authors (https://github.com/CatharsisFonts/Cormorant)
+
+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/revista/assets/fontes/OFL-Jost.txt

@@ -0,0 +1,93 @@
+Copyright The Jost Project Authors (https://github.com/indestructible-type/Jost)
+
+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/revista/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,23 @@
+// AssinaturaMarca: a última cena. Ícone fino em vinho, filete que abre, o nome em caixa alta espaçada (Cormorant 700,
+// 0,14 em; o espaçamento fecha de 0,4 em), frase em itálico e o endereço em Jost. Calma: nada bate, tudo assenta.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, 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 = 680}) => {
+  const f = useCurrentFrame();
+  const n = nome.toUpperCase();
+  const tam = caber(n, 170, LARGURA_UTIL, 700, 0.14);
+  const ic = e5(seg(f, inicio, inicio + 18)), fio = e5(seg(f, inicio + 6, inicio + 30)), nm = e5(seg(f, inicio + 8, inicio + 40));
+  const linha = (w: number) => <div style={{height: 3, width: w, background: COR.vinho}} />;
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - 280, width: LARGURA_UTIL, textAlign: 'center'}}>
+    <Img src={icone} style={{width: 120, height: 120, opacity: ic, transform: `scale(${0.8 + 0.2 * ic})`}} />
+    <div style={{margin: '40px auto 0', width: LARGURA_UTIL * fio}}>{linha(LARGURA_UTIL * fio)}</div>
+    <div style={{fontFamily: FONTE.titulo, fontWeight: 700, fontSize: tam, lineHeight: `${tam * 1.3}px`, letterSpacing: `${0.14 + 0.26 * (1 - nm)}em`, color: COR.tinta, whiteSpace: 'nowrap', opacity: nm, paddingLeft: '0.14em'}}>{n}</div>
+    <div style={{margin: '0 auto', width: LARGURA_UTIL * fio}}>{linha(LARGURA_UTIL * fio)}</div>
+    {detalhe && <div style={{marginTop: 36, fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 52, color: COR.tinta, opacity: seg(f, inicio + 34, inicio + 46)}}>{detalhe}</div>}
+    {endereco && <div style={{marginTop: 36, fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 30, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.vinho, opacity: seg(f, inicio + 44, inicio + 56)}}>{endereco}</div>}
+  </div>;
+};

package/kits/revista/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.016 + 0.012 * Math.sin(f / 140), dx = Math.sin(f / 37) * 10, dy = Math.cos(f / 51) * 12;
+  const rot = Math.sin(f / 83) * 0.003;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 10) * forca;
+    z += 0.016 * d; dx += 4 * d * Math.sin((f - h) * 2.7 + h); dy += 4 * 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/revista/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 12 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 = 12; // 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 = 14; // 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 * 120}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 348}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 348}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 * 100}px)`;
+  const blur = (entrada === 'cortar' ? 0 : en * 8) + xo * 8;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0.8) * (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/revista/elementos/CitacaoGrande.tsx

@@ -0,0 +1,27 @@
+// CitacaoGrande: aspas vinho de 380 px que entram com sobra, a citação em itálico (92 px) palavra por palavra (5 quadros cada,
+// sobe 30 px e aparece) e o autor em Jost com filete. Sempre alinhado à esquerda na margem de 96 px.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, e5, eb, seg} from './base';
+
+export type CitacaoGrandeProps = {citacao: string; autor?: string; inicio?: number; y?: number; tamanho?: number};
+
+export const CitacaoGrande: React.FC<CitacaoGrandeProps> = ({citacao, autor, inicio = 0, y = 720, tamanho = 92}) => {
+  const f = useCurrentFrame();
+  const palavras = citacao.split(' ');
+  const aspas = eb(seg(f, inicio, inicio + 16), 1.8);
+  const fim = inicio + 10 + palavras.length * 5;
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - 330, width: LARGURA_UTIL}}>
+    <div style={{fontFamily: FONTE.titulo, fontWeight: 500, fontSize: 380, lineHeight: '260px', height: 220, color: COR.vinho, transformOrigin: '0 100%', transform: `scale(${Math.max(0.001, aspas)})`}}>“</div>
+    <div style={{fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 600, fontSize: tamanho, lineHeight: `${tamanho * 1.12}px`, color: COR.tinta}}>
+      {palavras.map((w, i) => {
+        const p = e5((f - inicio - 10 - i * 5) / 8);
+        return <span key={i} style={{display: 'inline-block', marginRight: '0.28em', opacity: p, transform: `translateY(${(1 - p) * 30}px)`}}>{w}</span>;
+      })}
+    </div>
+    {autor && <div style={{marginTop: 40, display: 'flex', alignItems: 'center', gap: 24, opacity: seg(f, fim, fim + 6)}}>
+      <div style={{height: 3, width: 90 * e5(seg(f, fim, fim + 14)), background: COR.vinho}} />
+      <div style={{fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 28, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza}}>{autor}</div>
+    </div>}
+  </div>;
+};

package/kits/revista/elementos/ColagemFotos.tsx

@@ -0,0 +1,22 @@
+// ColagemFotos: 3 fotos sobrepostas com giros pequenos (−3°, 2°, −1,5°). Cada uma entra de um lado (±600 px) com sobra,
+// 7 quadros depois da anterior, e depois deriva 0,4 px por quadro em sentidos diferentes (paralaxe). Tudo dentro da margem de 96 px.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, eb} from './base';
+
+export type ColagemFotosProps = {fotos: string[]; inicio?: number; y?: number};
+
+const LAYOUT = [{x: 96, dy: -330, w: 500, h: 660, rot: -3, lado: -1, par: 0.4}, {x: 520, dy: -170, w: 464, h: 560, rot: 2, lado: 1, par: -0.3}, {x: 250, dy: 150, w: 440, h: 360, rot: -1.5, lado: -1, par: 0.2}];
+
+export const ColagemFotos: React.FC<ColagemFotosProps> = ({fotos, inicio = 0, y = 720}) => {
+  const f = useCurrentFrame();
+  return <div style={{position: 'absolute', inset: 0}}>
+    {LAYOUT.map((L, i) => {
+      const t = f - inicio - i * 7;
+      const p = eb(t / 20, 1.3);
+      return <div key={i} style={{position: 'absolute', left: L.x, top: y + L.dy, width: L.w, height: L.h, background: COR.pagina, padding: 12, boxSizing: 'border-box', boxShadow: '0 24px 40px rgba(20,17,15,0.22)', opacity: t < 0 ? 0 : 1, transform: `translateX(${(1 - p) * 600 * L.lado + Math.max(0, t) * L.par}px) rotate(${L.rot}deg)`}}>
+        <Img src={fotos[i % fotos.length]} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92) sepia(0.12)'}} />
+      </div>;
+    })}
+  </div>;
+};

package/kits/revista/elementos/Folio.tsx

@@ -0,0 +1,19 @@
+// Folio: o rodapé da página de revista. Filete fino, número da página em itálico e a seção em Jost caixa alta. É sempre
+// apoio (pequeno, cinza) e entra com um deslize curto de 40 px.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, e5, seg} from './base';
+
+export type FolioProps = {numero: string; secao?: string; inicio?: number; y?: number};
+
+export const Folio: React.FC<FolioProps> = ({numero, secao = '', inicio = 0, y = 1250}) => {
+  const f = useCurrentFrame();
+  const p = e5(seg(f, inicio, inicio + 16));
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y, width: LARGURA_UTIL, opacity: p, transform: `translateY(${(1 - p) * 40}px)`}}>
+    <div style={{height: 2, background: COR.cinza, width: LARGURA_UTIL * p, opacity: 0.6}} />
+    <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 16}}>
+      <span style={{fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 56, color: COR.vinho}}>{numero}</span>
+      <span style={{fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 28, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza}}>{secao}</span>
+    </div>
+  </div>;
+};

package/kits/revista/elementos/FotoSangrando.tsx

@@ -0,0 +1,24 @@
+// FotoSangrando: foto grande (888 × 980, margem de 96 px) que abre por cortina de cima para baixo (22 quadros) e faz
+// push-in lento (1,15 → 1,25) até o fim da cena. Rótulo em Jost no topo e legenda em itálico embaixo, com filete vinho.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, e5, seg} from './base';
+import {useDuracaoCena} from './Cena';
+
+export type FotoSangrandoProps = {src: string; y?: number; altura?: number; inicio?: number; legenda?: string; rotulo?: string; foco?: string};
+
+export const FotoSangrando: React.FC<FotoSangrandoProps> = ({src, y = 720, altura = 900, inicio = 0, legenda, rotulo, foco = '50% 50%'}) => {
+  const f = useCurrentFrame(), L = useDuracaoCena();
+  const p = e5(seg(f, inicio, inicio + 22));
+  const topo = y - altura / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {rotulo && <div style={{position: 'absolute', left: SEGURA.lado, top: topo - 64, fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 28, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza, opacity: seg(f, inicio + 8, inicio + 20)}}>{rotulo}</div>}
+    <div style={{position: 'absolute', left: SEGURA.lado, top: topo, width: LARGURA_UTIL, height: altura, overflow: 'hidden', clipPath: `inset(0 0 ${(1 - p) * 100}% 0)`}}>
+      <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'saturate(0.92) sepia(0.12)', transform: `scale(${1.15 + 0.1 * (f / L)})`}} />
+    </div>
+    {legenda && <div style={{position: 'absolute', left: SEGURA.lado, top: topo + altura + 24, width: LARGURA_UTIL, opacity: seg(f, inicio + 18, inicio + 30)}}>
+      <div style={{height: 3, width: 120 * e5(seg(f, inicio + 18, inicio + 32)), background: COR.vinho, marginBottom: 14}} />
+      <div style={{fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 500, fontSize: 40, color: COR.tinta}}>{legenda}</div>
+    </div>}
+  </div>;
+};

package/kits/revista/elementos/Fundo.tsx

@@ -0,0 +1,11 @@
+// Fundo: creme com uma luz suave que passeia devagar (branco quente a 55%) e um tom areia nas bordas. Sem textura.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC = () => {
+  const t = useCurrentFrame() / 30;
+  return <AbsoluteFill style={{background: COR.creme}}>
+    <AbsoluteFill style={{background: `radial-gradient(55% 30% at ${40 + Math.sin(t * 0.5) * 22}% ${34 + Math.cos(t * 0.4) * 9}%, rgba(255,255,255,0.55), transparent 70%), radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 60%, rgba(216,201,180,0.45) 100%)`}} />
+  </AbsoluteFill>;
+};

package/kits/revista/elementos/Montagem.tsx

@@ -0,0 +1,59 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
+// Ela NÃO decide nada de estética: só põe Fundo + Camera + Cenas + sons onde o plano mandou.
+// Formato do plano: ver exemplos/plano.json e KITS.md (seção "plano de cenas").
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {TituloEditorial} from './TituloEditorial';
+import {FotoSangrando} from './FotoSangrando';
+import {PaginaDupla} from './PaginaDupla';
+import {CitacaoGrande} from './CitacaoGrande';
+import {ColagemFotos} from './ColagemFotos';
+import {Folio} from './Folio';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  TituloEditorial, FotoSangrando, PaginaDupla, CitacaoGrande, ColagemFotos, Folio, AssinaturaMarca,
+};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada;
+  camadas: Camada[];
+  /** sons relativos ao início da cena */
+  sons?: {som: NomeSom; em: number; volume?: number}[];
+  /** socos de câmera extras, relativos ao início da cena (o início já é um soco) */
+  socos?: number[];
+};
+export type Plano = {kit: string; duracao: number; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
+
+/** troca "fotos/foto-01.jpg" pela URL importada, em qualquer prop (texto, lista ou objeto) */
+const resolver = (v: unknown, arquivos: Record<string, string>): unknown => {
+  if (typeof v === 'string') return arquivos[v] ?? v;
+  if (Array.isArray(v)) return v.map((x) => resolver(x, arquivos));
+  if (v && typeof v === 'object') return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, resolver(x, arquivos)]));
+  return v;
+};
+
+export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
+  const socos = plano.cenas.flatMap((c) => [c.de, ...(c.socos ?? []).map((s) => c.de + s)]);
+  const ultima = plano.cenas.length - 1;
+  return <AbsoluteFill style={{background: '#F6F1E9'}}>
+    <Fundo />
+    <Camera batidas={socos}>
+      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} ultima={i === ultima}>
+        {c.camadas.map((k, j) => {
+          const El = ELEMENTOS[k.elemento];
+          if (!El) throw new Error(`revista: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    {plano.cenas.flatMap((c, i) => (c.sons ?? []).map((s, j) => <Efeito key={`${i}-${j}`} som={s.som} em={c.de + s.em} volume={s.volume} />))}
+    {plano.trilha !== false && <Trilha volume={plano.trilha?.volume} />}
+  </AbsoluteFill>;
+};

package/kits/revista/elementos/PaginaDupla.tsx

@@ -0,0 +1,36 @@
+// PaginaDupla: a revista aberta (888 × 620). Esquerda: foto. Direita: kicker, título e texto. Em `viraEm` a página da direita
+// vira em 3D sobre a lombada (rotateY 0 → −180° em 24 quadros) e mostra no verso a foto seguinte, deixando à direita a
+// página seguinte. Sombra de lombada fixa; sombra da dobra cresce até 90°.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, e5, eb, seg} from './base';
+
+export type Pagina = {kicker?: string; titulo: string; texto?: string};
+export type PaginaDuplaProps = {foto: string; direita: Pagina; depois?: {foto: string; direita: Pagina}; inicio?: number; viraEm?: number; y?: number; altura?: number};
+
+const Lado: React.FC<{p: Pagina}> = ({p}) => <div style={{position: 'absolute', inset: 0, padding: '48px 40px', boxSizing: 'border-box', background: COR.pagina}}>
+  {p.kicker && <div style={{fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 22, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza}}>{p.kicker}</div>}
+  <div style={{marginTop: 18, fontFamily: FONTE.titulo, fontWeight: 700, fontSize: 64, lineHeight: '64px', color: COR.tinta}}>{p.titulo.split('*').map((s, i) => i % 2 ? <span key={i} style={{fontFamily: FONTE.italico, fontStyle: 'italic', color: COR.vinho}}>{s}</span> : s)}</div>
+  <div style={{width: 80, height: 3, background: COR.vinho, margin: '22px 0'}} />
+  {p.texto && <div style={{fontFamily: FONTE.titulo, fontWeight: 500, fontSize: 30, lineHeight: '42px', color: COR.tinta}}>{p.texto}</div>}
+</div>;
+
+export const PaginaDupla: React.FC<PaginaDuplaProps> = ({foto, direita, depois, inicio = 0, viraEm, y = 700, altura = 620}) => {
+  const f = useCurrentFrame();
+  const w = LARGURA_UTIL / 2;
+  const entra = eb(seg(f, inicio, inicio + 18), 1.2);
+  const ang = viraEm === undefined ? 0 : -180 * e5(seg(f, viraEm, viraEm + 24));
+  const img = (src: string) => <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92) sepia(0.12)'}} />;
+  const sombra = Math.sin((-ang / 180) * Math.PI) * 0.35;
+  return <div style={{position: 'absolute', inset: 0, perspective: 2600, perspectiveOrigin: '50% 40%'}}>
+    <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: LARGURA_UTIL, height: altura, opacity: f < inicio ? 0 : 1, transform: `translateY(${(1 - entra) * 90}px) rotateX(${(1 - entra) * 8}deg)`, transformStyle: 'preserve-3d', boxShadow: '0 40px 60px rgba(20,17,15,0.22)'}}>
+      <div style={{position: 'absolute', left: 0, top: 0, width: w, height: altura, overflow: 'hidden'}}>{img(foto)}</div>
+      <div style={{position: 'absolute', left: w, top: 0, width: w, height: altura}}><Lado p={depois ? depois.direita : direita} /></div>
+      <div style={{position: 'absolute', left: w, top: 0, width: w, height: altura, transformOrigin: '0 50%', transformStyle: 'preserve-3d', transform: `rotateY(${ang}deg)`}}>
+        <div style={{position: 'absolute', inset: 0, backfaceVisibility: 'hidden'}}><Lado p={direita} /><div style={{position: 'absolute', inset: 0, background: `rgba(20,17,15,${sombra})`}} /></div>
+        <div style={{position: 'absolute', inset: 0, backfaceVisibility: 'hidden', transform: 'rotateY(180deg)', overflow: 'hidden'}}>{depois && img(depois.foto)}</div>
+      </div>
+      <div style={{position: 'absolute', left: w - 24, top: 0, width: 48, height: altura, background: 'linear-gradient(90deg, rgba(20,17,15,0), rgba(20,17,15,0.22) 50%, rgba(20,17,15,0))', pointerEvents: 'none'}} />
+    </div>
+  </div>;
+};

package/kits/revista/elementos/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote glass: finos e brilhantes); trilha de 9 s, 100 bpm, suave.
+// Regra: um som por movimento que importa, 1 a 2 quadros ANTES do visual.
+import React from 'react';
+import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
+import whooshEntra from '../assets/sons/whoosh-entra.mp3';
+import whooshSai from '../assets/sons/whoosh-sai.mp3';
+import swoosh from '../assets/sons/swoosh.mp3';
+import popPalavra from '../assets/sons/pop-palavra.mp3';
+import popCartao from '../assets/sons/pop-cartao.mp3';
+import clique from '../assets/sons/clique.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import subida from '../assets/sons/subida.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/editorial-100bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.45
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.7, 'whoosh-sai': 0.8, swoosh: 0.8, 'pop-palavra': 0.8, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.7, subida: 0.7, assinatura: 0.9,
+};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (absoluto, ou relativo à Cena se estiver dentro de uma) */
+export const Efeito: React.FC<EfeitoProps> = ({som, em, volume}) =>
+  <Sequence from={Math.max(0, Math.round(em))} durationInFrames={90} layout="none">
+    <Audio src={SONS[som]} volume={volume ?? VOLUME[som]} />
+  </Sequence>;
+
+export type TrilhaProps = {volume?: number; /** quadros de fade no fim */ saida?: number};
+/** a trilha do kit, do quadro 0 ao fim, com fade de saída */
+export const Trilha: React.FC<TrilhaProps> = ({volume = 0.45, saida = 20}) => {
+  const {durationInFrames} = useVideoConfig();
+  return <Audio src={trilha} volume={(f) => volume * interpolate(f, [durationInFrames - saida, durationInFrames], [1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} />;
+};

package/kits/revista/elementos/TituloEditorial.tsx

@@ -0,0 +1,31 @@
+// TituloEditorial: linhas Cormorant 700 com a palavra em `*itálico vinho*`. Cada linha sobe 60 px por trás de uma máscara
+// enquanto o espaçamento entre letras fecha de 0,25 em a −0,01 em (30 quadros); 10 quadros entre linhas. Kicker em Jost.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb, pedacos, seg, textoLimpo} from './base';
+
+export type TituloEditorialProps = {linhas: string[]; kicker?: string; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fim?: number};
+
+export const TituloEditorial: React.FC<TituloEditorialProps> = ({linhas, kicker, inicio = 0, intervalo = 10, y = 700, tamanho = 230, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const tams = linhas.map((l) => caber(textoLimpo(l), tamanho, LARGURA_UTIL, 700, -0.01));
+  const alts = tams.map((t) => t * 0.98);
+  const total = alts.reduce((a, b) => a + b, 0) + (kicker ? 80 : 0);
+  let topo = y - total / 2;
+  const kt = topo; if (kicker) topo += 80;
+  const kp = e5(seg(f, inicio, inicio + 20));
+  return <div style={{position: 'absolute', inset: 0}}>
+    {kicker && <div style={{position: 'absolute', left: SEGURA.lado, top: kt, fontFamily: FONTE.apoio, fontWeight: 500, fontSize: 28, letterSpacing: '0.22em', textTransform: 'uppercase', color: COR.cinza, opacity: kp, transform: `translateY(${(1 - kp) * 20}px)`}}>{kicker}</div>}
+    {linhas.map((l, i) => {
+      const top = topo; topo += alts[i];
+      const p = e5((f - inicio - i * intervalo) / 30);
+      const q = eb((f - inicio - i * intervalo) / 16, 1.1);
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, top, height: alts[i], width: LARGURA_UTIL, overflow: 'hidden', opacity: f < inicio + i * intervalo ? 0 : 1}}>
+        <div style={{height: alts[i], lineHeight: `${alts[i]}px`, whiteSpace: 'nowrap', fontSize: tams[i], color: COR.tinta, letterSpacing: `${0.25 - 0.26 * p}em`, transform: `translateY(${(1 - Math.min(q, 1.04)) * 60}px)`}}>
+          {pedacos(l).map((s, j) => <span key={j} style={s.d ? {fontFamily: FONTE.italico, fontStyle: 'italic', fontWeight: 600, color: COR.vinho} : {fontFamily: FONTE.titulo, fontWeight: 700}}>{s.t}</span>)}
+        </div>
+      </div>;
+    })}
+  </div>;
+};