primocode 10.17.1 → 10.19.0

package/kits/quadro-giz/assets/fontes/OFL-patrick-hand.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Patrick Hand 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/quadro-giz/assets/fontes/OFL-schoolbell.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Schoolbell 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/quadro-giz/elementos/ApagadorVarrendo.tsx

@@ -0,0 +1,32 @@
+// ApagadorVarrendo: uma palavra escrita a giz que é apagada por um apagador de feltro que varre da esquerda para a direita.
+// Sobra uma mancha clara e poeira de giz subindo. Serve de "problema": a palavra errada some.
+import React from 'react';
+import {COR, FONTE_TITULO, caber, larguraTexto, mola, ruido, seg, useF} from './base';
+import {giz} from './traco';
+
+export type ApagadorVarrendoProps = {texto: string; inicio?: number; apagarEm?: number; y?: number; tamanho?: number; cor?: string};
+export const ApagadorVarrendo: React.FC<ApagadorVarrendoProps> = ({texto, inicio = 0, apagarEm = 20, y = 720, tamanho = 260, cor = COR.rosa}) => {
+  const f = useF() - inicio;
+  const tam = caber(texto, tamanho, 860, FONTE_TITULO, 400, 0);
+  const w = larguraTexto(texto, tam, FONTE_TITULO, 400, 0);
+  const x0 = (1080 - w) / 2;
+  const esc = seg(f, 0, 10);
+  const prog = seg(f, apagarEm, apagarEm + 18);
+  const ex = x0 - 140 + prog * (w + 280);
+  const p = mola(seg(f, apagarEm - 8, apagarEm), 1.6);
+  const apagado = Math.max(0, Math.min(w, ex + 60 - x0));
+  return <>
+    <div style={{position: 'absolute', left: x0 - 10, top: y - tam * 0.7, width: w + 30, height: tam * 1.4, filter: giz(f), clipPath: `inset(-10% ${100 - esc * 100}% -10% ${(apagado / (w + 30)) * 100}%)`, fontFamily: FONTE_TITULO, fontSize: tam, lineHeight: `${tam * 1.4}px`, color: cor, whiteSpace: 'nowrap', paddingLeft: 10, textDecoration: prog === 0 && f > apagarEm - 8 ? 'line-through' : 'none'}}>{texto}</div>
+    <div style={{position: 'absolute', left: x0 - 30, top: y - tam * 0.6, width: Math.max(0, apagado + 30), height: tam * 1.2, background: 'linear-gradient(90deg, rgba(244,241,232,0.2), rgba(244,241,232,0.08))', filter: 'blur(14px)', opacity: prog > 0 ? 1 - seg(f, apagarEm + 20, apagarEm + 30) * 0.8 : 0}} />
+    {Array.from({length: 16}).map((_, i) => {
+      const t = seg(f, apagarEm + i * 0.8, apagarEm + 24);
+      if (prog === 0) return null;
+      const px = x0 + ruido(i + 3) * apagado;
+      return <div key={i} style={{position: 'absolute', left: px, top: y + (ruido(i) - 0.5) * tam * 0.6 - t * 120, width: 12 + ruido(i + 9) * 18, height: 12 + ruido(i + 9) * 18, borderRadius: '50%', background: COR.branco, opacity: (1 - t) * 0.5, filter: 'blur(5px)'}} />;
+    })}
+    <div style={{position: 'absolute', left: ex, top: y - tam * 0.45 - (1 - p) * 500, width: 190, height: tam * 0.9, transform: `rotate(${-6 + prog * 12}deg)`, filter: 'drop-shadow(0 12px 8px rgba(0,0,0,0.45))'}}>
+      <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: '38%', background: '#8B5E3C', borderRadius: '18px 18px 4px 4px'}} />
+      <div style={{position: 'absolute', left: 0, right: 0, top: '34%', bottom: 0, background: '#D9CDB0', borderRadius: '4px 4px 22px 22px', backgroundImage: 'repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 3px, transparent 3px 12px)'}} />
+    </div>
+  </>;
+};

package/kits/quadro-giz/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,20 @@
+// AssinaturaMarca: o nome escrito grande a giz branco com uma coroa de estrelas desenhada em cima, detalhe em amarelo e o endereço numa moldura de giz. Sempre a última cena.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, larguraTexto, mola, seg, useF} from './base';
+import {DESENHOS} from './DesenhoGiz';
+import {giz, 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, 240, 800, FONTE_TITULO, 400, 0);
+  const w = larguraTexto(nome, tam, FONTE_TITULO, 400, 0);
+  const esc = seg(f, 6, 18);
+  const pe = mola(seg(f, 20, 30), 1.6);
+  return <>
+    <svg viewBox="-8 -8 116 116" width={240} height={240} style={{position: 'absolute', left: 420, top: 330, overflow: 'visible', filter: giz(f)}}>{DESENHOS.estrela.tracos.map(([p, c], i) => <path key={i} d={p} {...traco(seg(f, 0, 14), c, 4)} />)}</svg>
+    <div style={{position: 'absolute', left: (1080 - w) / 2, top: 640, width: w + 20, height: tam * 1.3, filter: giz(f), clipPath: `inset(-10% ${100 - esc * 100}% -10% 0)`, fontFamily: FONTE_TITULO, fontSize: tam, lineHeight: `${tam * 1.3}px`, color: COR.branco, whiteSpace: 'nowrap'}}>{nome}</div>
+    {detalhe && <div style={{position: 'absolute', left: 96, right: 96, top: 640 + tam * 1.3 + 30, textAlign: 'center', fontFamily: FONTE_TEXTO, fontSize: caber(detalhe, 90, 888, FONTE_TEXTO, 400, 0), color: COR.amarelo, opacity: pe, filter: giz(f)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 0, right: 0, top: 640 + tam * 1.3 + 170, display: 'flex', justifyContent: 'center', opacity: f > 20 ? 1 : 0, filter: giz(f)}}><div style={{border: `6px solid ${COR.rosa}`, borderRadius: '24px 34px 28px 38px', padding: '8px 44px', fontFamily: FONTE_TEXTO, fontSize: 76, color: COR.rosa, transform: `rotate(-2deg) scale(${Math.max(0.01, pe)})`}}>{endereco}</div></div>}
+  </>;
+};

package/kits/quadro-giz/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/quadro-giz/elementos/CartaoGiz.tsx

@@ -0,0 +1,25 @@
+// CartaoGiz: moldura de giz com cantos reforçados (quatro colchetes) desenhada traço a traço, com a data enorme em amarelo no meio e a legenda em rosa embaixo.
+// O texto é escrito depois que a moldura fecha.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+import {giz, traco} from './traco';
+
+export type CartaoGizProps = {texto: string; sub?: string; inicio?: number; y?: number; tamanho?: number; largura?: number; altura?: number};
+export const CartaoGiz: React.FC<CartaoGizProps> = ({texto, sub, inicio = 0, y = 740, tamanho = 300, largura = 800, 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 esc = seg(f, 10, 24);
+  const ps = mola(seg(f, 22, 32), 1.8);
+  const L = largura, A = altura;
+  return <div style={{position: 'absolute', left: (1080 - L) / 2, top: y - A / 2, width: L, height: A}}>
+    <svg width={L} height={A} viewBox={`0 0 ${L} ${A}`} style={{position: 'absolute', inset: 0, overflow: 'visible', filter: giz(f)}}>
+      <path d={`M20 30 L${L - 12} 18 L${L - 24} ${A - 14} L10 ${A - 24} Z`} {...traco(seg(f, 0, 14), COR.branco, 8)} />
+      {[[16, 24, 1, 1], [L - 10, 14, -1, 1], [L - 22, A - 10, -1, -1], [8, A - 20, 1, -1]].map(([cx, cy, sx, sy], i) => <path key={i} d={`M${cx} ${cy + sy * 90} L${cx} ${cy} L${cx + sx * 90} ${cy}`} {...traco(seg(f, 8 + i * 2, 18 + i * 2), COR.amarelo, 14)} />)}
+    </svg>
+    <div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', filter: giz(f), clipPath: `inset(0 ${100 - esc * 100}% 0 0)`}}>
+      {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE_TITULO, fontSize: tam, lineHeight: 1, color: COR.amarelo}}>{l}</div>)}
+      {sub && <div style={{marginTop: 22, fontFamily: FONTE_TEXTO, fontSize: caber(sub, 90, L - 160, FONTE_TEXTO, 400, 0), color: COR.rosa, opacity: ps}}>{sub}</div>}
+    </div>
+  </div>;
+};

package/kits/quadro-giz/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/quadro-giz/elementos/ContaNoQuadro.tsx

@@ -0,0 +1,34 @@
+// ContaNoQuadro: uma conta ou frase curta escrita a giz, termo por termo (cada um numa cor de giz), com o resultado circulado por um laço
+// desenhado e uma seta apontando para ele. `termos` é a lista na ordem; o último é o resultado e leva o círculo.
+import React from 'react';
+import {COR, FONTE_TITULO, LARGURA_UTIL, larguraTexto, mola, seg, useF} from './base';
+import {giz, traco} from './traco';
+
+export type ContaNoQuadroProps = {termos: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; cores?: string[]};
+export const ContaNoQuadro: React.FC<ContaNoQuadroProps> = ({termos, inicio = 0, intervalo = 9, y = 720, tamanho = 280, cores = [COR.branco, COR.amarelo, COR.branco, COR.azul, COR.rosa]}) => {
+  const f = useF() - inicio;
+  const gap = 0.34;
+  const base = termos.map((t) => larguraTexto(t, tamanho, FONTE_TITULO, 400, 0));
+  const total = base.reduce((a, b) => a + b, 0) + gap * tamanho * (termos.length - 1);
+  const e = Math.min(1, (LARGURA_UTIL - 40) / total);
+  const tam = Math.floor(tamanho * e);
+  const larg = base.map((b) => b * e);
+  const gp = gap * tam;
+  const tt = larg.reduce((a, b) => a + b, 0) + gp * (termos.length - 1);
+  let x = (1080 - tt) / 2;
+  const ult = termos.length - 1;
+  const ult0 = ult * intervalo;
+  const xr = (1080 - tt) / 2 + tt - larg[ult];
+  return <>
+    {termos.map((t, i) => {
+      const x0 = x; x += larg[i] + gp;
+      const t0 = i * intervalo;
+      const esc = seg(f, t0, t0 + 8);
+      const p = mola(seg(f, t0, t0 + 10), 1.6);
+      return <div key={i} style={{position: 'absolute', left: x0, top: y - tam * 0.62, width: larg[i] + 20, height: tam * 1.3, filter: giz(f), clipPath: `inset(-10% ${100 - esc * 100}% -10% -2%)`, fontFamily: FONTE_TITULO, fontSize: tam, lineHeight: `${tam * 1.3}px`, color: cores[i % cores.length], whiteSpace: 'nowrap', transform: `translateY(${(1 - p) * -40}px)`}}>{t}</div>;
+    })}
+    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible', filter: giz(f)}}>
+      <path d={`M${xr - 26} ${y + 10} C${xr - 30} ${y - tam * 0.62} ${xr + larg[ult] + 30} ${y - tam * 0.66} ${xr + larg[ult] + 26} ${y + 6} C${xr + larg[ult] + 22} ${y + tam * 0.62} ${xr - 34} ${y + tam * 0.68} ${xr - 20} ${y - 20}`} {...traco(seg(f, ult0 + 10, ult0 + 24), COR.amarelo, 8)} />
+    </svg>
+  </>;
+};

package/kits/quadro-giz/elementos/DesenhoGiz.tsx

@@ -0,0 +1,29 @@
+// DesenhoGiz: o herói. Desenho grande a giz (maçã, livro, lâmpada, estrela, planeta, seta) desenhado traço por traço, cada traço de uma cor de giz,
+// com o corpo preenchido por hachura de giz colorido no fim. Ocupa ~700 px.
+import React from 'react';
+import {COR, mola, seg, useF} from './base';
+import {giz, traco} from './traco';
+
+type Desenho = {tracos: [string, string][]; hachura?: string};
+export const DESENHOS: Record<string, Desenho> = {
+  maca: {tracos: [['M50 30 C30 18 8 30 12 58 C16 84 34 96 50 88 C66 96 84 84 88 58 C92 30 70 18 50 30', COR.rosa], ['M50 30 C50 20 52 14 58 8', COR.branco], ['M54 22 C66 8 82 10 84 22 C72 30 60 28 54 22', COR.verde]], hachura: 'M50 34 C32 24 14 34 18 58 C22 80 36 90 50 84 C64 90 78 80 82 58 C86 34 68 24 50 34'},
+  livro: {tracos: [['M50 24 C36 14 18 14 6 20 L6 80 C18 74 36 74 50 84 C64 74 82 74 94 80 L94 20 C82 14 64 14 50 24 Z', COR.branco], ['M50 24 L50 84', COR.amarelo], ['M14 34 C24 30 34 30 42 34', COR.azul], ['M14 46 C24 42 34 42 42 46', COR.azul], ['M58 34 C66 30 76 30 86 34', COR.azul], ['M58 46 C66 42 76 42 86 46', COR.azul]]},
+  lampada: {tracos: [['M50 12 C24 12 14 40 28 58 C34 66 36 70 36 78 L64 78 C64 70 66 66 72 58 C86 40 76 12 50 12', COR.amarelo], ['M38 87 L62 87', COR.branco], ['M42 95 L58 95', COR.branco], ['M10 22 L19 30', COR.amarelo], ['M90 22 L81 30', COR.amarelo], ['M3 52 L14 52', COR.amarelo], ['M97 52 L86 52', COR.amarelo]], hachura: 'M50 16 C28 16 20 40 32 56 C38 64 40 68 40 76 L60 76 C60 68 62 64 68 56 C80 40 72 16 50 16'},
+  estrela: {tracos: [['M50 6 L61 38 L95 40 L68 61 L78 94 L50 75 L22 94 L32 61 L5 40 L39 38 Z', COR.amarelo]], hachura: 'M50 14 L59 40 L86 42 L65 58 L73 84 L50 70 L27 84 L35 58 L14 42 L41 40 Z'},
+  planeta: {tracos: [['M50 20 A30 30 0 1 0 50.1 20', COR.azul], ['M6 62 C6 44 94 28 94 46 C94 64 6 80 6 62', COR.rosa]], hachura: 'M50 26 A24 24 0 1 0 50.1 26'},
+  seta: {tracos: [['M8 84 C14 40 44 14 86 36', COR.branco], ['M64 14 L88 38 L58 54', COR.amarelo]]},
+};
+export type DesenhoGizProps = {nome?: keyof typeof DESENHOS | string; x?: number; y?: number; tam?: number; inicio?: number; duracao?: number};
+export const DesenhoGiz: React.FC<DesenhoGizProps> = ({nome = 'maca', x = 540, y = 720, tam = 740, inicio = 0, duracao = 30}) => {
+  const f = useF() - inicio;
+  const d = DESENHOS[nome] ?? DESENHOS.maca;
+  const n = d.tracos.length;
+  const pf = mola(seg(f, duracao - 2, duracao + 12), 1.2);
+  const cor = d.tracos[0][1];
+  return <div style={{position: 'absolute', left: x - tam / 2, top: y - tam / 2, width: tam, height: tam, transform: `rotate(${Math.sin(f / 20) * 1.2}deg)`}}>
+    <svg viewBox="-8 -8 116 116" width={tam} height={tam} style={{overflow: 'visible', filter: giz(f)}}>
+      {d.hachura ? <><defs><clipPath id={`gz-h-${nome}`}><path d={d.hachura} /></clipPath></defs><g clipPath={`url(#gz-h-${nome})`}>{Array.from({length: 16}).map((_, i) => <path key={i} d={`M-10 ${i * 8} L110 ${i * 8 - 40}`} stroke={cor} strokeWidth="3.4" opacity={pf > i / 16 ? 0.55 : 0} />)}</g></> : null}
+      {d.tracos.map(([p, c], i) => <path key={i} d={p} {...traco(seg(f, (i / n) * duracao, ((i + 1) / n) * duracao + 3), c, 3.6)} />)}
+    </svg>
+  </div>;
+};

package/kits/quadro-giz/elementos/Fundo.tsx

@@ -0,0 +1,21 @@
+// Fundo: o quadro verde: verde-escuro com manchas largas e claras de apagador e poeira, e os 4 filtros SVG de giz (`gz-0..3`) que os elementos usam
+// para dar borda áspera e falhas de pigmento ao traço (a semente troca 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: `radial-gradient(90% 60% at 50% 40%, ${COR.quadroClaro}, ${COR.quadro} 70%)`}}>
+    <svg width="0" height="0" style={{position: 'absolute'}}>
+      {[0, 1, 2, 3].map((s) => <filter key={s} id={`gz-${s}`} x="-5%" y="-5%" width="110%" height="110%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" seed={s * 5 + 1} result="d" />
+        <feDisplacementMap in="SourceGraphic" in2="d" scale="5" result="r" />
+        <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed={s * 11 + 3} result="g" />
+        <feColorMatrix in="g" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  3 0 0 0 -0.55" result="m" />
+        <feComposite in="r" in2="m" operator="in" />
+      </filter>)}
+    </svg>
+    {[[120, 380, 760, 150, -8], [300, 1100, 820, 170, 5], [-80, 1500, 700, 130, -4]].map(([x, y, w, h, r], i) => <div key={i} style={{position: 'absolute', left: x + Math.sin(f / 60 + i) * 14, top: y, width: w, height: h, background: 'rgba(244,241,232,0.07)', borderRadius: 100, filter: 'blur(26px)', transform: `rotate(${r}deg)`}} />)}
+  </AbsoluteFill>;
+};

package/kits/quadro-giz/elementos/ListaGiz.tsx

@@ -0,0 +1,21 @@
+// ListaGiz: lista de aula no quadro: número com parêntese ("1)"), item escrito a giz e uma estrela de giz desenhada no fim de cada linha.
+// Cada item numa cor de giz; entram um a um escrevendo da esquerda.
+import React from 'react';
+import {COR, FONTE_TITULO, FONTE_TEXTO, caber, larguraTexto, seg, useF} from './base';
+import {giz, traco} from './traco';
+
+export type ListaGizProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; altura?: number; cores?: string[]};
+export const ListaGiz: React.FC<ListaGizProps> = ({itens, inicio = 0, intervalo = 11, y = 740, altura = 240, cores = [COR.branco, COR.amarelo, COR.rosa, COR.azul]}) => {
+  const f = useF() - inicio;
+  const tam = Math.min(...itens.map((t) => caber(t, 170, 560, FONTE_TITULO, 400, 0)));
+  const topo = y - (itens.length * altura) / 2;
+  return <div style={{position: 'absolute', inset: 0, filter: giz(f)}}>{itens.map((t, i) => {
+    const t0 = i * intervalo;
+    const w = larguraTexto(t, tam, FONTE_TITULO, 400, 0);
+    return <div key={i} style={{position: 'absolute', left: 120, width: 860, top: topo + i * altura, height: altura}}>
+      <div style={{position: 'absolute', left: 0, top: 0, height: altura, display: 'flex', alignItems: 'center', fontFamily: FONTE_TEXTO, fontSize: 120, color: COR.amarelo, clipPath: `inset(0 ${100 - seg(f, t0, t0 + 4) * 100}% 0 0)`}}>{i + 1})</div>
+      <div style={{position: 'absolute', left: 150, top: 0, height: altura, width: w + 30, display: 'flex', alignItems: 'center', fontFamily: FONTE_TITULO, fontSize: tam, color: cores[i % cores.length], whiteSpace: 'nowrap', clipPath: `inset(-10% ${100 - seg(f, t0 + 3, t0 + 12) * 100}% -10% 0)`}}>{t}</div>
+      <svg viewBox="0 0 100 100" width="110" height="110" style={{position: 'absolute', left: 150 + w + 40, top: altura / 2 - 55, overflow: 'visible'}}><path d="M50 6 L61 38 L95 40 L68 61 L78 94 L50 75 L22 94 L32 61 L5 40 L39 38 Z" {...traco(seg(f, t0 + 12, t0 + 20), COR.amarelo, 6)} /></svg>
+    </div>;
+  })}</div>;
+};

package/kits/quadro-giz/elementos/Montagem.tsx

@@ -0,0 +1,56 @@
+// 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 {ApagadorVarrendo} from './ApagadorVarrendo';
+import {AssinaturaMarca} from './AssinaturaMarca';
+import {CartaoGiz} from './CartaoGiz';
+import {ContaNoQuadro} from './ContaNoQuadro';
+import {DesenhoGiz} from './DesenhoGiz';
+import {ListaGiz} from './ListaGiz';
+import {TituloGiz} from './TituloGiz';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {ApagadorVarrendo, AssinaturaMarca, CartaoGiz, ContaNoQuadro, DesenhoGiz, ListaGiz, TituloGiz};
+
+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: "#2E4A3E"}}>
+    <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(`quadro-giz: 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/quadro-giz/elementos/Overlay.tsx

@@ -0,0 +1,12 @@
+// Overlay: a moldura de madeira do quadro (borda de 36 px com veio) e a bandeja de giz no pé com um giz e um apagador. Repete em todo plano.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+
+export const Overlay: React.FC = () => <AbsoluteFill style={{pointerEvents: 'none'}}>
+  <div style={{position: 'absolute', inset: 0, boxShadow: `inset 0 0 0 38px ${COR.madeira}, inset 0 0 0 44px ${COR.madeiraEscura}, inset 0 0 90px rgba(0,0,0,0.35)`}} />
+  <div style={{position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0 3px, transparent 3px 19px)', clipPath: 'polygon(0 0, 100% 0, 100% 38px, 0 38px)'}} />
+  <div style={{position: 'absolute', left: 0, right: 0, top: 1838, height: 82, background: COR.madeira, boxShadow: `inset 0 6px 0 ${COR.madeiraEscura}`}} />
+  <div style={{position: 'absolute', left: 120, top: 1812, width: 150, height: 26, background: COR.branco, borderRadius: 8, transform: 'rotate(-4deg)'}} />
+  <div style={{position: 'absolute', left: 760, top: 1792, width: 190, height: 46, background: '#D9CDB0', borderRadius: 8, borderTop: '14px solid #5b3b22'}} />
+</AbsoluteFill>;

package/kits/quadro-giz/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/quadro-giz/elementos/TituloGiz.tsx

@@ -0,0 +1,29 @@
+// TituloGiz: 1 a 3 linhas em Schoolbell escritas a giz, da esquerda para a direita, cada linha de uma cor de giz. A linha `destaque`
+// ganha um sublinhado duplo desenhado e uma estrela de giz no fim. O traço tem borda áspera e falhas de pigmento (filtro gz-*).
+import React from 'react';
+import {COR, FONTE_TITULO, LARGURA_UTIL, caber, larguraTexto, mola, seg, useF} from './base';
+import {giz, traco} from './traco';
+
+export type TituloGizProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; destaque?: number; cores?: string[]; fim?: number};
+export const TituloGiz: React.FC<TituloGizProps> = ({linhas, inicio = 0, intervalo = 11, y = 720, tamanho = 200, destaque = 1, cores = [COR.branco, COR.amarelo, COR.rosa], 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.35);
+  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 + 11);
+    const w = larguraTexto(l, tams[i], FONTE_TITULO, 400, 0);
+    const x0 = (1080 - w) / 2;
+    const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 8);
+    return <div key={i} style={{position: 'absolute', left: 0, right: 0, top: topo, height: alts[i], opacity: 1 - sai}}>
+      <div style={{position: 'absolute', left: x0, top: 0, width: w + 24, height: alts[i], filter: giz(f), clipPath: `inset(-10% ${100 - esc * 100}% -10% -2%)`, fontFamily: FONTE_TITULO, fontSize: tams[i], lineHeight: `${alts[i]}px`, color: cores[i % cores.length], whiteSpace: 'nowrap', transform: `rotate(${i % 2 ? 1 : -1}deg)`}}>{l}</div>
+      {i === destaque && <svg width={w + 140} height={80} style={{position: 'absolute', left: x0 - 20, top: alts[i] * 0.9, overflow: 'visible', filter: giz(f)}}>
+        <path d={`M6 30 C${w * 0.3} 10 ${w * 0.6} 38 ${w + 10} 16`} {...traco(seg(f, t0 + 10, t0 + 20), COR.branco, 8)} />
+        <path d={`M20 58 C${w * 0.3} 40 ${w * 0.6} 66 ${w - 10} 44`} {...traco(seg(f, t0 + 14, t0 + 24), COR.branco, 6)} />
+      </svg>}
+    </div>;
+  })}</>;
+};