primocode 10.17.1 → 10.19.0

package/kits/vhs-90/assets/fontes/OFL-BebasNeue.txt

@@ -0,0 +1,93 @@
+Copyright The Bebas Neue Project Authors (https://github.com/dharmatype/Bebas-Neue)
+
+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/vhs-90/assets/fontes/OFL-VT323.txt

@@ -0,0 +1,93 @@
+Copyright The VT323 Project Authors (https://github.com/phoikoi/VT323)
+
+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/vhs-90/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,29 @@
+// AssinaturaMarca: a última cena. Tela azul de AV (varredura de cima em 8 quadros), a fita-logo, o nome em Bebas (até 300 px,
+// branco quente com aberração), a tagline em VT323, "▶ PLAY" piscando e o endereço numa tarja amarela. O nome entra de 1,3x a 1x.
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, eb, seg} from './base';
+
+export type AssinaturaMarcaProps = {nome: string; icone: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({nome, icone, detalhe, endereco, inicio = 0, y = 700}) => {
+  const f = useCurrentFrame();
+  const n = nome.toUpperCase();
+  const tam = caber(n, 300, LARGURA_UTIL, 400, 0.01);
+  const varre = e5(seg(f, inicio, inicio + 8));
+  const p = eb(seg(f, inicio + 6, inicio + 18), 1.6);
+  const ab = 6 + 3 * Math.sin(f / 9 * Math.PI);
+  const base: React.CSSProperties = {position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y - 120, height: tam, lineHeight: `${tam}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontSize: tam, letterSpacing: '0.01em', whiteSpace: 'nowrap'};
+  return <div style={{position: 'absolute', inset: 0}}>
+    <div style={{position: 'absolute', inset: -40, background: COR.azul, clipPath: `inset(0 0 ${(1 - varre) * 100}% 0)`}} />
+    <Img src={icone} style={{position: 'absolute', left: 540 - 100, top: y - 360, width: 200, opacity: seg(f, inicio + 8, inicio + 12), filter: 'drop-shadow(3px 0 0 rgba(255,40,70,0.7)) drop-shadow(-3px 0 0 rgba(0,220,255,0.7))'}} />
+    <div style={{position: 'absolute', inset: 0, opacity: f < inicio + 6 ? 0 : 1, transform: `scale(${1.3 - 0.3 * p})`, transformOrigin: `50% ${y - 120 + tam / 2}px`}}>
+      <div style={{...base, color: 'rgba(255,40,70,0.85)', transform: `translateX(${-ab}px)`, mixBlendMode: 'screen'}}>{n}</div>
+      <div style={{...base, color: 'rgba(0,220,255,0.85)', transform: `translateX(${ab}px)`, mixBlendMode: 'screen'}}>{n}</div>
+      <div style={{...base, color: COR.osd}}>{n}</div>
+    </div>
+    {detalhe && <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y - 120 + tam + 20, textAlign: 'center', fontFamily: FONTE.apoio, fontSize: 60, color: COR.osd, opacity: seg(f, inicio + 18, inicio + 20)}}>{detalhe.toUpperCase()}</div>}
+    <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: y - 120 + tam + 110, textAlign: 'center', fontFamily: FONTE.apoio, fontSize: 64, color: COR.amarelo, opacity: Math.floor(f / 10) % 2 === 0 ? 1 : 0.2}}>▶ PLAY</div>
+    {endereco && <div style={{position: 'absolute', left: 540 - 330, top: y - 120 + tam + 220, width: 660, height: 96, background: COR.amarelo, color: COR.tinta, fontFamily: FONTE.apoio, fontSize: 60, lineHeight: '96px', textAlign: 'center', opacity: seg(f, inicio + 26, inicio + 28)}}>{endereco.toUpperCase()}</div>}
+  </div>;
+};

package/kits/vhs-90/elementos/BarrasRastreio.tsx

@@ -0,0 +1,21 @@
+// BarrasRastreio: a falha de rastreio da fita. Em cada quadro de `em` (relativo à cena), uma faixa de 170 px sobe de y 2000 a −200
+// em 12 quadros (`e5`): ruído de linha (turbulência 0,001 × 0,9), dois fios brancos nas bordas e um tremor de 14 px. É apoio
+// de corte: nunca fica sozinha na cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, e5} from './base';
+
+export type BarrasRastreioProps = {em: number[]; duracao?: number};
+
+export const BarrasRastreio: React.FC<BarrasRastreioProps> = ({em, duracao = 12}) => {
+  const f = useCurrentFrame();
+  const h = em.find((e) => f >= e && f < e + duracao);
+  if (h === undefined) return null;
+  const t = f - h;
+  const y = 2000 - e5(t / duracao) * 2200;
+  return <div style={{position: 'absolute', left: -20, right: -20, top: y, height: 170, transform: `translateX(${Math.sin(t * 3) * 14}px)`, overflow: 'hidden', background: 'rgba(237,232,213,0.22)', mixBlendMode: 'screen'}}>
+    <svg width="1120" height="170" xmlns="http://www.w3.org/2000/svg" style={{position: 'absolute', inset: 0}}><filter id={`rast${h}`}><feTurbulence type="fractalNoise" baseFrequency="0.001 0.9" numOctaves="2" seed={(f % 20) + 1} /><feColorMatrix type="matrix" values="1.6 0 0 0 0.1  1.6 0 0 0 0.1  1.6 0 0 0 0.1  0 0 0 1 0" /></filter><rect width="1120" height="170" filter={`url(#rast${h})`} opacity="0.9" /></svg>
+    <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: 4, background: COR.osd}} />
+    <div style={{position: 'absolute', left: 0, right: 0, bottom: 0, height: 4, background: COR.osd}} />
+  </div>;
+};

package/kits/vhs-90/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 = (fr: number, batidas: number[], forca = 1) => {
+  const f = fr;
+  let z = 1.02 + 0.015 * Math.sin(f / 110), dx = Math.sin(f / 37) * 14, dy = Math.cos(f / 51) * 10;
+  const rot = Math.sin(f / 83) * 0.006;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 8) * forca;
+    z += 0.025 * d; dx += 8 * d * Math.sin((f - h) * 2.7 + h); dy += 8 * d * Math.cos((f - h) * 3.3 + 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% 44%'}}>{children}</AbsoluteFill>;
+};

package/kits/vhs-90/elementos/CapaVHS.tsx

@@ -0,0 +1,28 @@
+// CapaVHS: capa de locadora (640 × 880) em 3D: faixa azul no topo ("VIDEOCLUBE"), foto lavada no meio (saturate 0,7, sépia 0,25,
+// desfoque 0,6 px), faixa vermelha embaixo com o título Bebas e um selo amarelo girado. Entra de 0,6x a 1x com sobra e oscila
+// rotateY −14° ± 5° e rotateX 6° (período 60 quadros).
+import React from 'react';
+import {Img, useCurrentFrame} from 'remotion';
+import {COR, FONTE, caber, eb} from './base';
+
+export type CapaVHSProps = {src: string; titulo: string; topo?: string; selo?: string; y?: number; inicio?: number; foco?: string; fim?: number};
+
+export const CapaVHS: React.FC<CapaVHSProps> = ({src, titulo, topo = 'VIDEOCLUBE', selo, y = 720, inicio = 0, foco = '50% 50%', fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 16, 1.7);
+  const tt = titulo.toUpperCase();
+  const tam = caber(tt, 170, 560, 400, 0.01);
+  const W = 640, H = 880;
+  return <div style={{position: 'absolute', inset: 0, perspective: 2200}}>
+    <div style={{position: 'absolute', left: 540 - W / 2, top: y - H / 2, width: W, height: H, border: `14px solid ${COR.osd}`, boxSizing: 'border-box', background: COR.tinta, transform: `scale(${Math.max(0.001, 0.6 + 0.4 * p)}) rotateY(${-14 + Math.sin(t / 60 * 2 * Math.PI) * 5}deg) rotateX(6deg)`, boxShadow: '0 40px 50px rgba(0,0,0,0.5)'}}>
+      <div style={{height: 90, background: COR.azul, fontFamily: FONTE.apoio, fontSize: 52, lineHeight: '90px', textAlign: 'center', color: COR.osd, letterSpacing: '0.1em'}}>{topo}</div>
+      <div style={{position: 'relative', height: H - 28 - 90 - 190, overflow: 'hidden'}}>
+        <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'saturate(0.7) contrast(1.15) sepia(0.25) hue-rotate(-8deg) blur(0.6px)', transform: `scale(${1.06 + t * 0.0015})`}} />
+      </div>
+      <div style={{height: 190, background: COR.rec, fontFamily: FONTE.titulo, fontSize: tam, lineHeight: '190px', textAlign: 'center', color: COR.osd, whiteSpace: 'nowrap'}}>{tt}</div>
+      {selo && <div style={{position: 'absolute', right: -50, top: 120, width: 190, height: 190, borderRadius: '50%', background: COR.amarelo, color: COR.tinta, fontFamily: FONTE.titulo, fontSize: 58, lineHeight: '58px', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, boxSizing: 'border-box', transform: `rotate(14deg) scale(${Math.max(0.001, eb((t - 10) / 10, 2.4))})`, border: `5px solid ${COR.tinta}`}}>{selo.toUpperCase()}</div>}
+    </div>
+  </div>;
+};

package/kits/vhs-90/elementos/CarimboData.tsx

@@ -0,0 +1,19 @@
+// CarimboData: a data de câmera, laranja (VT323, 60 px), alinhada à direita em y = 1280 e digitada a 0,6 caractere por quadro,
+// com o texto em duas linhas (data e "PLAY ▶"). O cursor pisca a cada 8 quadros. Apoio discreto.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA} from './base';
+
+export type CarimboDataProps = {linhas: string[]; inicio?: number; y?: number; velocidade?: number; fim?: number};
+
+export const CarimboData: React.FC<CarimboDataProps> = ({linhas, inicio = 0, y = 1240, velocidade = 0.6, fim}) => {
+  const f = useCurrentFrame();
+  if (f < inicio || (fim !== undefined && f >= fim)) return null;
+  let resta = (f - inicio) * velocidade;
+  return <div style={{position: 'absolute', right: SEGURA.lado, top: y, textAlign: 'right', fontFamily: FONTE.apoio, fontSize: 60, lineHeight: '64px', color: COR.laranja, textShadow: '3px 0 rgba(255,40,70,0.5), -3px 0 rgba(0,220,255,0.5)'}}>
+    {linhas.map((l, i) => {
+      const n = Math.max(0, Math.min(l.length, Math.floor(resta))); resta -= l.length + 4;
+      return <div key={i}>{l.toUpperCase().slice(0, n)}{n < l.length && Math.floor(f / 8) % 2 === 0 ? '█' : ''}</div>;
+    })}
+  </div>;
+};

package/kits/vhs-90/elementos/Cena.tsx

@@ -0,0 +1,41 @@
+// Cena: janela de tempo de um plano. Entra com movimento (nunca corte seco) e sai deslizando,
+// sobrepondo 8 quadros com a próxima. Dentro dela, useCurrentFrame() começa em 0.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, eb, seg} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'girar' | 'cortar' | 'nenhuma';
+export const SOBREPOE = 8; // quadros em que a saída desta cena cruza a entrada da próxima
+
+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; ultima?: boolean; children: React.ReactNode};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  const q = 8; // quadros da entrada
+  const en = entrada === 'nenhuma' ? 0 : 1 - (entrada === 'cortar' ? eb(seg(f, 0, q)) : e5(seg(f, 0, q)));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 80}px) `;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9}) `;
+  if (entrada === 'direita') tf += `translateX(${en * 232}px) `;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 232}px) `;
+  if (entrada === 'girar') tf += `rotate(${en * -14}deg) scale(${1 + en * 0.5}) `;
+  if (entrada === 'cortar') tf += `scale(${1 + en * 0.14}) `;
+  tf += `translateX(${xo * 20}px)`;
+  const blur = (entrada === 'cortar' ? 0 : en * 3) + xo * 3;
+  const op = entrada === 'cortar' ? 1 - xo : (1 - en * 0.7) * (1 - xo);
+  return <AbsoluteFill style={{transform: tf, opacity: op, 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/vhs-90/elementos/Fundo.tsx

@@ -0,0 +1,27 @@
+// Fundo: a fita escura (quase preto com um brilho azul fraco no alto). `Sobre` põe por cima de tudo (fora da câmera): ruído de
+// grão com semente nova a cada quadro, linhas de varredura de 4 px, vinheta e o OSD fixo (● REC piscando + timecode que corre).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA} from './base';
+
+export const Fundo: React.FC = () => <AbsoluteFill style={{background: COR.tinta}}>
+  <AbsoluteFill style={{background: 'radial-gradient(70% 40% at 50% 30%, rgba(10,31,143,0.35), rgba(10,31,143,0))'}} />
+</AbsoluteFill>;
+
+const dois = (n: number) => String(Math.floor(n)).padStart(2, '0');
+
+export const Sobre: React.FC = () => {
+  const f = useCurrentFrame();
+  const t = 12 * 60 + 7 + f / 30;
+  const tc = `${dois(t / 3600)}:${dois((t / 60) % 60)}:${dois(t % 60)}`;
+  const osd: React.CSSProperties = {position: 'absolute', top: 210, fontFamily: FONTE.apoio, fontSize: 56, lineHeight: '56px', color: COR.osd, textShadow: `3px 0 rgba(255,40,70,0.7), -3px 0 rgba(0,220,255,0.7)`};
+  return <AbsoluteFill style={{pointerEvents: 'none'}}>
+    <AbsoluteFill style={{mixBlendMode: 'overlay', opacity: 0.22}}>
+      <svg width="1080" height="1920" xmlns="http://www.w3.org/2000/svg"><filter id="vhsgrao"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed={f % 60} /><feColorMatrix type="saturate" values="0" /></filter><rect width="1080" height="1920" filter="url(#vhsgrao)" /></svg>
+    </AbsoluteFill>
+    <AbsoluteFill style={{backgroundImage: 'repeating-linear-gradient(180deg, rgba(0,0,0,0.28) 0 2px, rgba(0,0,0,0) 2px 4px)'}} />
+    <AbsoluteFill style={{background: 'radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%)'}} />
+    <div style={{...osd, left: SEGURA.lado, opacity: Math.floor(f / 15) % 2 === 0 ? 1 : 0.15}}><span style={{color: COR.rec}}>●</span> REC</div>
+    <div style={{...osd, right: SEGURA.lado}}>{tc}</div>
+  </AbsoluteFill>;
+};

package/kits/vhs-90/elementos/MenuOSD.tsx

@@ -0,0 +1,27 @@
+// MenuOSD: menu de seleção (caixa preta a 72% com borda de 6 px branco quente): título, e itens em VT323 84 px. O cursor `►` e
+// a barra azul pulam de item em item a cada 18 quadros (a barra muda em 2 quadros). A caixa abre de 0,7x a 1x com sobra.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb} from './base';
+
+export type MenuOSDProps = {titulo?: string; itens: string[]; inicio?: number; passo?: number; y?: number; fim?: number};
+
+export const MenuOSD: React.FC<MenuOSDProps> = ({titulo = 'SELECIONE A FITA', itens, inicio = 0, passo = 18, y = 700, fim}) => {
+  const f = useCurrentFrame();
+  const t = f - inicio;
+  if (t < 0 || (fim !== undefined && f >= fim)) return null;
+  const p = eb(t / 12, 1.6);
+  const sel = Math.min(itens.length - 1, Math.floor(Math.max(0, t - 10) / passo));
+  const linha = 120;
+  const altura = 150 + itens.length * linha + 50;
+  const tam = Math.min(84, ...itens.map((it) => caber(it.toUpperCase(), 84, LARGURA_UTIL - 200, 400, 0, FONTE.apoio.split('"')[1])));
+  return <div style={{position: 'absolute', left: SEGURA.lado, top: y - altura / 2, width: LARGURA_UTIL, height: altura, background: 'rgba(16,18,21,0.72)', border: `6px solid ${COR.osd}`, boxSizing: 'border-box', transform: `scale(${Math.max(0.001, 0.7 + 0.3 * p)})`}}>
+    <div style={{height: 110, lineHeight: '110px', textAlign: 'center', fontFamily: FONTE.apoio, fontSize: 64, color: COR.amarelo, borderBottom: `4px solid ${COR.osd}`, textShadow: '3px 0 rgba(255,40,70,0.7), -3px 0 rgba(0,220,255,0.7)'}}>{titulo}</div>
+    {itens.map((it, i) => {
+      const ativo = i === sel;
+      return <div key={i} style={{position: 'absolute', left: 30, right: 30, top: 130 + i * linha, height: linha - 14, background: ativo ? COR.azul : 'transparent', fontFamily: FONTE.apoio, fontSize: tam, lineHeight: `${linha - 14}px`, color: COR.osd, paddingLeft: 90, opacity: t > 6 + i * 2 ? 1 : 0, textShadow: '3px 0 rgba(255,40,70,0.6), -3px 0 rgba(0,220,255,0.6)'}}>
+        {ativo && <span style={{position: 'absolute', left: 24, color: COR.amarelo}}>►</span>}{it.toUpperCase()}
+      </div>;
+    })}
+  </div>;
+};

package/kits/vhs-90/elementos/Montagem.tsx

@@ -0,0 +1,60 @@
+// 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 from 'react';
+import {AbsoluteFill} from 'remotion';
+import {Fundo, Sobre} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {TituloFita} from './TituloFita';
+import {TelaAzul} from './TelaAzul';
+import {CapaVHS} from './CapaVHS';
+import {MenuOSD} from './MenuOSD';
+import {BarrasRastreio} from './BarrasRastreio';
+import {CarimboData} from './CarimboData';
+import {AssinaturaMarca} from './AssinaturaMarca';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  TituloFita, TelaAzul, CapaVHS, MenuOSD, BarrasRastreio, CarimboData, AssinaturaMarca,
+};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {
+  batida: string; de: number; ate: number; entrada?: Entrada;
+  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; 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 = {}}) => {
+  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: '#101215'}}>
+    <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(`vhs-90: elemento "${k.elemento}" não existe no kit`);
+          return <El key={j} {...(resolver(k.props, arquivos) as object)} />;
+        })}
+      </Cena>)}
+    </Camera>
+    <Sobre />
+    {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/vhs-90/elementos/Som.tsx

@@ -0,0 +1,38 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote paper) e passados por filtro de fita (passa-baixa 5,2 kHz + acrusher 9 bits); trilha de 9 s, 88 bpm, lo-fi quebrada.
+// 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 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 trilha from '../assets/trilha/fita-88bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.5
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.7, 'whoosh-sai': 0.8, swoosh: 0.8, 'pop-palavra': 1, 'pop-cartao': 0.9, clique: 0.8, impacto: 0.9, subida: 0.7, 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.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/vhs-90/elementos/TelaAzul.tsx

@@ -0,0 +1,29 @@
+// TelaAzul: a tela azul de AV (`#0A1F8F`). Uma varredura azul desce de cima em 8 quadros; o texto (VT323, 110 px, branco quente
+// com aberração) é digitado a 0,8 caractere por quadro com cursor em bloco que pisca a cada 8. Etiqueta "AV 1" no topo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, e5, seg} from './base';
+
+export type TelaAzulProps = {linhas: string[]; rotulo?: string; inicio?: number; y?: number; velocidade?: number; tamanho?: number};
+
+export const TelaAzul: React.FC<TelaAzulProps> = ({linhas, rotulo = 'AV 1', inicio = 0, y = 740, velocidade = 0.8, tamanho = 110}) => {
+  const f = useCurrentFrame();
+  const varre = e5(seg(f, inicio, inicio + 8));
+  const tam = Math.min(...linhas.map((l) => caber(l.toUpperCase(), tamanho, LARGURA_UTIL, 400, 0, FONTE.apoio.split('"')[1])));
+  let resta = Math.max(0, (f - inicio - 8) * velocidade);
+  const alt = tam * 1.15;
+  const topo = y - (linhas.length * alt) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    <div style={{position: 'absolute', inset: -40, background: COR.azul, clipPath: `inset(0 0 ${(1 - varre) * 100}% 0)`}} />
+    <div style={{position: 'absolute', right: SEGURA.lado, top: 300, fontFamily: FONTE.apoio, fontSize: 64, color: COR.osd, opacity: seg(f, inicio + 8, inicio + 9), textShadow: '3px 0 rgba(255,40,70,0.7), -3px 0 rgba(0,220,255,0.7)'}}>{rotulo}</div>
+    {linhas.map((l, i) => {
+      const txt = l.toUpperCase();
+      const n = Math.max(0, Math.min(txt.length, Math.floor(resta))); resta -= txt.length + 3;
+      const ativa = n < txt.length || i === linhas.length - 1;
+      const cursor = ativa && Math.floor(f / 8) % 2 === 0 && f > inicio + 8;
+      return <div key={i} style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: topo + i * alt, height: alt, lineHeight: `${alt}px`, textAlign: 'center', fontFamily: FONTE.apoio, fontSize: tam, color: COR.osd, whiteSpace: 'pre', textShadow: '4px 0 rgba(255,40,70,0.7), -4px 0 rgba(0,220,255,0.7)'}}>
+        {txt.slice(0, n)}{cursor && <span style={{background: COR.osd}}>{' '}</span>}
+      </div>;
+    })}
+  </div>;
+};

package/kits/vhs-90/elementos/TituloFita.tsx

@@ -0,0 +1,40 @@
+// TituloFita: título Bebas Neue (até 330 px, branco quente) com aberração de cor (cópias vermelha e ciano a 6 ± 3 px), tremor
+// horizontal em 1 de cada 7 quadros e corte de fatia (a metade de cima desloca 18 px por 3 quadros a cada 23). Entra de 1,3x a 1x
+// com sobra e pisca nos 4 primeiros quadros. `*palavra*` vai em amarelo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb, pedacos, textoLimpo} from './base';
+
+export type TituloFitaProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fim?: number};
+
+export const TituloFita: React.FC<TituloFitaProps> = ({linhas, inicio = 0, intervalo = 9, y = 700, tamanho = 330, fim}) => {
+  const f = useCurrentFrame();
+  if (fim !== undefined && f >= fim) return null;
+  const tams = linhas.map((l) => caber(textoLimpo(l).toUpperCase(), tamanho, LARGURA_UTIL, 400, 0.01));
+  const tam = Math.min(...tams);
+  const alt = tam * 0.95;
+  const topo = y - (linhas.length * alt) / 2;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {linhas.map((l, i) => {
+      const t = f - (inicio + i * intervalo);
+      if (t < 0) return null;
+      const p = eb(t / 10, 1.6);
+      const pisca = t < 4 && t % 2 === 1 ? 0.2 : 1;
+      const jx = f % 7 === 0 ? 5 : 0;
+      const ab = 6 + 3 * Math.sin(f / 9 * Math.PI);
+      const fatia = f % 23 < 3 ? 18 : 0;
+      const txt = pedacos(l.toUpperCase());
+      const corpo = (cor: (d: boolean) => string, extra?: React.CSSProperties) => <div style={{position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: topo + i * alt, height: alt, lineHeight: `${alt}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontSize: tam, letterSpacing: '0.01em', whiteSpace: 'nowrap', ...extra}}>{txt.map((s, j) => <span key={j} style={{color: cor(s.d)}}>{s.t}</span>)}</div>;
+      const camada = (clip: string, dx: number) => <div style={{position: 'absolute', inset: 0, clipPath: clip, transform: `translateX(${dx}px)`}}>
+        {corpo(() => 'rgba(255,40,70,0.85)', {transform: `translateX(${-ab}px)`, mixBlendMode: 'screen'})}
+        {corpo(() => 'rgba(0,220,255,0.85)', {transform: `translateX(${ab}px)`, mixBlendMode: 'screen'})}
+        {corpo((d) => (d ? COR.amarelo : COR.osd))}
+      </div>;
+      const yc = topo + i * alt + alt / 2;
+      return <div key={i} style={{position: 'absolute', inset: 0, opacity: pisca, transform: `translateX(${jx}px) scale(${1.3 - 0.3 * p})`, transformOrigin: `50% ${yc}px`}}>
+        {camada(`inset(0 0 ${1920 - yc}px 0)`, fatia)}
+        {camada(`inset(${yc}px 0 0 0)`, 0)}
+      </div>;
+    })}
+  </div>;
+};