primocode 10.17.0 → 10.19.0

package/kits/rabisco/SKILL.md

@@ -0,0 +1,51 @@
+---
+slug: rabisco
+nome: Rabisco
+descricao: folha de caderno, traço de caneta tremendo, marca-texto amarelo, boneco de palitos, caixinhas e vistos desenhados à mão
+familia: Feito à mão
+versao: 1
+quando:
+  - "vídeo de aula, curso, oficina ou conteúdo educativo"
+  - "explicação simples com cara de desenho em caderno"
+  - "anúncio leve, humano e descomplicado"
+  - "quero rabisco, caneta, marca-texto, boneco de palitos"
+  - "reels de dica, passo a passo ou checklist"
+nao_serve:
+  - "visual premium ou corporativo (use apple-tipografico)"
+  - "clima tecnológico (use terminal)"
+  - "fotos como protagonista"
+---
+
+# Rabisco
+
+Uma página de caderno sendo preenchida ao vivo. O chão é papel `#FBF8F0` com pauta azul fraca, margem vermelha e furos de espiral. Tudo é **traço de caneta que se desenha**: títulos em Permanent Marker escritos da esquerda para a direita, desenhos que aparecem traço por traço, um boneco de palitos que acena, caixinhas que ganham visto vermelho, faixas de **marca-texto amarelo** (multiply) que passam por trás. O traço **ferve**: um filtro de ruído (`feDisplacementMap`, escala 7) troca de semente a cada 2 quadros. 1 herói por plano e no máximo 1 apoio; o resto é folha em branco.
+
+## Como montar um vídeo com este kit
+
+1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas (1 a 4 palavras). Uma frase = uma cena de 0,6 a 1,5 s.
+2. **Escolha as batidas** em `receita.json` (gancho → prova → virada → lista → data → marca). Cada batida diz a duração e os elementos que servem.
+3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): `de`/`ate` em quadros, `entrada`, `camadas` (elemento + props) e `sons`. 1 batida da trilha = 16.07 quadros.
+4. **Renderize** com `<Montagem plano={...} arquivos={...} />` ou combine `Fundo`, `Camera`, `Cena` e os elementos (tudo sai de `elementos/index.ts`).
+5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.
+
+## Elementos
+
+| elemento | o que faz | batidas |
+|---|---|---|
+| `TituloRabisco` | linhas em marcador escritas da esquerda; marca-texto e sublinhado azul na linha de destaque | gancho, virada |
+| `TracoDesenhando` | herói: lâmpada, seta, estrela, coração, raio ou espiral desenhados traço a traço | prova |
+| `Bonequinho` | boneco de palitos que se desenha, acena e pula, com balão de fala | virada, problema |
+| `ListaRabiscada` | caixinhas desenhadas, texto escrito e visto vermelho | lista |
+| `CartaoRabiscado` | moldura torta em caneta azul com hachura de marca-texto e texto grande | data, oferta |
+| `AssinaturaMarca` | nome em marca-texto + estrela rabiscada + endereço em caixinha | marca (sempre a última) |
+| `Fundo`, `Overlay`, `Camera`, `Cena` | folha de caderno + filtros de fervura, luz, câmera, janela | todas |
+| `Efeito`, `Trilha` | sons e trilha do kit | todas |
+
+## Proibido
+
+- Linha perfeita: todo traço passa pelo filtro `rb-*` (tremor) e entra desenhado, nunca de uma vez.
+- Cores fora de tinta, azul de caneta, vermelho de marcador e amarelo de marca-texto.
+- Degradê, sombra suave, brilho, blur, fotos, emoji.
+- Mais de 1 herói + 1 apoio; menos de 35% de folha livre; margens < 96 px.
+- Fontes fora de Permanent Marker e Caveat; texto fora da área segura (168–1330 px).
+- Sem a pausa de 0,5–0,8 s depois de cada desenho terminar.

package/kits/rabisco/assets/ASSETS.md

@@ -0,0 +1,18 @@
+# Assets do kit rabisco
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/permanent-marker.woff2` | Permanent Marker (título), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | Apache 2.0 (Permanent Marker) — texto em `fontes/OFL-permanent-marker.txt` |
+| `fontes/caveat-700.woff2` | Caveat (texto), subset latino | Google Fonts (fonts.gstatic.com), baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-caveat-700.txt` |
+| `sons/whoosh-entra.mp3` | efeito whoosh-entra | sintetizado: MotionCraft `sfx make`, tipo `whoosh_in`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | efeito whoosh-sai | sintetizado: MotionCraft `sfx make`, tipo `whoosh_out`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | efeito swoosh | sintetizado: MotionCraft `sfx make`, tipo `swoosh`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | efeito pop-palavra | sintetizado: MotionCraft `sfx make`, tipo `word_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | efeito pop-cartao | sintetizado: MotionCraft `sfx make`, tipo `icon_pop`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | efeito clique | sintetizado: MotionCraft `sfx make`, tipo `button`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | efeito impacto | sintetizado: MotionCraft `sfx make`, tipo `impact`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | efeito subida | sintetizado: MotionCraft `sfx make`, tipo `riser`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | efeito assinatura | sintetizado: MotionCraft `sfx make`, tipo `logo_sting`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `sons/tick.mp3` | efeito tick | sintetizado: MotionCraft `sfx make`, tipo `letter_tick`, pacote `organic-wood` | sem samples; síntese própria (CC0) |
+| `trilha/trilha.mp3` | trilha de 8,7 s, 112 bpm | MotionCraft `music make --preset calm-punch --bpm 112 --key Bb` | síntese própria (CC0); MotionCraft é MIT |
+

package/kits/rabisco/assets/fontes/OFL-caveat-700.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Caveat Project Authors (https://github.com/rsms/inter)
+
+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/rabisco/assets/fontes/OFL-permanent-marker.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Permanent Marker Project Authors (https://github.com/rsms/inter)
+
+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/rabisco/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,21 @@
+// AssinaturaMarca: o nome escrito a marca-texto com uma estrela rabiscada ao lado, sublinhado de caneta, detalhe em Caveat e o endereço dentro de uma caixinha torta. Sempre a última cena.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, larguraTexto, mola, seg, useF} from './base';
+import {DESENHOS} from './TracoDesenhando';
+import {ferver, traco} from './traco';
+
+export type AssinaturaMarcaProps = {nome: string; detalhe?: string; endereco?: string; inicio?: number};
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({nome, detalhe, endereco, inicio = 0}) => {
+  const f = useF() - inicio;
+  const tam = caber(nome, 230, 780, FONTE_TITULO, 400, 0);
+  const w = larguraTexto(nome, tam, FONTE_TITULO, 400, 0);
+  const esc = seg(f, 6, 18);
+  const pe = mola(seg(f, 22, 32), 1.6);
+  return <>
+    <div style={{position: 'absolute', left: (1080 - w) / 2 - 20, top: 640 + tam * 0.18, width: (w + 40) * mola(seg(f, 0, 10), 1.2), height: tam * 0.62, background: COR.marca, mixBlendMode: 'multiply', transform: 'rotate(-1.5deg)'}} />
+    <div style={{position: 'absolute', left: (1080 - w) / 2, top: 640, width: w + 20, height: tam * 1.3, filter: ferver(f), clipPath: `inset(-10% ${100 - esc * 100}% -10% 0)`, fontFamily: FONTE_TITULO, fontSize: tam, lineHeight: `${tam * 1.3}px`, color: COR.tinta, whiteSpace: 'nowrap'}}>{nome}</div>
+    <svg viewBox="-8 -8 116 116" width={230} height={230} style={{position: 'absolute', left: 700, top: 360, overflow: 'visible', filter: ferver(f), transform: `rotate(${12 + Math.sin(f / 8) * 6}deg)`}}>{DESENHOS.estrela.tracos.map((p, i) => <path key={i} d={p} {...traco(seg(f, 10, 26), COR.vermelho, 4)} />)}</svg>
+    {detalhe && <div style={{position: 'absolute', left: 96, right: 96, top: 640 + tam * 1.3 + 30, textAlign: 'center', fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: caber(detalhe, 100, 888, FONTE_TEXTO, 700, 0), color: COR.azul, opacity: pe, filter: ferver(f)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 0, right: 0, top: 640 + tam * 1.3 + 190, display: 'flex', justifyContent: 'center', opacity: f > 22 ? 1 : 0}}><div style={{border: `7px solid ${COR.tinta}`, borderRadius: '30px 40px 34px 44px', padding: '8px 44px', fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: 80, color: COR.tinta, transform: `rotate(-2deg) scale(${Math.max(0.01, pe)})`, filter: ferver(f)}}>{endereco}</div></div>}
+  </>;
+};

package/kits/rabisco/elementos/Bonequinho.tsx

@@ -0,0 +1,31 @@
+// Bonequinho: boneco de palitos desenhado a caneta (cabeça, tronco, pernas, braços) que se desenha, pisca, acena e pula, com balão de fala escrito.
+// O boneco é o herói; a fala é o único apoio.
+import React from 'react';
+import {COR, FONTE_TEXTO, caber, mola, seg, useF} from './base';
+import {ferver, traco} from './traco';
+
+export type BonequinhoProps = {fala?: string; x?: number; y?: number; tam?: number; inicio?: number; cor?: string};
+export const Bonequinho: React.FC<BonequinhoProps> = ({fala, x = 540, y = 900, tam = 760, inicio = 0, cor = COR.tinta}) => {
+  const f = useF() - inicio;
+  const pulo = Math.abs(Math.sin(Math.max(0, f - 26) / 6.5)) * 40;
+  const aceno = Math.sin(f / 3.2) * 18;
+  const t = (a: number, b: number) => seg(f, a, b);
+  const pb = mola(seg(f, 22, 34), 2.2);
+  return <>
+    <div style={{position: 'absolute', left: x - tam / 2, top: y - tam / 2 - pulo, width: tam, height: tam}}>
+      <svg viewBox="0 0 100 100" width={tam} height={tam} style={{overflow: 'visible', filter: ferver(f)}}>
+        <circle cx="50" cy="22" r="14" {...traco(t(0, 10), cor, 3)} />
+        <path d="M50 36 L50 66" {...traco(t(8, 16), cor, 3)} />
+        <path d="M50 44 L28 58" {...traco(t(14, 20), cor, 3)} />
+        <path d={`M50 44 L${74 + aceno * 0.2} ${22 - aceno * 0.3}`} {...traco(t(16, 22), cor, 3)} />
+        <path d="M50 66 L34 92" {...traco(t(20, 26), cor, 3)} />
+        <path d="M50 66 L66 92" {...traco(t(22, 28), cor, 3)} />
+        <circle cx="45" cy="20" r="1.8" fill={cor} opacity={t(10, 12)} /><circle cx="56" cy="20" r="1.8" fill={cor} opacity={t(10, 12)} />
+        <path d="M43 28 Q50 34 57 28" {...traco(t(10, 16), COR.vermelho, 2.4)} />
+      </svg>
+    </div>
+    {fala && <div style={{position: 'absolute', left: 540 - 330, top: y - tam / 2 - 160 - pulo, width: 660, textAlign: 'center', transform: `scale(${Math.max(0.01, pb)}) rotate(${-3 + (1 - pb) * 10}deg)`, transformOrigin: '50% 100%'}}>
+      <div style={{display: 'inline-block', background: COR.papel, border: `7px solid ${COR.tinta}`, borderRadius: '50px 60px 55px 45px', padding: '14px 44px', fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: caber(fala, 120, 560, FONTE_TEXTO, 700, 0), color: COR.tinta, filter: ferver(f), whiteSpace: 'nowrap'}}>{fala}</div>
+    </div>}
+  </>;
+};

package/kits/rabisco/elementos/Camera.tsx

@@ -0,0 +1,21 @@
+// Camera: deriva constante por baixo de tudo e um soco em cada batida. O quadro nunca fica parado.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {q} from './base';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  let z = 1.015 + 0.008 * Math.sin(f / 60), dx = Math.sin(f / 31) * 8, dy = Math.cos(f / 43) * 6;
+  let rot = Math.sin(f / 71) * 0.003;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += 0.02 * d; dx += 12 * d * Math.sin((f - h) * 2.7 + h); dy += 12 * d * Math.cos((f - h) * 3.3 + h); rot += 0.003 * 0.8 * d * Math.sin((f - h) * 2 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(q(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/rabisco/elementos/CartaoRabiscado.tsx

@@ -0,0 +1,27 @@
+// CartaoRabiscado: moldura torta desenhada a caneta azul (dois traços, como quem passa duas vezes), preenchida com hachuras de marca-texto,
+// com o texto grande escrito dentro em Permanent Marker. Serve de selo de data ou oferta.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+import {ferver, traco} from './traco';
+
+export type CartaoRabiscadoProps = {texto: string; sub?: string; inicio?: number; y?: number; tamanho?: number; largura?: number; altura?: number};
+export const CartaoRabiscado: React.FC<CartaoRabiscadoProps> = ({texto, sub, inicio = 0, y = 740, tamanho = 300, largura = 760, altura = 700}) => {
+  const f = useF() - inicio;
+  const linhas = texto.split('\n');
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, largura - 160, FONTE_TITULO, 400, 0)));
+  const hach = seg(f, 10, 24);
+  const pt = mola(seg(f, 12, 22), 1.3);
+  const ps = mola(seg(f, 22, 32), 1.8);
+  return <div style={{position: 'absolute', left: (1080 - largura) / 2, top: y - altura / 2, width: largura, height: altura}}>
+    <svg width={largura} height={altura} viewBox={`0 0 ${largura} ${altura}`} style={{position: 'absolute', inset: 0, overflow: 'visible', filter: ferver(f)}}>
+      <defs><clipPath id="rb-cartao"><path d={`M30 24 L${largura - 20} 14 L${largura - 34} ${altura - 20} L16 ${altura - 30} Z`} /></clipPath></defs>
+      <g clipPath="url(#rb-cartao)" style={{mixBlendMode: 'multiply'}}>{Array.from({length: 22}).map((_, i) => <path key={i} d={`M-20 ${i * 40} L${largura + 20} ${i * 40 - 120}`} stroke={COR.marca} strokeWidth="26" opacity={hach > i / 22 ? 0.95 : 0} />)}</g>
+      <path d={`M30 24 L${largura - 20} 14 L${largura - 34} ${altura - 20} L16 ${altura - 30} Z`} {...traco(seg(f, 0, 12), COR.azul, 11)} />
+      <path d={`M16 40 L${largura - 6} 30 L${largura - 20} ${altura - 6} L30 ${altura - 14} Z`} {...traco(seg(f, 4, 16), COR.azul, 6)} />
+    </svg>
+    <div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', transform: `rotate(-3deg) scale(${Math.max(0.01, pt)})`}}>
+      {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE_TITULO, fontSize: tam, lineHeight: 1.0, color: COR.tinta, filter: ferver(f)}}>{l}</div>)}
+      {sub && <div style={{marginTop: 24, fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: caber(sub, 90, largura - 140, FONTE_TEXTO, 700, 0), color: COR.vermelho, transform: `scale(${Math.max(0.01, ps)})`}}>{sub}</div>}
+    </div>
+  </div>;
+};

package/kits/rabisco/elementos/Cena.tsx

@@ -0,0 +1,36 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco), sai com movimento e sobrepõe 10 quadros com a próxima.
+// Dentro dela, useCurrentFrame() começa em 0 e useDuracaoCena() devolve a duração.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {mola, e5, seg, q} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'nenhuma';
+export const SOBREPOE = 10;
+
+const CenaCtx = createContext({duracao: 60});
+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 = q(useCurrentFrame());
+  const en = entrada === 'nenhuma' ? 0 : 1 - mola(seg(f, 0, 12));
+  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 * 600}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 600}px) `;
+  tf += `translateY(${-xo * 260}px)`;
+  const blur = (en * 0 + xo * 0);
+  return <AbsoluteFill style={{transform: tf, opacity: Math.max(0, (1 - Math.max(0, en) * 0.9) * (1 - xo)), 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/rabisco/elementos/Fundo.tsx

@@ -0,0 +1,17 @@
+// Fundo: folha de caderno: papel branco quente com pautas azul-claras fracas, margem vermelha, furos de espiral à esquerda e os 4 filtros
+// SVG de "fervura" (`rb-0..3`) que os elementos usam para o traço tremer a cada 2 quadros.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR, useF} from './base';
+
+export const Fundo: React.FC = () => {
+  const f = useF();
+  return <AbsoluteFill style={{background: COR.papel}}>
+    <svg width="0" height="0" style={{position: 'absolute'}}>
+      {[0, 1, 2, 3].map((s) => <filter key={s} id={`rb-${s}`} x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.035" numOctaves="2" seed={s * 7 + 2} result="n" /><feDisplacementMap in="SourceGraphic" in2="n" scale="7" /></filter>)}
+    </svg>
+    <AbsoluteFill style={{backgroundImage: `repeating-linear-gradient(180deg, transparent 0 71px, ${COR.linha} 71px 73px)`, backgroundPosition: `0 ${Math.sin(f / 40) * 3}px`, opacity: 0.8}} />
+    <div style={{position: 'absolute', left: 78, top: 0, width: 3, height: '100%', background: COR.vermelho, opacity: 0.35}} />
+    {Array.from({length: 7}).map((_, i) => <div key={i} style={{position: 'absolute', left: 18, top: 160 + i * 250, width: 34, height: 34, borderRadius: '50%', background: COR.cinza, opacity: 0.45, boxShadow: 'inset 0 3px 3px rgba(0,0,0,0.3)'}} />)}
+  </AbsoluteFill>;
+};

package/kits/rabisco/elementos/ListaRabiscada.tsx

@@ -0,0 +1,23 @@
+// ListaRabiscada: lista de tarefas de caderno. Cada item tem uma caixinha desenhada, o texto em Caveat escrito da esquerda para a direita
+// e um visto vermelho que risca a caixinha no fim. Itens entram um a um.
+import React from 'react';
+import {COR, FONTE_TEXTO, caber, larguraTexto, seg, useF} from './base';
+import {ferver, traco} from './traco';
+
+export type ListaRabiscadaProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; altura?: number};
+export const ListaRabiscada: React.FC<ListaRabiscadaProps> = ({itens, inicio = 0, intervalo = 11, y = 740, altura = 230}) => {
+  const f = useF() - inicio;
+  const tam = Math.min(...itens.map((t) => caber(t, 190, 620, FONTE_TEXTO, 700, 0)));
+  const topo = y - (itens.length * altura) / 2;
+  return <div style={{position: 'absolute', inset: 0, filter: ferver(f)}}>{itens.map((t, i) => {
+    const t0 = i * intervalo;
+    const w = larguraTexto(t, tam, FONTE_TEXTO, 700, 0);
+    return <div key={i} style={{position: 'absolute', left: 120, width: 860, top: topo + i * altura, height: altura}}>
+      <svg width="150" height="150" viewBox="0 0 100 100" style={{position: 'absolute', left: 0, top: altura / 2 - 75, overflow: 'visible'}}>
+        <path d="M12 14 L88 10 L90 88 L10 90 Z" {...traco(seg(f, t0, t0 + 6), COR.tinta, 6)} />
+        <path d="M20 52 L42 76 L96 4" {...traco(seg(f, t0 + 12, t0 + 18), COR.vermelho, 9)} />
+      </svg>
+      <div style={{position: 'absolute', left: 190, top: 0, height: altura, width: w + 30, display: 'flex', alignItems: 'center', fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: tam, color: COR.tinta, whiteSpace: 'nowrap', clipPath: `inset(-10% ${100 - seg(f, t0 + 4, t0 + 13) * 100}% -10% 0)`}}>{t}</div>
+    </div>;
+  })}</div>;
+};

package/kits/rabisco/elementos/Montagem.tsx

@@ -0,0 +1,55 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, só com os elementos do kit.
+// Não decide estética: põe Fundo + Camera + Cenas + Overlay + sons onde o plano mandou. Formato: exemplos/plano.json.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {Fundo} from './Fundo';
+import {Overlay} from './Overlay';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {COR} from './base';
+import {AssinaturaMarca} from './AssinaturaMarca';
+import {Bonequinho} from './Bonequinho';
+import {CartaoRabiscado} from './CartaoRabiscado';
+import {ListaRabiscada} from './ListaRabiscada';
+import {TituloRabisco} from './TituloRabisco';
+import {TracoDesenhando} from './TracoDesenhando';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {AssinaturaMarca, Bonequinho, CartaoRabiscado, ListaRabiscada, TituloRabisco, TracoDesenhando};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada;
+  camadas: Camada[];
+  sons?: {som: NomeSom; em: number; volume?: number}[];
+  socos?: number[];
+};
+export type Plano = {kit: string; duracao: number; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
+
+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: "#FBF8F0"}}>
+    <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(`rabisco: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    <Overlay />
+    {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/rabisco/elementos/Overlay.tsx

@@ -0,0 +1,8 @@
+// Overlay: luz suave de mesa e uma sombra de dobra na borda direita da folha. Leve e fixo: o traço é que treme.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+
+export const Overlay: React.FC = () => <AbsoluteFill style={{pointerEvents: 'none'}}>
+  <div style={{position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 45% 40%, transparent 60%, rgba(80,60,30,0.14) 100%)'}} />
+  <div style={{position: 'absolute', right: 0, top: 0, width: 36, height: '100%', background: 'linear-gradient(90deg, transparent, rgba(80,60,30,0.10))'}} />
+</AbsoluteFill>;

package/kits/rabisco/elementos/Som.tsx

@@ -0,0 +1,30 @@
+// Som: efeitos e trilha do kit (sintetizados no MotionCraft, pacote organic-wood). Um som por movimento, 1–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 tick from '../assets/sons/tick.mp3';
+import trilha from '../assets/trilha/trilha.mp3';
+
+export const SONS = {'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, tick} as const;
+export type NomeSom = keyof typeof SONS;
+const VOLUME: Record<NomeSom, number> = {'whoosh-entra': 0.9, 'whoosh-sai': 0.8, swoosh: 1, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.9, subida: 0.7, assinatura: 0.9, tick: 0.6};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+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; saida?: number};
+export const Trilha: React.FC<TrilhaProps> = ({volume = 0.5, 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/rabisco/elementos/TituloRabisco.tsx

@@ -0,0 +1,28 @@
+// TituloRabisco: 1 a 3 linhas em Permanent Marker, escritas da esquerda para a direita (máscara que abre) com o traço tremendo.
+// A linha `destaque` ganha uma faixa de marca-texto amarela que passa por trás e um sublinhado de caneta azul que se desenha.
+import React from 'react';
+import {COR, FONTE_TITULO, LARGURA_UTIL, caber, larguraTexto, mola, seg, useF} from './base';
+import {ferver, traco} from './traco';
+
+export type TituloRabiscoProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; destaque?: number; fim?: number};
+export const TituloRabisco: React.FC<TituloRabiscoProps> = ({linhas, inicio = 0, intervalo = 10, y = 720, tamanho = 200, destaque = 1, fim}) => {
+  const f = useF();
+  const tams = linhas.map((l) => caber(l, tamanho, LARGURA_UTIL - 20, FONTE_TITULO, 400, 0));
+  const alts = tams.map((t) => t * 1.3);
+  const total = alts.reduce((a, b) => a + b, 0);
+  let acc = y - total / 2;
+  return <>{linhas.map((l, i) => {
+    const topo = acc; acc += alts[i];
+    const t0 = inicio + i * intervalo;
+    const esc = seg(f, t0, t0 + 9);
+    const w = larguraTexto(l, tams[i], FONTE_TITULO, 400, 0);
+    const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 8);
+    const hl = i === destaque ? mola(seg(f, t0 + 8, t0 + 18), 1.2) : 0;
+    const x0 = (1080 - w) / 2;
+    return <div key={i} style={{position: 'absolute', left: 0, right: 0, top: topo, height: alts[i], opacity: 1 - sai, transform: `translateY(${sai * -300}px) rotate(${(i % 2 ? 1.2 : -1.2)}deg)`}}>
+      {i === destaque && <div style={{position: 'absolute', left: x0 - 18, top: alts[i] * 0.22, width: (w + 36) * hl, height: alts[i] * 0.62, background: COR.marca, mixBlendMode: 'multiply', transform: 'rotate(-1.5deg)', borderRadius: 8}} />}
+      <div style={{position: 'absolute', left: x0, top: 0, width: w + 20, height: alts[i], filter: ferver(f), clipPath: `inset(-10% ${100 - esc * 100}% -10% -2%)`, fontFamily: FONTE_TITULO, fontSize: tams[i], lineHeight: `${alts[i]}px`, color: COR.tinta, whiteSpace: 'nowrap'}}>{l}</div>
+      {i === destaque && <svg width={w + 80} height={60} style={{position: 'absolute', left: x0 - 30, top: alts[i] * 0.92, overflow: 'visible', filter: ferver(f)}}><path d={`M6 30 C${w * 0.25} 6 ${w * 0.5} 52 ${w * 0.75} 22 S${w + 50} 40 ${w + 60} 18`} {...traco(seg(f, t0 + 12, t0 + 24), COR.azul, 9)} /></svg>}
+    </div>;
+  })}</>;
+};