primocode 10.17.1 → 10.19.0

package/kits/tunel/assets/fontes/OFL-ChakraPetch.txt

@@ -0,0 +1,92 @@
+Copyright (c) Chakra Petch Project Authors (Google Fonts)
+
+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://openfontlicense.org
+
+-----------------------------------------------------------
+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/tunel/assets/fontes/OFL-Syncopate.txt

@@ -0,0 +1,92 @@
+Copyright (c) Syncopate Project Authors (Google Fonts)
+
+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://openfontlicense.org
+
+-----------------------------------------------------------
+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/tunel/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,22 @@
+// AssinaturaMarca: a última cena. Na janela, o logo chega do fundo, depois o nome em Syncopate e o endereço em Chakra Petch.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FAM_A, FAM_B, FONTE_A, FONTE_B, caber, c01, lerp, ob, seg} from './base';
+
+export type AssinaturaMarcaProps = {
+  logo: string;
+  nome: string;
+  endereco?: string;
+  inicio?: number;
+};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, endereco, inicio = 0}) => {
+  const f = useCurrentFrame() - inicio;
+  const lg = ob(seg(f, 0, 16), 1.7), nm = ob(seg(f, 8, 24), 1.7), en = seg(f, 22, 34);
+  const tn = caber(nome.toUpperCase(), 100, FAM_A, 660, 700, 0), te = caber(endereco ?? '', 52, FAM_B, 780, 600, 0.04);
+  return <>
+    <img src={logo} style={{position: 'absolute', left: 540 - 150, top: 640 - 150, width: 300, height: 300, transform: `scale(${lerp(0.08, 1, lg)})`, opacity: c01((f + 1) / 3)}} />
+    <div style={{position: 'absolute', left: 0, width: 1080, top: 900 - tn * 0.6, height: tn * 1.2, textAlign: 'center', fontFamily: FONTE_A, fontWeight: 700, fontSize: tn, lineHeight: 1.2, color: COR.tinta, whiteSpace: 'nowrap', transform: `scale(${lerp(0.08, 1, nm)})`, opacity: c01((f - 7) / 3)}}>{nome.toUpperCase()}</div>
+    {endereco && <div style={{position: 'absolute', left: 0, width: 1080, top: 1010, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 600, fontSize: te, letterSpacing: '0.04em', color: COR.vermelho, opacity: en, transform: `translateY(${(1 - en) * 24}px)`}}>{endereco}</div>}
+  </>;
+};

package/kits/tunel/elementos/Camera.tsx

@@ -0,0 +1,22 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro) e um soco em cada batida.
+// O quadro nunca fica parado. `batidas` são quadros absolutos do vídeo.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  let z = 1.015 + 0.01 * Math.sin(f / 90) + f * 0.0002, dx = Math.sin(f / 37) * 10, dy = Math.cos(f / 51) * 8;
+  let rot = Math.sin(f / 83) * 0.01;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += 0.03 * d; dx += 6 * d * Math.sin((f - h) * 2.7 + h); dy += 6 * d * Math.cos((f - h) * 3.3 + h);
+    rot += 0.004 * d * Math.sin((f - h) * 1.9 + h);
+  }
+  return {z, dx, dy, rot};
+};
+
+export const Camera: React.FC<CameraProps> = ({batidas = [], forca = 1, children}) => {
+  const c = posCamera(useCurrentFrame(), batidas, forca);
+  return <AbsoluteFill style={{transform: `translate(${c.dx}px, ${c.dy}px) rotate(${c.rot}rad) scale(${c.z})`, transformOrigin: '50% 40%'}}>{children}</AbsoluteFill>;
+};

package/kits/tunel/elementos/Cena.tsx

@@ -0,0 +1,48 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e a saída cruza 10 quadros
+// com a entrada da próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {c01, e5, ob, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'giro' | 'queda' | 'circulo' | 'nenhuma';
+export type Saida = 'sobe' | 'esquerda' | 'zoom' | 'gira' | 'encolhe';
+export const SOBREPOE = 10; // quadros em que a saída desta cena cruza a entrada da próxima
+export const QUADROS_ENTRADA = 12;
+
+const CenaCtx = createContext({duracao: 60});
+/** duração da cena atual em quadros (sem a sobreposição) */
+export const useDuracaoCena = () => useContext(CenaCtx).duracao;
+
+export type CenaProps = {de: number; ate: number; entrada?: Entrada; saida?: Saida; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; saida: Saida; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, saida, ultima, children}) => {
+  const f = useCurrentFrame();
+  const p = seg(f, 0, QUADROS_ENTRADA);
+  const en = entrada === 'nenhuma' ? 0 : 1 - ob(p, 1.2);
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  let clip: string | undefined;
+  if (entrada === 'subir') tf += `translateY(${en * 300}px) `;
+  if (entrada === 'queda') tf += `translateY(${-en * 520}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 800}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 800}px) `;
+  if (entrada === 'giro') tf += `rotate(${-en * 16}deg) scale(${1 + en * 0.6}) `;
+  if (entrada === 'circulo') clip = `circle(${e5(p) * 1700 + 4}px at 50% 52%)`;
+  if (saida === 'sobe') tf += `translateY(${-xo * 240}px) scale(${1 + xo * 0.08})`;
+  if (saida === 'esquerda') tf += `translateX(${-xo * 820}px) rotate(${-xo * 4}deg)`;
+  if (saida === 'zoom') tf += `scale(${1 + xo * 0.9})`;
+  if (saida === 'gira') tf += `rotate(${xo * 12}deg) scale(${1 - xo * 0.25}) translateY(${xo * 300}px)`;
+  if (saida === 'encolhe') tf += `scale(${1 - xo * 0.35})`;
+  const blur = c01(en) * 8 + xo * 8;
+  return <AbsoluteFill style={{transform: tf, clipPath: clip, opacity: (1 - c01(en) * 0.85) * (1 - xo), filter: blur > 0.3 ? `blur(${blur}px)` : undefined}}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', saida = 'zoom', 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} saida={saida} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/tunel/elementos/Fundo.tsx

@@ -0,0 +1,13 @@
+// Fundo: creme chapado (a cor da janela). Só um disco claro que passeia bem devagar, pra o chão não ficar morto.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export type FundoProps = {cor?: string; velocidade?: number};
+
+export const Fundo: React.FC<FundoProps> = ({cor = COR.creme, velocidade = 1}) => {
+  const t = (useCurrentFrame() / 30) * velocidade;
+  return <AbsoluteFill style={{background: cor}}>
+    <AbsoluteFill style={{background: `radial-gradient(50% 28% at ${50 + Math.sin(t * 0.5) * 20}% ${40 + Math.cos(t * 0.4) * 8}%, rgba(255,255,255,0.5), transparent 70%)`}} />
+  </AbsoluteFill>;
+};

package/kits/tunel/elementos/LinhasDeVelocidade.tsx

@@ -0,0 +1,25 @@
+// LinhasDeVelocidade: 44 riscos que saem do centro nos cortes (10 quadros). Cada um tem comprimento e
+// distância próprios (120 a 700 px) e some no fim do trajeto.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {ALTURA, CENTRO_Y, COR, LARGURA, e5, rnd, seg} from './base';
+
+export type LinhasDeVelocidadeProps = {
+  inicio?: number;
+  duracao?: number;
+  cor?: string;
+  quantidade?: number;
+};
+
+export const LinhasDeVelocidade: React.FC<LinhasDeVelocidadeProps> = ({inicio = 0, duracao = 10, cor = COR.tinta, quantidade = 44}) => {
+  const f = useCurrentFrame();
+  const p = seg(f, inicio, inicio + duracao);
+  if (p <= 0 || p >= 1) return null;
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0}}>
+    {Array.from({length: quantidade}, (_, i) => {
+      const a = (i / quantidade) * Math.PI * 2 + rnd(i) * 0.1, c = rnd(i + 20), L = 120 + c * 580;
+      const d0 = 460 + e5(p) * 900 * (0.6 + c * 0.6), d1 = d0 + L * (1 - p * 0.5);
+      return <line key={i} x1={LARGURA / 2 + Math.cos(a) * d0} y1={CENTRO_Y + Math.sin(a) * d0} x2={LARGURA / 2 + Math.cos(a) * d1} y2={CENTRO_Y + Math.sin(a) * d1} stroke={cor} strokeWidth={6 + c * 10} strokeLinecap="round" opacity={1 - p} />;
+    })}
+  </svg>;
+};

package/kits/tunel/elementos/Montagem.tsx

@@ -0,0 +1,67 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
+// Ela NÃO decide nada de estética: só põe Fundo + Camera + Cenas + sons onde o plano mandou.
+// Formato do plano: ver exemplos/plano.json e KITS.md (seção "plano de cenas").
+import React, {useEffect, useState} from 'react';
+import {AbsoluteFill, continueRender, delayRender} from 'remotion';
+import {COR, esperarFontes, fontesProntas} from './base';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada, Saida} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {TunelDeFormas} from './TunelDeFormas';
+import {TituloTunel} from './TituloTunel';
+import {NumeroGigante} from './NumeroGigante';
+import {PlacaVoadora} from './PlacaVoadora';
+import {LinhasDeVelocidade} from './LinhasDeVelocidade';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  TunelDeFormas, TituloTunel, NumeroGigante, PlacaVoadora, LinhasDeVelocidade, AssinaturaMarca,
+};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada; saida?: Saida;
+  camadas: Camada[];
+  /** sons relativos ao início da cena */
+  sons?: {som: NomeSom; em: number; volume?: number}[];
+  /** socos de câmera extras, relativos ao início da cena (o início já é um soco) */
+  socos?: number[];
+};
+export type Plano = {kit: string; duracao: number; fundo?: Record<string, unknown>; trilha?: {volume?: number} | false; cenas: CenaPlano[]};
+
+/** troca "fotos/foto-01.jpg" pela URL importada, em qualquer prop (texto, lista ou objeto) */
+const resolver = (v: unknown, arquivos: Record<string, string>): unknown => {
+  if (typeof v === 'string') return arquivos[v] ?? v;
+  if (Array.isArray(v)) return v.map((x) => resolver(x, arquivos));
+  if (v && typeof v === 'object') return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, resolver(x, arquivos)]));
+  return v;
+};
+
+export const Montagem: React.FC<{plano: Plano; arquivos?: Record<string, string>}> = ({plano, arquivos = {}}) => {
+  // não desenha nada antes das fontes: as medidas de texto (caber) precisam delas
+  const [ok, setOk] = useState(fontesProntas());
+  useEffect(() => {
+    if (ok) return;
+    const h = delayRender('tunel: aguardando fontes');
+    esperarFontes().then(() => {setOk(true); setTimeout(() => continueRender(h), 40);});
+  }, [ok]);
+  if (!ok) return <AbsoluteFill style={{background: COR.creme}} />;
+  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: COR.creme}}>
+    <Fundo {...(plano.fundo ?? {})} />
+    <Camera batidas={socos} forca={1}>
+      {plano.cenas.map((c, i) => <Cena key={i} de={c.de} ate={c.ate} entrada={c.entrada} saida={c.saida} ultima={i === ultima}>
+        {c.camadas.map((k, j) => {
+          const El = ELEMENTOS[k.elemento];
+          if (!El) throw new Error(`tunel: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    {plano.cenas.flatMap((c, i) => (c.sons ?? []).map((s, j) => <Efeito key={`${i}-${j}`} som={s.som} em={c.de + s.em} volume={s.volume} />))}
+    {plano.trilha !== false && <Trilha volume={plano.trilha?.volume} />}
+  </AbsoluteFill>;
+};

package/kits/tunel/elementos/NumeroGigante.tsx

@@ -0,0 +1,28 @@
+// NumeroGigante: número ou data enorme em Syncopate 700, que chega do ponto de fuga com overshoot; uma barra
+// vermelha cresce embaixo e a legenda (Chakra Petch) sobe depois. Atravessa a tela se `fim` for dado.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {CENTRO_Y, COR, FAM_A, FAM_B, FONTE_A, FONTE_B, caber, c01, e5, lerp, ob, seg} from './base';
+
+export type NumeroGiganteProps = {
+  texto: string;
+  legenda?: string;
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  fim?: number;
+  cor?: string;
+};
+
+export const NumeroGigante: React.FC<NumeroGiganteProps> = ({texto, legenda, y = CENTRO_Y - 30, tamanho = 320, inicio = 0, fim, cor = COR.tinta}) => {
+  const f = useCurrentFrame();
+  const tam = caber(texto, tamanho, FAM_A, 700, 700, 0);
+  const p = ob(seg(f, inicio, inicio + 16), 1.7), sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 12));
+  if (f < inicio - 1 || sai >= 1) return null;
+  const barra = e5(seg(f, inicio + 10, inicio + 22)), leg = e5(seg(f, inicio + 14, inicio + 26));
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `scale(${lerp(1, 6, sai)})`, transformOrigin: `50% ${y}px`, filter: sai > 0.02 ? `blur(${sai * 10}px)` : undefined}}>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: y - tam * 0.6, height: tam * 1.2, textAlign: 'center', fontFamily: FONTE_A, fontWeight: 700, fontSize: tam, lineHeight: 1.2, color: cor, whiteSpace: 'nowrap', transform: `scale(${lerp(0.08, 1, p)})`, opacity: c01((f - inicio + 1) / 3)}}>{texto}</div>
+    <div style={{position: 'absolute', left: 540 - 220 * barra, width: 440 * barra, top: y + tam * 0.62, height: 18, background: COR.vermelho}} />
+    {legenda && <div style={{position: 'absolute', left: 0, width: 1080, top: y + tam * 0.62 + 44, textAlign: 'center', fontFamily: FONTE_B, fontWeight: 600, fontSize: caber(legenda, 56, FAM_B, 780, 600, 0.04), letterSpacing: '0.04em', color: cor, opacity: leg, transform: `translateY(${(1 - leg) * 26}px)`}}>{legenda}</div>}
+  </div>;
+};

package/kits/tunel/elementos/PlacaVoadora.tsx

@@ -0,0 +1,28 @@
+// PlacaVoadora: placa colorida (cantos 36 px, borda preta) com 1–2 linhas. Nasce no ponto de fuga, cresce até 1
+// com overshoot, para pra leitura e atravessa a tela em `fim` (escala 6x, desfoque, some).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {CENTRO_Y, COR, FAM_A, FONTE_A, caber, c01, e5, lerp, ob, seg} from './base';
+
+export type PlacaVoadoraProps = {
+  linhas: string[];
+  cor?: string;
+  corTexto?: string;
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  fim?: number;
+  /** graus de inclinação final */
+  rot?: number;
+};
+
+export const PlacaVoadora: React.FC<PlacaVoadoraProps> = ({linhas, cor = COR.mostarda, corTexto = COR.tinta, y = CENTRO_Y, tamanho = 84, inicio = 0, fim, rot = -4}) => {
+  const f = useCurrentFrame();
+  const p = ob(seg(f, inicio, inicio + 16), 1.7), sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 12));
+  if (f < inicio - 1 || sai >= 1) return null;
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, 620, 700, 0)));
+  const h = tam * 1.25 * linhas.length + 150;
+  return <div style={{position: 'absolute', left: 540 - 380, top: y - h / 2, width: 760, height: h, borderRadius: 36, background: cor, border: `12px solid ${COR.tinta}`, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', transform: `scale(${lerp(0.08, 1, p) * lerp(1, 6, sai)}) rotate(${rot * p}deg)`, transformOrigin: '50% 50%', opacity: c01((f - inicio + 1) / 3) * (1 - sai), filter: sai > 0.02 ? `blur(${sai * 10}px)` : undefined}}>
+    {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE_A, fontWeight: 700, fontSize: tam, lineHeight: 1.25, color: corTexto, whiteSpace: 'nowrap'}}>{l}</div>)}
+  </div>;
+};

package/kits/tunel/elementos/Som.tsx

@@ -0,0 +1,33 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`), trilha de `music make`.
+// Ver assets/ASSETS.md. Regra: um som por movimento que importa, 1 a 2 quadros ANTES do visual.
+import React from 'react';
+import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
+import whoosh from '../assets/sons/whoosh.mp3';
+import passa from '../assets/sons/passa.mp3';
+import impacto from '../assets/sons/impacto.mp3';
+import tick from '../assets/sons/tick.mp3';
+import varre from '../assets/sons/varre.mp3';
+import subida from '../assets/sons/subida.mp3';
+import clique from '../assets/sons/clique.mp3';
+import assinatura from '../assets/sons/assinatura.mp3';
+import trilha from '../assets/trilha/tech-128bpm.mp3';
+
+export const SONS = {'whoosh': whoosh, 'passa': passa, 'impacto': impacto, 'tick': tick, 'varre': varre, 'subida': subida, 'clique': clique, 'assinatura': assinatura} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha
+const VOLUME: Record<NomeSom, number> = {'whoosh': 0.9, 'passa': 0.85, 'impacto': 0.85, 'tick': 0.7, 'varre': 0.7, 'subida': 0.6, 'clique': 0.8, 'assinatura': 0.9};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (absoluto, ou relativo à Cena se estiver dentro de uma) */
+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; /** quadros de fade no fim */ saida?: number};
+/** a trilha do kit, do quadro 0 ao fim, com fade de saída */
+export const Trilha: React.FC<TrilhaProps> = ({volume = 0.55, 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/tunel/elementos/TituloTunel.tsx

@@ -0,0 +1,32 @@
+// TituloTunel: 1 a 2 linhas em Syncopate 700 que nascem no ponto de fuga (8% do tamanho), crescem até a janela
+// com overshoot, ficam paradas pra leitura e atravessam a tela (escala 6x, some) quando chega `fim`.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {CENTRO_Y, COR, FAM_A, FONTE_A, c01, caber, e5, lerp, ob, seg} from './base';
+
+export type TituloTunelProps = {
+  linhas: string[];
+  y?: number;
+  tamanho?: number;
+  inicio?: number;
+  intervalo?: number;
+  /** quadro em que começa a atravessar a tela (sem isso fica até o fim) */
+  fim?: number;
+  cor?: string;
+  /** linha (índice) pintada de vermelho */
+  destaque?: number;
+};
+
+export const TituloTunel: React.FC<TituloTunelProps> = ({linhas, y = CENTRO_Y, tamanho = 150, inicio = 0, intervalo = 6, fim, cor = COR.tinta, destaque}) => {
+  const f = useCurrentFrame();
+  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, FAM_A, 660, 700, 0)));
+  const passo = tam * 1.15, topo = y - ((linhas.length - 1) * passo) / 2;
+  const sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 12));
+  if (sai >= 1) return null;
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `scale(${lerp(1, 6, sai)})`, transformOrigin: `50% ${y}px`, filter: sai > 0.02 ? `blur(${sai * 10}px)` : undefined}}>
+    {linhas.map((l, i) => {
+      const em = inicio + i * intervalo, p = ob(seg(f, em, em + 16), 1.7);
+      return <div key={i} style={{position: 'absolute', left: 0, width: 1080, top: topo + i * passo - tam * 0.6, height: tam * 1.2, textAlign: 'center', fontFamily: FONTE_A, fontWeight: 700, fontSize: tam, lineHeight: 1.2, color: destaque === i ? COR.vermelho : cor, whiteSpace: 'nowrap', transform: `scale(${lerp(0.08, 1, p)})`, transformOrigin: `50% ${50 + ((CENTRO_Y - (topo + i * passo)) / (tam * 1.2)) * 100}%`, opacity: c01((f - em + 1) / 3)}}>{l}</div>;
+    })}
+  </div>;
+};

package/kits/tunel/elementos/TunelDeFormas.tsx

@@ -0,0 +1,52 @@
+// TunelDeFormas: 14 anéis chapados vindo na direção da câmera, em perspectiva exponencial (r = 30·(1500/30)^t),
+// com torção e curva. No centro fica uma janela limpa, da mesma forma do túnel, onde o texto mora.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {ALTURA, CENTRO_Y, COR, CORES_FAIXA, LARGURA, poligono, seg, e5} from './base';
+
+export type FormaTunel = 'quadrado' | 'circulo' | 'hexagono' | 'triangulo' | 'octogono';
+export type TunelDeFormasProps = {
+  forma?: FormaTunel;
+  /** apótema da janela limpa, em px (0 = sem janela) */
+  abertura?: number;
+  /** anéis por segundo */
+  velocidade?: number;
+  /** quanto os anéis giram, 0..2 */
+  torcao?: number;
+  /** quanto o túnel faz curva, 0..2 */
+  curva?: number;
+  cores?: string[];
+  /** cor da janela */
+  janela?: string;
+  /** quadros até a velocidade cair a 40% no fim (marca) */
+  desacelera?: number;
+  /** o túnel se abre (a janela cresce de 0) em N quadros */
+  abre?: number;
+};
+
+const LADOS: Record<FormaTunel, number> = {quadrado: 4, circulo: 0, hexagono: 6, triangulo: 3, octogono: 8};
+const N = 14;
+
+export const TunelDeFormas: React.FC<TunelDeFormasProps> = ({forma = 'quadrado', abertura = 400, velocidade = 0.43, torcao = 1, curva = 1, cores = CORES_FAIXA, janela = COR.creme, desacelera, abre = 14}) => {
+  const f = useCurrentFrame();
+  const v = desacelera ? velocidade * (1 - 0.6 * seg(f, 0, desacelera)) : velocidade;
+  const cam = (f / 30) * v + 6.3;
+  const k0 = Math.floor(cam * N), lados = LADOS[forma];
+  const janelaR = abertura * e5(seg(f, 0, abre));
+  const aneis = [];
+  for (let k = k0 - N + 1; k <= k0; k++) {
+    const t = (cam * N - k) / N, r = 30 * Math.pow(1500 / 30, t);
+    if (r <= janelaR) continue;
+    const bend = Math.pow(1 - t, 2) * 120 * curva, cx = LARGURA / 2 + Math.sin(f * 0.05 + 1) * bend, cy = CENTRO_Y + Math.cos(f * 0.04) * bend * 0.6;
+    const rot = ((1 - t) * 70 * torcao + f * 0.25 * torcao) * (Math.PI / 180);
+    const cor = cores[((k % cores.length) + cores.length) % cores.length];
+    aneis.push(lados === 0
+      ? <circle key={k} cx={cx} cy={cy} r={r} fill={cor} />
+      : <polygon key={k} points={poligono(lados, r, cx, cy, rot)} fill={cor} />);
+  }
+  return <svg width={LARGURA} height={ALTURA} viewBox={`0 0 ${LARGURA} ${ALTURA}`} style={{position: 'absolute', inset: 0}}>
+    <rect width={LARGURA} height={ALTURA} fill={cores[0]} />
+    {aneis}
+    {janelaR > 1 && (lados === 0 ? <circle cx={LARGURA / 2} cy={CENTRO_Y} r={janelaR} fill={janela} /> : <polygon points={poligono(lados, janelaR, LARGURA / 2, CENTRO_Y, 0)} fill={janela} />)}
+  </svg>;
+};