primocode 10.17.0 → 10.19.0

package/kits/papel-recortado/assets/fontes/OFL-fredoka-700.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Fredoka 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/papel-recortado/assets/fontes/OFL-nunito-700.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Nunito 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/papel-recortado/elementos/CamadaPapel.tsx

@@ -0,0 +1,81 @@
+// CamadaPapel: um plano de papel recortado (colinas, onda, nuvem, sol com raios, círculo, estrela),
+// com borda fibrosa, textura e sombra sobre a camada de trás. Entra como num livro pop-up:
+//   sobe   → nasce de baixo da dobra (translateY 110% → 0, mola)
+//   dobra  → levanta do chão: rotateX 90° → 0 com perspectiva, pivô na base
+//   pop    → escala 0 → 1 com mola e giro de −12°
+//   esq/dir→ desliza de fora da tela
+// `profundidade` (0–1) liga a camada ao paralaxe da Camera.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {PAPEL, PAPEL_ALTO, cor, mola, q, ruido, seg} from './base';
+import {paralaxe, useCamera} from './Camera';
+
+export type FormaPapel = 'colinas' | 'onda' | 'nuvem' | 'sol' | 'circulo' | 'estrela';
+export type CamadaPapelProps = {
+  forma: FormaPapel;
+  cor: string;
+  /** segunda cor (raios do sol) */
+  cor2?: string;
+  x: number; y: number; largura: number; altura: number;
+  profundidade?: number;
+  entrada?: 'sobe' | 'dobra' | 'pop' | 'esq' | 'dir' | 'nenhuma';
+  inicio?: number;
+  /** sombra maior (camada mais perto) */
+  alta?: boolean;
+  semente?: number;
+  /** quantas ondulações (colinas/onda) */
+  ondas?: number;
+  /** balanço contínuo em graus (nuvens, sol) */
+  respira?: number;
+};
+
+const caminho = (forma: FormaPapel, W: number, H: number, s: number, n: number): string => {
+  if (forma === 'colinas' || forma === 'onda') {
+    const pts: string[] = [];
+    const A = forma === 'colinas' ? H * 0.22 : H * 0.12;
+    for (let i = 0; i <= 48; i++) {
+      const x = (i / 48) * W;
+      const y = A + Math.sin((i / 48) * Math.PI * n + s * 5) * A * 0.8 + Math.sin((i / 48) * Math.PI * n * 2.3 + s) * A * 0.2;
+      pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
+    }
+    return `M0,${H} L${pts.join(' L')} L${W},${H} Z`;
+  }
+  if (forma === 'estrela') {
+    const p: string[] = [];
+    for (let i = 0; i < 10; i++) {const r = i % 2 ? W * 0.22 : W * 0.5, a = (i / 10) * Math.PI * 2 - Math.PI / 2; p.push(`${(W / 2 + Math.cos(a) * r).toFixed(1)},${(H / 2 + Math.sin(a) * r).toFixed(1)}`);}
+    return `M${p.join(' L')} Z`;
+  }
+  return '';
+};
+
+export const CamadaPapel: React.FC<CamadaPapelProps> = ({forma, cor: c, cor2 = 'terracota', x, y, largura: W, altura: H, profundidade = 0.5, entrada = 'sobe', inicio = 0, alta = false, semente = 1, ondas = 3, respira = 0}) => {
+  const f = q(useCurrentFrame()) - inicio;
+  const cam = useCamera();
+  if (entrada !== 'nenhuma' && f < 0) return null;
+  const t = entrada === 'nenhuma' ? 1 : mola(seg(f, 0, 14));
+  let tr = '', origem = '50% 100%';
+  if (entrada === 'sobe') tr = `translateY(${(1 - t) * (H * 1.1)}px)`;
+  if (entrada === 'dobra') tr = `perspective(1400px) rotateX(${(1 - t) * 88}deg)`;
+  if (entrada === 'pop') {tr = `scale(${Math.max(0, t)}) rotate(${(1 - t) * -12}deg)`; origem = '50% 50%';}
+  if (entrada === 'esq') tr = `translateX(${(1 - t) * -(x + W + 60)}px)`;
+  if (entrada === 'dir') tr = `translateX(${(1 - t) * (1140 - x)}px)`;
+  const rs = respira ? Math.sin(f / 16) * respira : 0;
+  const filtro = alta ? PAPEL_ALTO : PAPEL;
+  let desenho: React.ReactNode;
+  if (forma === 'nuvem') {
+    const bolas = [[0.22, 0.62, 0.22], [0.42, 0.45, 0.3], [0.64, 0.52, 0.26], [0.82, 0.66, 0.17]];
+    desenho = <g fill={cor(c)}>{bolas.map(([bx, by, br], i) => <circle key={i} cx={bx * W} cy={by * H} r={br * W * (0.95 + 0.1 * ruido(i + semente))} />)}<rect x={0.1 * W} y={0.62 * H} width={0.82 * W} height={0.24 * H} rx={0.12 * H} /></g>;
+  } else if (forma === 'sol' || forma === 'circulo') {
+    const r = Math.min(W, H) / 2;
+    const raios = forma === 'sol' ? Array.from({length: 14}, (_, i) => {const a = (i / 14) * Math.PI * 2; const a1 = a - 0.11, a2 = a + 0.11; return `M${W / 2 + Math.cos(a1) * r * 0.6},${H / 2 + Math.sin(a1) * r * 0.6} L${W / 2 + Math.cos(a) * r},${H / 2 + Math.sin(a) * r} L${W / 2 + Math.cos(a2) * r * 0.6},${H / 2 + Math.sin(a2) * r * 0.6} Z`;}).join(' ') : '';
+    desenho = <>
+      {forma === 'sol' && <g filter={PAPEL} transform={`rotate(${f * 0.8} ${W / 2} ${H / 2})`}><path d={raios} fill={cor(cor2)} /></g>}
+      <circle cx={W / 2} cy={H / 2} r={forma === 'sol' ? r * 0.62 : r} fill={cor(c)} />
+    </>;
+  } else desenho = <path d={caminho(forma, W, H, semente, ondas)} fill={cor(c)} />;
+  return <div style={{position: 'absolute', inset: 0, transform: paralaxe(cam, profundidade), transformOrigin: '50% 50%'}}>
+    <div style={{position: 'absolute', left: x, top: y, width: W, height: H, transform: `${tr} rotate(${rs}deg)`, transformOrigin: origem}}>
+      <svg width={W} height={H} style={{overflow: 'visible'}}><g filter={filtro}>{desenho}</g></svg>
+    </div>
+  </div>;
+};

package/kits/papel-recortado/elementos/Camera.tsx

@@ -0,0 +1,28 @@
+// Camera: a câmera de mesa sobre o diorama. Chaves [[quadro, zoom, x, y]] (absolutas) e uma deriva de
+// ±10 px. Ela NÃO move a cena inteira: cada camada lê o contexto e anda conforme a sua `profundidade`
+// (0 = fundo, quase parado; 1 = frente, anda o dobro). É o paralaxe.
+import React, {createContext, useContext} from 'react';
+import {useCurrentFrame} from 'remotion';
+import {lerp, q, seg} from './base';
+
+export type ChaveCamera = [number, number, number, number];
+const Ctx = createContext({zoom: 1, x: 0, y: 0});
+export const useCamera = () => useContext(Ctx);
+
+const v = (f: number, ks: ChaveCamera[], i: 1 | 2 | 3) => {
+  if (f <= ks[0][0]) return ks[0][i];
+  for (let k = 1; k < ks.length; k++) if (f <= ks[k][0]) {const t = seg(f, ks[k - 1][0], ks[k][0]); return lerp(ks[k - 1][i], ks[k][i], t * t * (3 - 2 * t));}
+  return ks[ks.length - 1][i];
+};
+
+export const Camera: React.FC<{chaves?: ChaveCamera[]; children: React.ReactNode}> = ({chaves = [[0, 1, 0, 0]], children}) => {
+  const f = q(useCurrentFrame());
+  const val = {zoom: v(f, chaves, 1), x: v(f, chaves, 2) + Math.sin(f / 40) * 10, y: v(f, chaves, 3) + Math.cos(f / 53) * 6};
+  return <Ctx.Provider value={val}>{children}</Ctx.Provider>;
+};
+
+/** transform de paralaxe pra uma camada de profundidade p (0..1), com origem no centro da tela */
+export const paralaxe = (cam: {zoom: number; x: number; y: number}, p: number) => {
+  const k = 0.3 + 1.4 * p;
+  return `translate(${-cam.x * k}px, ${-cam.y * k}px) scale(${1 + (cam.zoom - 1) * k})`;
+};

package/kits/papel-recortado/elementos/CartaoCamadas.tsx

@@ -0,0 +1,38 @@
+// CartaoCamadas: o cartão de papel em CAMADAS EMPILHADAS (arte de papel em relevo): 3 folhas de cores
+// diferentes, cada uma 18 px menor e deslocada, cada uma com a própria sombra. Elas chegam uma a uma
+// (a de trás primeiro) deslizando e assentando com giro. Na de cima: título e linha. Herói do CTA.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {FONTE, PAPEL, PAPEL_ALTO, TEXTO, cor, mola, q, seg} from './base';
+import {paralaxe, useCamera} from './Camera';
+
+export type CartaoCamadasProps = {
+  titulo: string[];
+  linha?: string;
+  cores?: string[];
+  x?: number; y?: number; largura?: number; altura?: number;
+  inicio?: number;
+  profundidade?: number;
+};
+
+export const CartaoCamadas: React.FC<CartaoCamadasProps> = ({titulo, linha, cores = ['petroleo', 'mostarda', 'creme'], x = 540, y = 760, largura = 820, altura = 700, inicio = 0, profundidade = 0.65}) => {
+  const f = q(useCurrentFrame()) - inicio;
+  const cam = useCamera();
+  if (f < 0) return null;
+  return <div style={{position: 'absolute', inset: 0, transform: paralaxe(cam, profundidade)}}>
+    {cores.map((c, i) => {
+      const t = mola(seg(f, i * 4, i * 4 + 12));
+      const enc = i * 26, dx = (i - 1) * 10;
+      const giro = [-4, 2.5, -1][i % 3];
+      const ultima = i === cores.length - 1;
+      return <div key={i} style={{position: 'absolute', left: x - largura / 2 + enc + dx, top: y - altura / 2 + enc, width: largura - enc * 2, height: altura - enc * 2,
+        transform: `translateY(${(1 - t) * 1300}px) rotate(${giro + (1 - t) * 20}deg)`, filter: ultima ? PAPEL_ALTO : PAPEL}}>
+        <div style={{position: 'absolute', inset: 0, background: cor(c), borderRadius: 8}} />
+        {ultima && <div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, padding: 40, textAlign: 'center'}}>
+          {titulo.map((tt, k) => <div key={k} style={{fontFamily: FONTE, fontWeight: 700, fontSize: 110, lineHeight: 1, color: cor(k % 2 ? 'terracota' : 'tinta'), opacity: seg(f, 12 + k * 3, 16 + k * 3)}}>{tt}</div>)}
+          {linha && <div style={{marginTop: 26, fontFamily: TEXTO, fontWeight: 700, fontSize: 46, color: cor('petroleo'), opacity: seg(f, 20, 26)}}>{linha}</div>}
+        </div>}
+      </div>;
+    })}
+  </div>;
+};

package/kits/papel-recortado/elementos/Cena.tsx

@@ -0,0 +1,29 @@
+// Cena: um plano. Dentro dela, useCurrentFrame() começa em 0.
+// Entradas: corte · pagina (a cena nova vira como página de livro: rotateY 100° → 0 pelo lado esquerdo,
+// 10 quadros em dois, com sombra que corre) · nenhuma.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, q, seg} from './base';
+
+export type Entrada = 'corte' | 'pagina' | 'nenhuma';
+export const SOBREPOE = 10;
+const CenaCtx = createContext({duracao: 60});
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+const Janela: React.FC<{entrada: Entrada; children: React.ReactNode}> = ({entrada, children}) => {
+  const f = q(useCurrentFrame());
+  if (entrada !== 'pagina' || f >= SOBREPOE) return <AbsoluteFill>{children}</AbsoluteFill>;
+  const t = e5(seg(f, 0, SOBREPOE));
+  return <AbsoluteFill style={{perspective: 2600}}>
+    <AbsoluteFill style={{transform: `rotateY(${(1 - t) * 100}deg)`, transformOrigin: '0% 50%', overflow: 'hidden'}}>
+      {children}
+      <AbsoluteFill style={{background: `rgba(40,25,10,${(1 - t) * 0.5})`}} />
+    </AbsoluteFill>
+  </AbsoluteFill>;
+};
+
+/** `extra`: quadros que a cena fica por baixo da próxima (quando a próxima entra com `pagina`) */
+export const Cena: React.FC<{de: number; ate: number; entrada?: Entrada; extra?: number; children: React.ReactNode}> = ({de, ate, entrada = 'corte', extra = 0, children}) =>
+  <Sequence from={de} durationInFrames={ate - de + extra} layout="none">
+    <CenaCtx.Provider value={{duracao: ate - de}}><Janela entrada={entrada}>{children}</Janela></CenaCtx.Provider>
+  </Sequence>;

package/kits/papel-recortado/elementos/EtiquetaPapel.tsx

@@ -0,0 +1,40 @@
+// EtiquetaPapel: etiquetas de papel PENDURADAS por um barbante que desce do topo da tela. Cada uma tem
+// furo com ilhó, canto cortado, texto grande, e chega caindo e BALANÇANDO (pêndulo amortecido, ±14°).
+// Uma lista de até 3, lado a lado em alturas diferentes.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {FONTE, PAPEL_ALTO, balanco, cor, mola, q, seg} from './base';
+import {paralaxe, useCamera} from './Camera';
+
+export type EtiquetaPapelProps = {
+  itens: {texto: string; cor: string; corTexto?: string; x: number; y: number}[];
+  inicio?: number;
+  intervalo?: number;
+  largura?: number;
+  altura?: number;
+  profundidade?: number;
+};
+
+export const EtiquetaPapel: React.FC<EtiquetaPapelProps> = ({itens, inicio = 0, intervalo = 6, largura = 300, altura = 400, profundidade = 0.6}) => {
+  const f = q(useCurrentFrame()) - inicio;
+  const cam = useCamera();
+  return <div style={{position: 'absolute', inset: 0, transform: paralaxe(cam, profundidade)}}>
+    {itens.map((it, i) => {
+      const fi = f - i * intervalo;
+      if (fi < 0) return null;
+      const t = mola(seg(fi, 0, 12));
+      const ang = balanco(fi - 6, 14, 24, 20) * (i % 2 ? -1 : 1);
+      const topoFio = 0, yTag = it.y - (1 - t) * (it.y + altura);
+      return <div key={i}>
+        <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}><line x1={it.x} y1={topoFio} x2={it.x + Math.sin((ang * Math.PI) / 180) * -40} y2={yTag + 40} stroke="#6B5640" strokeWidth={4} /></svg>
+        <div style={{position: 'absolute', left: it.x - largura / 2, top: yTag, width: largura, height: altura, transform: `rotate(${ang}deg)`, transformOrigin: '50% 40px', filter: PAPEL_ALTO}}>
+          <div style={{position: 'absolute', inset: 0, background: cor(it.cor), clipPath: 'polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%)'}} />
+          <div style={{position: 'absolute', left: largura / 2 - 22, top: 22, width: 44, height: 44, borderRadius: 22, background: '#F1E4CB', border: '7px solid #B88A55', boxSizing: 'border-box'}} />
+          <div style={{position: 'absolute', left: 0, right: 0, top: 90, bottom: 10, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+            <div style={{fontFamily: FONTE, fontWeight: 700, fontSize: Math.min(68, (largura - 40) / (it.texto.length * 0.6)), color: cor(it.corTexto ?? 'creme'), whiteSpace: 'nowrap'}}>{it.texto}</div>
+          </div>
+        </div>
+      </div>;
+    })}
+  </div>;
+};

package/kits/papel-recortado/elementos/Filtros.tsx

@@ -0,0 +1,33 @@
+// Filtros: o que faz qualquer forma virar PAPEL RECORTADO. Um SVG invisível com dois filtros:
+//   1. borda rasgada/fibrosa: ruído fractal (0,035) desloca o contorno em até 7 px;
+//   2. textura de fibra: ruído fino (0,8, 3 oitavas) multiplica a cor entre 0,80 e 1,03;
+//   3. sombra entre camadas: desfoque 6 px, desce 9 px, preto a 38% (alto: 14 px, 22 px, 45%).
+// A Montagem põe este componente uma vez; os elementos usam PAPEL / PAPEL_ALTO de base.ts.
+import React from 'react';
+
+const filtro = (id: string, desfoque: number, desce: number, alfa: number, escala: number) =>
+  <filter id={id} x="-15%" y="-15%" width="130%" height="140%" colorInterpolationFilters="sRGB">
+    <feTurbulence type="fractalNoise" baseFrequency="0.035" numOctaves={2} seed={3} result="borda" />
+    <feDisplacementMap in="SourceGraphic" in2="borda" scale={escala} xChannelSelector="R" yChannelSelector="G" result="recorte" />
+    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves={3} seed={8} result="fibra" />
+    <feColorMatrix in="fibra" type="matrix" values="0.25 0 0 0 0.78  0.25 0 0 0 0.78  0.25 0 0 0 0.78  0 0 0 0 1" result="fibraCinza" />
+    <feBlend in="recorte" in2="fibraCinza" mode="multiply" result="tex" />
+    <feComposite in="tex" in2="recorte" operator="in" result="papel" />
+    <feGaussianBlur in="recorte" stdDeviation={desfoque} result="desf" />
+    <feOffset in="desf" dx={desce * 0.3} dy={desce} result="desl" />
+    <feColorMatrix in="desl" type="matrix" values={`0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 ${alfa} 0`} result="sombra" />
+    <feMerge><feMergeNode in="sombra" /><feMergeNode in="papel" /></feMerge>
+  </filter>;
+
+export const Filtros: React.FC = () =>
+  <svg width={0} height={0} style={{position: 'absolute'}}>
+    <defs>
+      {filtro('pr2-papel', 6, 9, 0.38, 7)}
+      {filtro('pr2-papel-alto', 14, 22, 0.45, 8)}
+      <filter id="pr2-fundo" x="0" y="0" width="100%" height="100%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves={3} seed={2} result="f" />
+        <feColorMatrix in="f" type="matrix" values="0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0.22 0" />
+        <feComposite in2="SourceGraphic" operator="in" />
+      </filter>
+    </defs>
+  </svg>;

package/kits/papel-recortado/elementos/Fita.tsx

@@ -0,0 +1,21 @@
+// Fita: um pedaço de fita adesiva de papel (washi) que PRENDE as coisas: semitransparente, pontas
+// serrilhadas, listras finas, e chega batendo (escala 1,4 → 1 em 6 quadros). Use 1–2 por cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {cor, mola, q, seg} from './base';
+
+export type FitaProps = {x: number; y: number; largura?: number; giro?: number; cor?: string; inicio?: number};
+
+const serrilha = (n: number) => {
+  const p: string[] = []; for (let i = 0; i <= n; i++) p.push(`${i % 2 ? 3 : 0}% ${(i / n) * 100}%`);
+  const q2: string[] = []; for (let i = n; i >= 0; i--) q2.push(`${i % 2 ? 97 : 100}% ${(i / n) * 100}%`);
+  return `polygon(${p.join(',')},${q2.join(',')})`;
+};
+
+export const Fita: React.FC<FitaProps> = ({x, y, largura = 220, giro = -12, cor: c = 'mostarda', inicio = 0}) => {
+  const f = q(useCurrentFrame()) - inicio;
+  if (f < 0) return null;
+  const t = mola(seg(f, 0, 8));
+  return <div style={{position: 'absolute', left: x - largura / 2, top: y - 33, width: largura, height: 66, transform: `rotate(${giro}deg) scale(${1.4 - 0.4 * t})`, opacity: Math.min(1, t * 2) * 0.86,
+    background: `repeating-linear-gradient(90deg, ${cor(c)} 0 16px, rgba(255,255,255,.25) 16px 20px)`, clipPath: serrilha(10), boxShadow: '0 3px 4px rgba(0,0,0,.15)'}} />;
+};

package/kits/papel-recortado/elementos/FolhaPopUp.tsx

@@ -0,0 +1,49 @@
+// FolhaPopUp: a página de livro pop-up. Uma folha base (kraft) desliza e, sobre a dobra, um CARTÃO
+// LEVANTA de deitado a em pé (rotateX 88° → 0, mola), com duas abas laterais que se abrem atrás dele
+// (rotateY ±70° → ±18°). No cartão: linhas de texto grandes, cada uma num papel. É o herói da data.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {FONTE, PAPEL, PAPEL_ALTO, TEXTO, cor, mola, q, seg} from './base';
+import {paralaxe, useCamera} from './Camera';
+
+export type FolhaPopUpProps = {
+  linhas: {texto: string; tamanho?: number; cor?: string; papel?: string}[];
+  /** centro do cartão */
+  x?: number; y?: number;
+  largura?: number; altura?: number;
+  corCartao?: string; corBase?: string; corAbas?: string;
+  inicio?: number;
+  profundidade?: number;
+};
+
+export const FolhaPopUp: React.FC<FolhaPopUpProps> = ({linhas, x = 540, y = 760, largura = 700, altura = 720, corCartao = 'creme', corBase = 'kraft', corAbas = 'petroleo', inicio = 0, profundidade = 0.6}) => {
+  const f = q(useCurrentFrame()) - inicio;
+  const cam = useCamera();
+  if (f < 0) return null;
+  const tb = mola(seg(f, 0, 10)), tc = mola(seg(f, 6, 20)), ta = mola(seg(f, 12, 24));
+  const base = y + altura / 2;
+  return <div style={{position: 'absolute', inset: 0, transform: paralaxe(cam, profundidade)}}>
+    {/* a folha base, em perspectiva (o "chão" do livro); corBase "nenhuma" tira */}
+    {corBase !== 'nenhuma' && <div style={{position: 'absolute', left: x - 470, top: base - 40, width: 940, height: 300, transform: `translateY(${(1 - tb) * 700}px) perspective(900px) rotateX(58deg)`, transformOrigin: '50% 0%', filter: PAPEL}}>
+      <div style={{position: 'absolute', inset: 0, background: cor(corBase), borderRadius: 6}} />
+      <div style={{position: 'absolute', left: '50%', top: 0, bottom: 0, width: 3, background: 'rgba(60,35,15,.35)'}} />
+    </div>}
+    {/* abas que abrem atrás */}
+    {[-1, 1].map((s) => <div key={s} style={{position: 'absolute', left: s < 0 ? x - largura / 2 - 120 : x + largura / 2 - 160, top: y - altura / 2 + 90, width: 280, height: altura - 120,
+      transform: `perspective(1200px) rotateX(${(1 - tc) * 88}deg) rotateY(${s * (18 + (1 - ta) * 52)}deg)`, transformOrigin: s < 0 ? '100% 100%' : '0% 100%', filter: PAPEL}}>
+      <div style={{position: 'absolute', inset: 0, background: cor(corAbas), borderRadius: 4}} />
+    </div>)}
+    {/* o cartão que levanta */}
+    <div style={{position: 'absolute', left: x - largura / 2, top: y - altura / 2, width: largura, height: altura, transform: `perspective(1400px) rotateX(${(1 - tc) * 88}deg)`, transformOrigin: '50% 100%', filter: PAPEL_ALTO}}>
+      <div style={{position: 'absolute', inset: 0, background: cor(corCartao), borderRadius: 6}} />
+      <div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18}}>
+        {linhas.map((l, i) => {
+          const tl = mola(seg(f, 16 + i * 4, 26 + i * 4));
+          const papel = l.papel ? cor(l.papel) : undefined;
+          return <div key={i} style={{fontFamily: i === 0 && !l.tamanho ? TEXTO : FONTE, fontWeight: 700, fontSize: l.tamanho ?? 72, lineHeight: 1, color: cor(l.cor ?? 'tinta'), background: papel, padding: papel ? '14px 34px 8px' : undefined,
+            transform: `scale(${Math.max(0, tl)}) rotate(${(i % 2 ? 2 : -2.5) * tl}deg)`, filter: papel ? PAPEL : undefined, whiteSpace: 'nowrap'}}>{l.texto}</div>;
+        })}
+      </div>
+    </div>
+  </div>;
+};

package/kits/papel-recortado/elementos/Fundo.tsx

@@ -0,0 +1,10 @@
+// Fundo: a folha de base, papel creme (ou kraft) com fibra visível e as bordas 8% mais escuras.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {cor} from './base';
+
+export const Fundo: React.FC<{cor?: string}> = ({cor: c = 'creme'}) =>
+  <AbsoluteFill style={{background: cor(c)}}>
+    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}><rect width={1080} height={1920} fill="#000" filter="url(#pr2-fundo)" /></svg>
+    <AbsoluteFill style={{background: 'radial-gradient(90% 70% at 50% 45%, rgba(0,0,0,0) 60%, rgba(60,35,15,.16) 100%)'}} />
+  </AbsoluteFill>;

package/kits/papel-recortado/elementos/LetrasRecortadas.tsx

@@ -0,0 +1,48 @@
+// LetrasRecortadas: o título RECORTADO de papel. Cada letra é um pedaço: a letra colorida colada numa
+// margem de papel creme de 16 px (recortada "na tesoura" em volta), com borda fibrosa, sombra, e um
+// giro torto de ±5°. Entram como pop-up: levantam da linha de base (rotateX 90° → 0) uma a uma.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {FONTE, PAPEL_ALTO, cor, mola, q, ruido, seg} from './base';
+import {paralaxe, useCamera} from './Camera';
+
+export type LetrasRecortadasProps = {
+  linhas: {texto: string; cor?: string; tamanho?: number}[];
+  /** y do topo da primeira linha; x = centro */
+  y?: number; x?: number;
+  inicio?: number;
+  /** quadros entre letras */
+  intervalo?: number;
+  /** cores que se alternam letra a letra quando a linha não tem `cor` */
+  paleta?: string[];
+  margem?: string;
+  profundidade?: number;
+  sai?: number;
+};
+
+export const LetrasRecortadas: React.FC<LetrasRecortadasProps> = ({linhas, y = 420, x = 540, inicio = 0, intervalo = 2, paleta = ['terracota', 'petroleo', 'mostarda'], margem = 'creme', profundidade = 0.7, sai = -1}) => {
+  const f = q(useCurrentFrame());
+  const cam = useCamera();
+  let n = 0, top = y;
+  const tOut = sai < 0 ? 0 : seg(f, sai, sai + 8);
+  return <div style={{position: 'absolute', inset: 0, transform: paralaxe(cam, profundidade)}}>
+    {linhas.map((l, li) => {
+      const tam = l.tamanho ?? 170;
+      const meuTop = top; top += tam * 1.08;
+      return <div key={li} style={{position: 'absolute', left: 0, width: 1080, top: meuTop, display: 'flex', justifyContent: 'center', gap: tam * 0.04, transform: `translateX(${x - 540}px)`}}>
+        {l.texto.split('').map((ch, i) => {
+          const k = n++;
+          if (ch === ' ') return <span key={i} style={{width: tam * 0.28}} />;
+          const t = mola(seg(f, inicio + k * intervalo, inicio + k * intervalo + 10));
+          const giro = (ruido(k * 3.1) - 0.5) * 10;
+          const c = cor(l.cor ?? paleta[k % paleta.length]);
+          const queda = tOut > 0 ? `translateY(${tOut * 1400 * (0.8 + ruido(k) * 0.4)}px) rotate(${tOut * (ruido(k + 4) - 0.5) * 90}deg)` : '';
+          return <span key={i} style={{position: 'relative', display: 'inline-block', fontFamily: FONTE, fontWeight: 700, fontSize: tam, lineHeight: 1, transform: `${queda} perspective(900px) rotateX(${(1 - t) * 88}deg) rotate(${giro}deg)`, transformOrigin: '50% 100%', opacity: t > 0.02 ? 1 : 0, filter: PAPEL_ALTO}}>
+            <span style={{position: 'absolute', inset: 0, color: cor(margem), WebkitTextStroke: `${tam * 0.2}px ${cor(margem)}`}}>{ch}</span>
+            <span style={{position: 'relative', color: c}}>{ch}</span>
+          </span>;
+        })}
+      </div>;
+    })}
+  </div>;
+};

package/kits/papel-recortado/elementos/MolduraPapel.tsx

@@ -0,0 +1,12 @@
+// MolduraPapel: a moldura que se repete em todo vídeo do kit: a tela vira uma JANELA RECORTADA numa
+// folha kraft (36 px nas laterais, 60 em cima e embaixo), com a borda interna rasgada e a sombra que a
+// folha joga pra dentro, como se a gente espiasse um livro pop-up.
+import React from 'react';
+import {cor} from './base';
+
+export const MolduraPapel: React.FC<{cor?: string}> = ({cor: c = 'kraft'}) =>
+  <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
+    <g filter="url(#pr2-papel-alto)">
+      <path fillRule="evenodd" fill={cor(c)} d="M-40,-40 H1120 V1960 H-40 Z M40,64 Q540,50 1040,62 L1044,1858 Q540,1870 38,1856 Z" />
+    </g>
+  </svg>;