primocode 10.17.1 → 10.19.0

package/kits/rabisco/regras/tipografia.md

@@ -0,0 +1,18 @@
+# Tipografia
+
+- **título**: Permanent Marker 400 (arquivo `assets/fontes/permanent-marker.woff2`, família registrada como `RB Permanent Marker`).
+- **texto**: Caveat 700 (arquivo `assets/fontes/caveat-700.woff2`, família registrada como `RB Caveat`).
+
+| papel | tamanho px | máx. caracteres por linha | fonte |
+|---|---|---|---|
+| título | 200 (2 linhas) / 300 | 9–10 | Permanent Marker |
+| cartão de data | 300 | 3–4 | Permanent Marker |
+| item de lista | 190 | 8 | Caveat 700 |
+| fala do boneco | 120 | 12 | Caveat 700 |
+| detalhe | 100 | 24 | Caveat 700 |
+| endereço | 80 | 20 | Caveat 700 |
+
+- Tracking: 0.
+- Line-height: 1,3 nos títulos.
+- Caixa: Frase normal ("Você sabe desenhar?"); nada de caixa alta forçada.
+- Texto que passa da largura útil (920 px) **encolhe sozinho** (`caber()` em `base.ts`), nunca corta palavra.

package/kits/retro-70/SKILL.md

@@ -0,0 +1,53 @@
+---
+slug: retro-70
+nome: Retrô anos 70
+descricao: laranja, mostarda e marrom, tipo gordo arredondado com sombras em camadas, arcos de listras, raios de sol e margaridas
+familia: Retrô
+versao: 1
+quando:
+  - "festival, feira, café, loja ou evento de verão com clima anos 70"
+  - "anúncio caloroso e divertido com tipo arredondado e cores terrosas"
+  - "convite de festa, brechó, música ou comida com data e lugar"
+  - "quero retrô 70, arco-íris de listras, sol, margarida, cores quentes"
+nao_serve:
+  - "vídeo frio, tecnológico ou minimalista"
+  - "estética neon/noturna (use synthwave) ou cromo (use y2k-cromado)"
+---
+
+# Retrô anos 70
+
+Anos 70 quentes em movimento. Creme (`#F6E3B8`) com **laranja, mostarda, tijolo e marrom**; o tipo é **Shrikhand** (gordo, arredondado) com **três sombras deslocadas em camadas** (tijolo, laranja, mostarda), que cai **amassando e esticando** como borracha. Os heróis são **arcos de listras concêntricos** que sobem do chão, **raios de sol** girando devagar, **foto em arco** com moldura creme e sombra em camadas, **cartão de data** marrom e o título gordo. **Margaridas** que giram e **ondas de listras** são os apoios. Tudo é redondo e quente, com muito creme vazio entre os elementos.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases de 1 a 3 palavras amigáveis, de conversa. Uma frase = um plano (cabe em 45 a 60 quadros, mais a pausa).
+2. **Escolha as batidas** em `receita.json` (gancho → virada → prova → data → 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 = 17.3 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, sombras em 3 camadas, nada com quina viva, um herói + um apoio, nenhum quadro parado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| TituloGordo | título Shrikhand com 3 sombras que cai amassando e esticando | gancho, virada, oferta |
+| ArcoListras | arcos de listras concêntricos que sobem do chão, texto no miolo | virada, prova |
+| RaiosDeSol | raios de sol alternados girando, disco de centro com texto | data, oferta, apoio |
+| FotoArredondada | foto em arco ou pílula com moldura creme e sombras em camadas | prova |
+| CartaoData | cartão marrom com dia gigante, mês, ondas e local | data |
+| Flor70 | margaridas que giram e pulsam (apoio) | apoio de qualquer cena |
+| FaixaOnda | 4 ondas de listras que correm (apoio) | apoio, transição |
+| AssinaturaMarca | ícone de arcos, nome gordo com sombras, tagline e endereço em pílula | marca (sempre a última) |
+| Fundo | creme com cantos tostados | todas |
+| Camera | deriva + soco | todas |
+| Cena | janela de cada plano | todas |
+| Efeito, Trilha | sons e trilha do kit | todas |
+
+## Proibido
+
+- Preto, branco puro, azul, neon ou degradê; quina viva (raio mínimo de 40 px).
+- Tipo sem as 3 sombras em camadas ou em fonte que não seja Shrikhand/Fredoka.
+- Mais de 1 herói + 1 apoio por plano; menos de 35% de creme vazio.
+- Entrada sem borracha (sem sobra): tudo cai, amassa e assenta.
+- Elemento a menos de 96 px da borda.
+- Texto fora da área segura (168–1330 px na vertical).

package/kits/retro-70/assets/ASSETS.md

@@ -0,0 +1,23 @@
+# Assets do kit retro-70
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/shrikhand.woff2` | Shrikhand (400), subset latino | Google Fonts (`https://github.com/jonpinhorn/shrikhand`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Shrikhand.txt` |
+| `fontes/fredoka.woff2` | Fredoka (500 700), subset latino | Google Fonts (`https://github.com/hafontia-zz/Fredoka-One`), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Fredoka.txt` |
+| `sons/whoosh-entra.mp3` | whoosh de entrada | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | whoosh de saída | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | swoosh lateral | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | pop curto | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | pop de objeto que pousa | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | impacto grave | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | riser de 1,3 s | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | acorde da marca | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `trilha/solar-104bpm.mp3` | 9 s de trilha, 104 bpm | MotionCraft `music make` (preset warm-major, 104 bpm, tom C, progressão warm-lift, lead marimba, bateria soft, comp offbeat), 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-girassol.svg` | logo fictício desenhado para a demo | próprio |

package/kits/retro-70/assets/fontes/OFL-Fredoka.txt

@@ -0,0 +1,93 @@
+Copyright The Fredoka Project Authors (https://github.com/hafontia-zz/Fredoka-One)
+
+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/retro-70/assets/fontes/OFL-Shrikhand.txt

@@ -0,0 +1,93 @@
+Copyright The Shrikhand Project Authors (https://github.com/jonpinhorn/shrikhand)
+
+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/retro-70/elementos/ArcoListras.tsx

@@ -0,0 +1,25 @@
+// ArcoListras: arcos de listras concêntricos (tijolo, laranja, mostarda, marrom) com pernas retas até o chão, 70 px por faixa, que
+// crescem do chão (scaleY 0 → 1 com sobra), de fora para dentro, 4 quadros uma da outra. O miolo é creme e leva o texto (Shrikhand).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb} from './base';
+
+export type ArcoListrasProps = {texto?: string; x?: number; chao?: number; altura?: number; inicio?: number; fim?: number};
+
+const FAIXAS = [{r: 440, c: COR.tijolo}, {r: 370, c: COR.laranja}, {r: 300, c: COR.mostarda}, {r: 230, c: COR.marrom}, {r: 160, c: COR.creme}];
+
+export const ArcoListras: React.FC<ArcoListrasProps> = ({texto, x = 540, chao = 1180, altura = 900, inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  const tam = texto ? caber(texto, 130, 280, 400, 0) : 0;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {FAIXAS.map((b, k) => {
+      const p = eb((f - inicio - k * 4) / 16, 1.6);
+      const topo = chao - altura + (440 - b.r);
+      return <svg key={k} viewBox={`${x - 440} ${chao - altura} 880 ${altura}`} style={{position: 'absolute', left: x - 440, top: chao - altura, width: 880, height: altura, overflow: 'visible', transformOrigin: '50% 100%', transform: `scaleY(${Math.max(0.001, p)})`}}>
+        <path d={`M${x - b.r} ${chao} L${x - b.r} ${topo + b.r} A${b.r} ${b.r} 0 0 1 ${x + b.r} ${topo + b.r} L${x + b.r} ${chao} Z`} fill={b.c} />
+      </svg>;
+    })}
+    {texto && <div style={{position: 'absolute', left: x - 160, width: 320, top: chao - 360, textAlign: 'center', fontFamily: FONTE.titulo, fontSize: tam, lineHeight: `${tam * 1.1}px`, color: COR.marrom, opacity: f > inicio + 20 ? 1 : 0, transform: `scale(${eb((f - inicio - 20) / 12, 2)})`}}>{texto}</div>}
+  </div>;
+};

package/kits/retro-70/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,21 @@
+// AssinaturaMarca: a última cena. O ícone (arcos de listras) sobe do chão com sobra, o nome em Shrikhand marrom com as 3 sombras cai
+// amassando, a tagline em Fredoka entra e o endereço fica numa pílula mostarda com borda marrom. Muito creme em volta.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb, seg} from './base';
+import {SOMBRAS} from './TituloGordo';
+
+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 = 700}) => {
+  const f = useCurrentFrame();
+  const tam = caber(nome, 190, LARGURA_UTIL - 40, 400, 0);
+  const ic = eb(seg(f, inicio, inicio + 16), 1.8), nm = eb((f - inicio - 6) / 14, 2.2), pl = eb(seg(f, inicio + 28, inicio + 42), 2);
+  const sy = 1.35 - 0.35 * nm, sx = 1 / Math.sqrt(Math.max(0.5, sy));
+  return <div style={{position: 'absolute', inset: 0}}>
+    <Img src={icone} style={{position: 'absolute', left: 540 - 120, top: y - 380, width: 240, height: 240, transformOrigin: '50% 100%', transform: `scaleY(${Math.max(0.001, ic)})`}} />
+    <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y - 80, height: tam * 1.15, lineHeight: `${tam * 1.15}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontSize: tam, whiteSpace: 'nowrap', color: COR.marrom, textShadow: SOMBRAS, opacity: f < inicio + 6 ? 0 : 1, transformOrigin: '50% 100%', transform: `translateY(${(1 - Math.min(nm, 1)) * -500}px) scale(${sx}, ${sy})`}}>{nome}</div>
+    {detalhe && <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y + tam * 1.15 + 20, textAlign: 'center', fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 54, color: COR.marrom, opacity: seg(f, inicio + 24, inicio + 30)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 540 - 300, top: y + tam * 1.15 + 120, width: 600, height: 110, borderRadius: 55, background: COR.mostarda, border: `6px solid ${COR.marrom}`, boxSizing: 'border-box', textAlign: 'center', fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 52, lineHeight: '98px', color: COR.marrom, boxShadow: `8px 8px 0 ${COR.laranja}`, transform: `scale(${Math.max(0.001, pl)})`}}>{endereco}</div>}
+  </div>;
+};

package/kits/retro-70/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.02 + 0.014 * Math.sin(f / 110), dx = Math.sin(f / 37) * 10, dy = Math.cos(f / 51) * 12;
+  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.025 * d; dx += 6 * d * Math.sin((f - h) * 2.7 + h); dy += 6 * 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/retro-70/elementos/CartaoData.tsx

@@ -0,0 +1,24 @@
+// CartaoData: cartão marrom (760 × 860, canto 120 px, borda mostarda de 14 px) com o dia gigante em Shrikhand mostarda (380 px), o
+// mês em Fredoka caixa alta espaçada, três ondas de listras e o local. Sobe 600 px com sobra, amassa (1,3 → 0,9 → 1) e gira −3°.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb} from './base';
+
+export type CartaoDataProps = {dia: string; mes: string; local?: string; hora?: string; x?: number; y?: number; inicio?: number; fim?: number};
+
+export const CartaoData: React.FC<CartaoDataProps> = ({dia, mes, local, hora, x = 540, y = 720, inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 16, 2.2);
+  const sy = 1.3 - 0.3 * p, sx = 1 / Math.sqrt(Math.max(0.5, sy));
+  const W = 760, H = 860;
+  const tamLocal = local ? caber(local, 54, W - 100, 600, 0, FONTE.apoio.split('"')[1]) : 0;
+  return <div style={{position: 'absolute', left: x - W / 2, top: y - H / 2, width: W, height: H, borderRadius: 120, background: COR.marrom, border: `14px solid ${COR.mostarda}`, boxSizing: 'border-box', boxShadow: `14px 14px 0 ${COR.laranja}`, textAlign: 'center', transformOrigin: '50% 100%', transform: `translateY(${(1 - Math.min(p, 1)) * 600}px) rotate(${-3 * Math.min(p, 1)}deg) scale(${sx}, ${sy})`}}>
+    <div style={{fontFamily: FONTE.titulo, fontSize: 380, lineHeight: '380px', color: COR.mostarda, marginTop: 40, textShadow: `8px 8px 0 ${COR.tijolo}`}}>{dia}</div>
+    <div style={{fontFamily: FONTE.apoio, fontWeight: 700, fontSize: 90, letterSpacing: '0.2em', paddingLeft: '0.2em', color: COR.creme, textTransform: 'uppercase', marginTop: 10}}>{mes}</div>
+    <div style={{display: 'flex', flexDirection: 'column', gap: 10, margin: '26px 90px'}}>{[COR.tijolo, COR.laranja, COR.mostarda].map((c, i) => <div key={i} style={{height: 14, borderRadius: 7, background: c}} />)}</div>
+    {local && <div style={{fontFamily: FONTE.apoio, fontWeight: 600, fontSize: tamLocal, color: COR.creme}}>{local}</div>}
+    {hora && <div style={{fontFamily: FONTE.apoio, fontWeight: 600, fontSize: 48, color: COR.mostarda, marginTop: 8}}>{hora}</div>}
+  </div>;
+};

package/kits/retro-70/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 10 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 = 10; // 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 * 140}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 406}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 406}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.7) * (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/retro-70/elementos/FaixaOnda.tsx

@@ -0,0 +1,27 @@
+// FaixaOnda: 4 ondas de listras (tijolo, laranja, mostarda, marrom; 30 px, vão de 44 px, pontas redondas) entre x = 96 e x = 984.
+// Revelam da esquerda em 20 quadros (`e5`) e a fase da onda corre 0,08 rad por quadro. Apoio de foto e de corte.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, e5, seg} from './base';
+
+export type FaixaOndaProps = {y?: number; inicio?: number; fim?: number};
+
+export const FaixaOnda: React.FC<FaixaOndaProps> = ({y = 1240, inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  const t = f - inicio;
+  const r = e5(seg(f, inicio, inicio + 20));
+  const cores = [COR.tijolo, COR.laranja, COR.mostarda, COR.marrom];
+  return <svg width="1080" height="1920" style={{position: 'absolute', inset: 0}}>
+    <defs><clipPath id="onda-rev"><rect x="96" y="0" width={888 * r} height="1920" /></clipPath></defs>
+    <g clipPath="url(#onda-rev)">
+      {cores.map((c, k) => {
+        const pts = Array.from({length: 45}, (_, i) => {
+          const x = 96 + i * 20;
+          return `${i === 0 ? 'M' : 'L'}${x} ${y + k * 44 + Math.sin(x / 57 + t * 0.08 + k * 0.7) * 20}`;
+        }).join(' ');
+        return <path key={k} d={pts} fill="none" stroke={c} strokeWidth="30" strokeLinecap="round" strokeLinejoin="round" />;
+      })}
+    </g>
+  </svg>;
+};

package/kits/retro-70/elementos/Flor70.tsx

@@ -0,0 +1,25 @@
+// Flor70: margaridas (10 pétalas, mostarda ou laranja, centro marrom com miolo creme) que giram 1,2° por quadro e pulsam
+// (scale 0,9 → 1,1, período 36 quadros). Entram com sobra, 4 quadros uma da outra. As posições vêm em `pontos`, fora do herói.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, eb} from './base';
+
+export type PontoFlor = {x: number; y: number; d?: number; cor?: 'mostarda' | 'laranja' | 'tijolo'};
+export type Flor70Props = {pontos: PontoFlor[]; inicio?: number; fim?: number};
+
+export const Flor70: React.FC<Flor70Props> = ({pontos, inicio = 0, fim}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {pontos.map((p, i) => {
+      const t = f - inicio - i * 4;
+      if (t < 0) return null;
+      const d = p.d ?? 150;
+      const e = eb(t / 14, 2) * (1 + 0.1 * Math.sin((t / 36) * 2 * Math.PI + i));
+      return <svg key={i} viewBox="-50 -50 100 100" style={{position: 'absolute', left: p.x - d / 2, top: p.y - d / 2, width: d, height: d, overflow: 'visible', transform: `scale(${Math.max(0.001, e)}) rotate(${t * 1.2 * (i % 2 ? -1 : 1)}deg)`}}>
+        {Array.from({length: 10}, (_, k) => <ellipse key={k} cx="0" cy="-30" rx="12" ry="22" fill={COR[p.cor ?? 'mostarda']} transform={`rotate(${k * 36})`} />)}
+        <circle r="17" fill={COR.marrom} /><circle r="7" fill={COR.creme} />
+      </svg>;
+    })}
+  </div>;
+};

package/kits/retro-70/elementos/FotoArredondada.tsx

@@ -0,0 +1,19 @@
+// FotoArredondada: foto em arco (ou pílula) de 640 × 860 com moldura creme de 18 px e duas sombras duras em camadas (mostarda 14 px,
+// laranja 28 px). Filtro quente (sépia, saturação, véu laranja em multiply). Entra de 0,8x a 1x com giro −5° → 2° e depois balança ±1,5°.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, eb} from './base';
+
+export type FotoArredondadaProps = {src: string; forma?: 'arco' | 'pilula'; largura?: number; altura?: number; x?: number; y?: number; inicio?: number; foco?: string; fim?: number};
+
+export const FotoArredondada: React.FC<FotoArredondadaProps> = ({src, forma = 'arco', largura = 640, altura = 860, x = 520, y = 700, inicio = 0, foco = '50% 50%', fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 16, 1.7);
+  const raio = forma === 'arco' ? `${largura / 2}px ${largura / 2}px 48px 48px` : `${largura / 2}px`;
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - altura / 2, width: largura, height: altura, borderRadius: raio, border: `18px solid ${COR.creme}`, boxSizing: 'border-box', overflow: 'hidden', boxShadow: `14px 14px 0 ${COR.mostarda}, 28px 28px 0 ${COR.laranja}`, transform: `scale(${Math.max(0.001, 0.8 + 0.2 * p)}) rotate(${-5 + 7 * Math.min(p, 1) + Math.sin(Math.max(0, t - 16) / 20) * 1.5}deg)`}}>
+    <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'sepia(0.55) saturate(1.35) hue-rotate(-12deg) contrast(1.05)', transform: `scale(${1.08 + t * 0.002})`}} />
+    <div style={{position: 'absolute', inset: 0, background: COR.laranja, mixBlendMode: 'multiply', opacity: 0.22}} />
+  </div>;
+};

package/kits/retro-70/elementos/Fundo.tsx

@@ -0,0 +1,11 @@
+// Fundo: creme de papel quente com os cantos tostados (vinheta de `#E9C98A` a 60%) e uma luz suave que passeia. 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(60% 28% at ${40 + Math.sin(t * 0.5) * 20}% ${30 + Math.cos(t * 0.4) * 8}%, rgba(255,246,222,0.7), transparent 70%), radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 58%, rgba(233,201,138,0.7) 100%)`}} />
+  </AbsoluteFill>;
+};

package/kits/retro-70/elementos/Montagem.tsx

@@ -0,0 +1,60 @@
+// 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 {TituloGordo} from './TituloGordo';
+import {ArcoListras} from './ArcoListras';
+import {RaiosDeSol} from './RaiosDeSol';
+import {FotoArredondada} from './FotoArredondada';
+import {CartaoData} from './CartaoData';
+import {Flor70} from './Flor70';
+import {FaixaOnda} from './FaixaOnda';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  TituloGordo, ArcoListras, RaiosDeSol, FotoArredondada, CartaoData, Flor70, FaixaOnda, 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: '#F6E3B8'}}>
+    <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(`retro-70: 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>;
+};