primocode 10.17.1 → 10.19.0

package/kits/risografia/assets/fontes/OFL-space-mono-700.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Space Mono 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/risografia/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,21 @@
+// AssinaturaMarca: logo de dois círculos que se cruzam (rosa e azul, o cruzamento sai roxo) com o nome em Bricolage 800, detalhe e endereço em Space Mono.
+// As chapas entram fora de registro e assentam. Sempre a última cena.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+
+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 p = mola(seg(f, 0, 12), 1.8), q = mola(seg(f, 5, 17), 1.8);
+  const tam = caber(nome, 200, 860, FONTE_TITULO, 800, -0.04);
+  const pn = mola(seg(f, 12, 24), 1.6);
+  const S = 380;
+  return <>
+    <div style={{position: 'absolute', left: 540 - S + 60 + (1 - p) * -700, top: 330, width: S, height: S, borderRadius: '50%', background: COR.rosa, mixBlendMode: 'multiply', transform: `scale(${0.6 + p * 0.4})`}} />
+    <div style={{position: 'absolute', left: 540 - 60 + (1 - q) * 700, top: 330 + 40, width: S, height: S, borderRadius: '50%', background: COR.azul, mixBlendMode: 'multiply', transform: `scale(${0.6 + q * 0.4})`}} />
+    <div style={{position: 'absolute', left: 0, right: 0, top: 830, textAlign: 'center', fontFamily: FONTE_TITULO, fontWeight: 800, fontSize: tam, letterSpacing: '-0.04em', lineHeight: 1.1, color: COR.azul, mixBlendMode: 'multiply', opacity: pn, transform: `translateX(${(1 - pn) * 60}px)`, whiteSpace: 'nowrap'}}>{nome}</div>
+    <div style={{position: 'absolute', left: 0, right: 0, top: 830, textAlign: 'center', fontFamily: FONTE_TITULO, fontWeight: 800, fontSize: tam, letterSpacing: '-0.04em', lineHeight: 1.1, color: COR.rosa, mixBlendMode: 'multiply', opacity: pn, transform: `translate(${-8 - (1 - pn) * 60}px, -5px)`, whiteSpace: 'nowrap'}}>{nome}</div>
+    {detalhe && <div style={{position: 'absolute', left: 96, right: 96, top: 830 + tam * 1.15 + 30, textAlign: 'center', fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: caber(detalhe.toUpperCase(), 54, 888, FONTE_TEXTO, 700, 0.05), letterSpacing: 4, color: COR.azul, opacity: pn}}>{detalhe.toUpperCase()}</div>}
+    {endereco && <div style={{position: 'absolute', left: 0, right: 0, top: 830 + tam * 1.15 + 130, display: 'flex', justifyContent: 'center', opacity: f > 20 ? 1 : 0}}><div style={{background: COR.azul, color: COR.papel, fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: 56, padding: '10px 44px', letterSpacing: 2, transform: `rotate(-2deg) translateY(${(1 - mola(seg(f, 20, 28))) * 60}px)`}}>{endereco}</div></div>}
+  </>;
+};

package/kits/risografia/elementos/BolaReticula.tsx

@@ -0,0 +1,26 @@
+// BolaReticula: o herói. Dois círculos enormes preenchidos com retícula de pontos (halftone) que engrossam de um lado para o outro,
+// um em rosa e outro em azul, deslocados; onde se cruzam sai roxo. Entram de lados opostos e orbitam devagar, com o registro fora.
+import React from 'react';
+import {COR, mola, seg, useF} from './base';
+
+export type BolaReticulaProps = {inicio?: number; y?: number; diametro?: number};
+const reticula = (cor: string, ang: number, passo: number) => ({
+  backgroundImage: `radial-gradient(circle, ${cor} 0 38%, transparent 42%)`, backgroundSize: `${passo}px ${passo}px`,
+  WebkitMaskImage: `linear-gradient(${ang}deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 100%)`, maskImage: `linear-gradient(${ang}deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 100%)`,
+});
+export const BolaReticula: React.FC<BolaReticulaProps> = ({inicio = 0, y = 720, diametro = 640}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 14), 1.6), q = mola(seg(f, 5, 19), 1.6);
+  const orb = f / 22;
+  const d = diametro;
+  return <>
+    <div style={{position: 'absolute', left: 540 - d / 2 - 120 + Math.cos(orb) * 30 + (1 - p) * -900, top: y - d / 2 + Math.sin(orb) * 24, width: d, height: d, borderRadius: '50%', mixBlendMode: 'multiply', background: COR.rosa, opacity: 0.92, transform: `scale(${0.6 + p * 0.4})`}} />
+    <div style={{position: 'absolute', left: 540 - d / 2 + 140 - Math.cos(orb) * 30 + (1 - q) * 900, top: y - d / 2 + 80 - Math.sin(orb) * 24, width: d, height: d, borderRadius: '50%', mixBlendMode: 'multiply', overflow: 'hidden', transform: `scale(${0.6 + q * 0.4})`}}>
+      <div style={{position: 'absolute', inset: 0, background: COR.azul, opacity: 0.2}} />
+      <div style={{position: 'absolute', inset: 0, ...reticula(COR.azul, 160, 26)}} />
+    </div>
+    <div style={{position: 'absolute', left: 540 - d / 2 - 120 + Math.cos(orb) * 30 + (1 - p) * -900 + 9, top: y - d / 2 + Math.sin(orb) * 24 + 7, width: d, height: d, borderRadius: '50%', mixBlendMode: 'multiply', overflow: 'hidden', transform: `scale(${0.6 + p * 0.4})`}}>
+      <div style={{position: 'absolute', inset: 0, ...reticula(COR.rosaEscuro, 20, 20)}} />
+    </div>
+  </>;
+};

package/kits/risografia/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/risografia/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 += `translateX(${-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/risografia/elementos/FormaRiso.tsx

@@ -0,0 +1,24 @@
+// FormaRiso: formas simples impressas em duas tintas fora de registro (sol, estrela, onda, arco, listras). Apoio discreto: estoura, gira em passos e fica respirando.
+import React from 'react';
+import {COR, mola, seg, useF} from './base';
+
+export type FormaRisoProps = {nome?: 'sol' | 'estrela' | 'onda' | 'arco' | 'listras'; x?: number; y?: number; tam?: number; inicio?: number};
+const Forma: React.FC<{nome: string; cor: string; modo: 'cheio' | 'reticula'}> = ({nome, cor, modo}) => {
+  const fill = modo === 'cheio' ? cor : 'url(#ret-azul)';
+  switch (nome) {
+    case 'estrela': return <polygon points={Array.from({length: 10}).map((_, i) => { const r = i % 2 ? 22 : 48, a = (i / 10) * Math.PI * 2 - Math.PI / 2; return `${50 + Math.cos(a) * r},${52 + Math.sin(a) * r}`; }).join(' ')} fill={fill} />;
+    case 'onda': return <path d="M2 40 Q14 14 26 40 T50 40 T74 40 T98 40 M2 66 Q14 40 26 66 T50 66 T74 66 T98 66" stroke={modo === 'cheio' ? cor : COR.azul} strokeWidth="9" fill="none" strokeLinecap="round" />;
+    case 'arco': return <path d="M8 80 A42 42 0 0 1 92 80" stroke={modo === 'cheio' ? cor : COR.azul} strokeWidth="20" fill="none" />;
+    case 'listras': return <>{[0, 1, 2, 3, 4].map((i) => <rect key={i} x={8 + i * 19} y="10" width="11" height="80" fill={modo === 'cheio' ? cor : COR.azul} />)}</>;
+    default: return <><circle cx="50" cy="50" r="26" fill={fill} />{Array.from({length: 12}).map((_, i) => <rect key={i} x="47" y="4" width="6" height="14" fill={modo === 'cheio' ? cor : COR.azul} transform={`rotate(${i * 30} 50 50)`} />)}</>;
+  }
+};
+export const FormaRiso: React.FC<FormaRisoProps> = ({nome = 'sol', x = 800, y = 360, tam = 300, inicio = 0}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 12), 1.8);
+  const reg = (1 - p) * 40 + 8;
+  const rot = (1 - p) * -120 + Math.sin(f / 14) * 5;
+  const camada = (cor: string, modo: 'cheio' | 'reticula', dx: number, dy: number) => <svg viewBox="0 0 100 100" width={tam} height={tam} style={{position: 'absolute', left: dx, top: dy, mixBlendMode: 'multiply', overflow: 'visible'}}>
+    <defs><pattern id="ret-azul" width="9" height="9" patternUnits="userSpaceOnUse"><circle cx="4.5" cy="4.5" r="3.2" fill={COR.azul} /></pattern></defs><Forma nome={nome} cor={cor} modo={modo} /></svg>;
+  return <div style={{position: 'absolute', left: x - tam / 2, top: y - tam / 2, width: tam, height: tam, transform: `rotate(${rot}deg) scale(${Math.max(0.01, p)})`}}>{camada(COR.rosa, 'cheio', -reg, -reg * 0.6)}{camada(COR.azul, 'reticula', reg, reg * 0.6)}</div>;
+};

package/kits/risografia/elementos/Fundo.tsx

@@ -0,0 +1,12 @@
+// Fundo: papel off-white quente com uma mancha de retícula rosa bem fraca num canto (a "sobra" da impressão) que desloca devagar. Quase vazio de propósito.
+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}}>
+    <div style={{position: 'absolute', left: -180, top: 1180 + Math.sin(f / 45) * 20, width: 700, height: 700, borderRadius: '50%', backgroundImage: `radial-gradient(circle, ${COR.rosa} 0 36%, transparent 42%)`, backgroundSize: '28px 28px', WebkitMaskImage: 'linear-gradient(40deg, rgba(0,0,0,0.5), transparent 70%)', maskImage: 'linear-gradient(40deg, rgba(0,0,0,0.5), transparent 70%)', opacity: 0.5}} />
+    <div style={{position: 'absolute', right: -200, top: -120, width: 620, height: 620, borderRadius: '50%', backgroundImage: `radial-gradient(circle, ${COR.azul} 0 34%, transparent 40%)`, backgroundSize: '26px 26px', WebkitMaskImage: 'linear-gradient(220deg, rgba(0,0,0,0.5), transparent 70%)', maskImage: 'linear-gradient(220deg, rgba(0,0,0,0.5), transparent 70%)', opacity: 0.4, transform: `translateY(${Math.cos(f / 50) * 16}px)`}} />
+  </AbsoluteFill>;
+};

package/kits/risografia/elementos/ListaRiso.tsx

@@ -0,0 +1,22 @@
+// ListaRiso: itens numerados com o número em azul (Space Mono) e o texto em rosa gigante, cada um sublinhado por um traço de tinta que se desenha.
+// Cada linha entra fora de registro e assenta.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+
+export type ListaRisoProps = {itens: string[]; inicio?: number; intervalo?: number; y?: number; altura?: number};
+export const ListaRiso: React.FC<ListaRisoProps> = ({itens, inicio = 0, intervalo = 8, y = 740, altura = 250}) => {
+  const f = useF() - inicio;
+  const tam = Math.min(...itens.map((t) => caber(t, 170, 700, FONTE_TITULO, 800, -0.04)));
+  const topo = y - (itens.length * altura) / 2;
+  return <>{itens.map((t, i) => {
+    const t0 = i * intervalo;
+    const p = mola(seg(f, t0, t0 + 12), 1.5);
+    const reg = (1 - p) * 60 + 6;
+    const traco = seg(f, t0 + 6, t0 + 18);
+    return <div key={i} style={{position: 'absolute', left: 96, width: 888, top: topo + i * altura, height: altura, opacity: f >= t0 ? 1 : 0}}>
+      <div style={{position: 'absolute', left: 0, top: altura * 0.18, fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: 70, color: COR.azul, mixBlendMode: 'multiply', transform: `translateX(${reg}px)`}}>{String(i + 1).padStart(2, '0')}</div>
+      <div style={{position: 'absolute', left: 150, top: 0, fontFamily: FONTE_TITULO, fontWeight: 800, fontSize: tam, letterSpacing: '-0.04em', lineHeight: `${altura * 0.8}px`, color: COR.rosa, mixBlendMode: 'multiply', whiteSpace: 'nowrap', transform: `translateX(${-reg}px)`}}>{t}</div>
+      <svg width="888" height="30" style={{position: 'absolute', left: 0, top: altura * 0.82}}><path d="M2 15 Q220 2 440 15 T886 14" stroke={COR.azul} strokeWidth="9" fill="none" strokeLinecap="round" strokeDasharray="900" strokeDashoffset={900 * (1 - traco)} style={{mixBlendMode: 'multiply'}} /></svg>
+    </div>;
+  })}</>;
+};

package/kits/risografia/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 {AssinaturaMarca} from './AssinaturaMarca';
+import {BolaReticula} from './BolaReticula';
+import {FormaRiso} from './FormaRiso';
+import {ListaRiso} from './ListaRiso';
+import {NumeroRiso} from './NumeroRiso';
+import {TarjaCarimbo} from './TarjaCarimbo';
+import {TituloRiso} from './TituloRiso';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {AssinaturaMarca, BolaReticula, FormaRiso, ListaRiso, NumeroRiso, TarjaCarimbo, TituloRiso};
+
+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: "#F3EEE2"}}>
+    <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(`risografia: 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/risografia/elementos/NumeroRiso.tsx

@@ -0,0 +1,21 @@
+// NumeroRiso: número enorme impresso em duas chapas: uma chapa rosa chapada e outra azul em retícula de pontos, fora de registro,
+// com rótulo em Space Mono dentro de uma caixa de contorno azul. O número sobe contando.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+
+export type NumeroRisoProps = {valor: number; sufixo?: string; rotulo?: string; inicio?: number; y?: number};
+export const NumeroRiso: React.FC<NumeroRisoProps> = ({valor, sufixo = '+', rotulo, inicio = 0, y = 700}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 12), 1.8);
+  const n = Math.round(valor * seg(f, 3, 24));
+  const txt = `${n}${sufixo}`;
+  const tam = caber(`${valor}${sufixo}`, 720, 860, FONTE_TITULO, 800, -0.05);
+  const reg = (1 - p) * 60 + 9;
+  const base: React.CSSProperties = {position: 'absolute', left: 0, right: 0, top: y - tam * 0.55, textAlign: 'center', fontFamily: FONTE_TITULO, fontWeight: 800, fontSize: tam, letterSpacing: '-0.05em', lineHeight: 1.1, whiteSpace: 'nowrap', mixBlendMode: 'multiply'};
+  const pr = mola(seg(f, 12, 22), 1.6);
+  return <>
+    <div style={{...base, color: COR.rosa, transform: `translate(${-reg}px, ${-reg * 0.5}px) scale(${0.7 + p * 0.3})`}}>{txt}</div>
+    <div style={{...base, backgroundImage: `radial-gradient(circle, ${COR.azul} 0 40%, transparent 44%)`, backgroundSize: '22px 22px', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', transform: `translate(${reg}px, ${reg * 0.6}px) scale(${0.7 + p * 0.3})`}}>{txt}</div>
+    {rotulo && <div style={{position: 'absolute', left: 0, right: 0, top: y + tam * 0.5 + 30, display: 'flex', justifyContent: 'center'}}><div style={{border: `7px solid ${COR.azul}`, color: COR.azul, fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: 70, padding: '8px 40px', letterSpacing: 4, transform: `rotate(-2deg) scale(${Math.max(0.01, pr)})`}}>{rotulo.toUpperCase()}</div></div>}
+  </>;
+};

package/kits/risografia/elementos/Overlay.tsx

@@ -0,0 +1,18 @@
+// Overlay: o que se repete em todo plano: granulação de tinta (pontos de ruído com limiar), marcas de registro nos 4 cantos e a tirinha de
+// teste de cor (2 quadrados, rosa e azul, e o cruzamento) no canto inferior. Estática: a granulação não treme (mantém o preview leve).
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+
+const Mira: React.FC<{x: number; y: number}> = ({x, y}) => <svg width="64" height="64" style={{position: 'absolute', left: x - 32, top: y - 32}}><circle cx="32" cy="32" r="16" stroke={COR.azul} strokeWidth="4" fill="none" /><path d="M32 2 V62 M2 32 H62" stroke={COR.azul} strokeWidth="3" /></svg>;
+export const Overlay: React.FC = () => {
+    return <AbsoluteFill style={{pointerEvents: 'none'}}>
+    <svg width="1080" height="1920" style={{position: 'absolute', inset: 0, mixBlendMode: 'multiply', opacity: 0.16}}>
+      <filter id="riso-gr"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="2" seed={3} /><feColorMatrix type="matrix" values="0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.2  0 0 0 9 -4.9" /></filter>
+      <rect width="1080" height="1920" filter="url(#riso-gr)" />
+    </svg>
+    <Mira x={56} y={56} /><Mira x={1024} y={56} /><Mira x={56} y={1864} /><Mira x={1024} y={1864} />
+    <div style={{position: 'absolute', left: 470, top: 1850, width: 40, height: 28, background: COR.rosa, mixBlendMode: 'multiply'}} />
+    <div style={{position: 'absolute', left: 494, top: 1850, width: 40, height: 28, background: COR.azul, mixBlendMode: 'multiply'}} />
+  </AbsoluteFill>;
+};

package/kits/risografia/elementos/Som.tsx

@@ -0,0 +1,30 @@
+// Som: efeitos e trilha do kit (sintetizados no MotionCraft, pacote paper). 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/risografia/elementos/TarjaCarimbo.tsx

@@ -0,0 +1,20 @@
+// TarjaCarimbo: retângulo chapado de tinta rosa com o texto vazado (cor do papel), carimbado com leve rotação, e um contorno azul fora de registro por trás.
+// O carimbo "bate": entra grande e assenta em 3 quadros, com uma rebarba de tinta.
+import React from 'react';
+import {COR, FONTE_TEXTO, FONTE_TITULO, caber, mola, seg, useF} from './base';
+
+export type TarjaCarimboProps = {texto: string; sub?: string; inicio?: number; y?: number; tamanho?: number; altura?: number};
+export const TarjaCarimbo: React.FC<TarjaCarimboProps> = ({texto, sub, inicio = 0, y = 740, tamanho = 300, altura = 640}) => {
+  const f = useF() - inicio;
+  const p = mola(seg(f, 0, 9), 1.4);
+  const tam = Math.min(...texto.split('\n').map((t) => caber(t, tamanho, 700, FONTE_TITULO, 800, -0.05)));
+  const W = 840;
+  const esc = 1 + (1 - p) * 0.5;
+  return <div style={{position: 'absolute', left: (1080 - W) / 2, top: y - altura / 2, width: W, height: altura, opacity: f >= 0 ? Math.min(1, p * 3) : 0, transform: `rotate(-3deg) scale(${esc})`}}>
+    <div style={{position: 'absolute', inset: 0, border: `10px solid ${COR.azul}`, mixBlendMode: 'multiply', transform: 'translate(22px, 16px)'}} />
+    <div style={{position: 'absolute', inset: 0, background: COR.rosa, mixBlendMode: 'multiply', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
+      {texto.split('\n').map((t, i) => <div key={i} style={{fontFamily: FONTE_TITULO, fontWeight: 800, fontSize: tam, letterSpacing: '-0.05em', lineHeight: 0.96, color: COR.papel}}>{t}</div>)}
+      {sub && <div style={{marginTop: 26, fontFamily: FONTE_TEXTO, fontWeight: 700, fontSize: caber(sub, 64, 700, FONTE_TEXTO, 700, 0.05), letterSpacing: 3, color: COR.papel}}>{sub.toUpperCase()}</div>}
+    </div>
+  </div>;
+};

package/kits/risografia/elementos/TituloRiso.tsx

@@ -0,0 +1,26 @@
+// TituloRiso: 1 a 3 linhas em Bricolage Grotesque 800 impressas em duas tintas (rosa e azul) com o REGISTRO FORA: as duas chapas
+// entram afastadas e se aproximam até ~7 px sem nunca alinhar; onde se cruzam a cor escurece (multiply). A linha `destaque` sai só em azul.
+import React from 'react';
+import {COR, FONTE_TITULO, LARGURA_UTIL, caber, mola, ruido, seg, useF} from './base';
+
+export type TituloRisoProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; destaque?: number; fim?: number};
+export const TituloRiso: React.FC<TituloRisoProps> = ({linhas, inicio = 0, intervalo = 7, y = 720, tamanho = 210, destaque = 1, fim}) => {
+  const f = useF();
+  const tams = linhas.map((l) => caber(l, tamanho, LARGURA_UTIL - 40, FONTE_TITULO, 800, -0.04));
+  const alts = tams.map((t) => t * 0.98);
+  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 p = mola(seg(f, t0, t0 + 12), 1.6);
+    const sai = fim === undefined ? 0 : seg(f, fim + i * 2, fim + i * 2 + 8);
+    const reg = (1 - p) * 70 + 7 + (ruido(Math.floor(f / 3) + i) - 0.5) * 3;
+    const so = i === destaque;
+    const base: React.CSSProperties = {position: 'absolute', left: 0, right: 0, top: topo, textAlign: 'center', fontFamily: FONTE_TITULO, fontWeight: 800, fontSize: tams[i], letterSpacing: '-0.04em', lineHeight: `${alts[i]}px`, whiteSpace: 'nowrap', mixBlendMode: 'multiply', opacity: f >= t0 ? 1 - sai : 0};
+    return <React.Fragment key={i}>
+      {!so && <div style={{...base, color: COR.rosa, transform: `translate(${-reg}px, ${-reg * 0.4 - sai * 300}px)`}}>{l}</div>}
+      <div style={{...base, color: COR.azul, transform: `translate(${reg}px, ${reg * 0.5 - sai * 300}px)`}}>{l}</div>
+    </React.Fragment>;
+  })}</>;
+};

package/kits/risografia/elementos/base.ts

@@ -0,0 +1,73 @@
+// Base do kit risografia: cores, fontes, curvas, passo e medidas. Todo número visual sai daqui.
+// Os elementos importam só este arquivo, 'react' e 'remotion'.
+import {continueRender, delayRender, useCurrentFrame} from 'remotion';
+import fonte0 from '../assets/fontes/bricolage-800.woff2';
+import fonte1 from '../assets/fontes/space-mono-700.woff2';
+
+// ---------- tela ----------
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+export const SEGURA = {topo: 168, base: 1330, lado: 80};
+export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 920 px
+
+// ---------- cor ----------
+export const COR = {
+  "papel": "#F3EEE2",
+  "rosa": "#FF48B0",
+  "rosaEscuro": "#D6228C",
+  "azul": "#0078BF"
+};
+
+// ---------- fonte ----------
+export const FONTE_TITULO = '"RG Bricolage Grotesque", system-ui, sans-serif';
+export const FONTE_TEXTO = '"RG Space Mono", monospace';
+const FONTES: [string, string, string][] = [['RG Bricolage Grotesque', fonte0, '800'], ['RG Space Mono', fonte1, '700']];
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__k_risografia) {
+  (globalThis as Record<string, unknown>).__k_risografia = true;
+  const h = delayRender('risografia: fontes');
+  Promise.all(FONTES.map(([nome, url, peso]) => new FontFace(nome, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load().then((ff) => {document.fonts.add(ff);}).catch(() => undefined)))
+    .then(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+/** passo da animação: 1 = liso, 2 ou 3 = movimento em passos (stop-motion / 8 bits) */
+export const PASSO = 2;
+export const q = (f: number) => Math.floor(f / PASSO) * PASSO;
+/** quadro atual da cena, já em passos */
+export const useF = () => q(useCurrentFrame());
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+/** progresso 0..1 de f entre a e b */
+export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
+/** saída rápida e pouso longo */
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+/** passa do alvo e volta (overshoot ~1.6) */
+export const mola = (t: number, s = 1.6) => { const x = c01(t) - 1; return x * x * ((s + 1) * x + s) + 1; };
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** ruído determinístico 0..1 */
+export const ruido = (n: number) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+/** uma batida da trilha do kit (96 bpm) em quadros */
+export const BATIDA = 18.75;
+
+// ---------- medida de texto ----------
+let canvas: HTMLCanvasElement | null = null;
+const cache = new Map<string, number>();
+export const larguraTexto = (texto: string, tamanho: number, familia = FONTE_TITULO, peso = 800, trackingEm = 0): number => {
+  const chave = `${texto}|${tamanho}|${familia}|${peso}|${trackingEm}`;
+  const c = cache.get(chave); if (c !== undefined) return c;
+  if (typeof document === 'undefined') return texto.length * tamanho * 0.6;
+  canvas = canvas || document.createElement('canvas');
+  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.6;
+  const fonte = `${peso} ${tamanho}px ${familia}`;
+  ctx.font = fonte;
+  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
+  if (document.fonts.check(fonte)) cache.set(chave, w);
+  return w;
+};
+/** o maior tamanho até `tamanho` em que o texto cabe em `largura` */
+export const caber = (texto: string, tamanho: number, largura = LARGURA_UTIL, familia = FONTE_TITULO, peso = 800, trackingEm = 0) => {
+  const w = larguraTexto(texto, tamanho, familia, peso, trackingEm);
+  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
+};
+/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
+export const textoLimpo = (t: string) => t.replace(/\*/g, '');
+/** divide "Usar *IA* já" em [{t:'Usar ',d:false},{t:'IA',d:true},{t:' já',d:false}] */
+export const comDestaque = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t !== '');

package/kits/risografia/elementos/index.ts

@@ -0,0 +1,17 @@
+// Tudo que o kit risografia oferece.
+export * from './base';
+export {Fundo} from './Fundo';
+export {Overlay} from './Overlay';
+export {Camera, posCamera} from './Camera';
+export {Cena, useDuracaoCena, SOBREPOE} from './Cena';
+export {AssinaturaMarca} from './AssinaturaMarca';
+export {BolaReticula} from './BolaReticula';
+export {FormaRiso} from './FormaRiso';
+export {ListaRiso} from './ListaRiso';
+export {NumeroRiso} from './NumeroRiso';
+export {TarjaCarimbo} from './TarjaCarimbo';
+export {TituloRiso} from './TituloRiso';
+export {Efeito, Trilha, SONS} from './Som';
+export type {NomeSom} from './Som';
+export {Montagem, ELEMENTOS} from './Montagem';
+export type {Plano, CenaPlano, Camada} from './Montagem';