primocode 10.17.1 → 11.0.0

package/kits/stripe-ondas/assets/ASSETS.md

@@ -0,0 +1,18 @@
+# Assets do kit stripe-ondas
+
+| arquivo | o que é | origem | licença |
+|---|---|---|---|
+| `fontes/inter.woff2` | Inter (subset latino) | Google Fonts, baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-Inter.txt` |
+| `fontes/dm-mono.woff2` | DM Mono (subset latino) | Google Fonts, baixado em 26/10/2026 | SIL OFL 1.1 — texto em `fontes/OFL-DM-Mono.txt` |
+| `sons/whoosh-entra.mp3` | efeito `whoosh_in` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/whoosh-sai.mp3` | efeito `whoosh_out` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/swoosh.mp3` | efeito `swoosh` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/pop-palavra.mp3` | efeito `word_pop` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/pop-cartao.mp3` | efeito `icon_pop` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/clique.mp3` | efeito `button` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/impacto.mp3` | efeito `impact` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/subida.mp3` | efeito `riser` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `sons/assinatura.mp3` | efeito `logo_sting` | sintetizado: MotionCraft `sfx make`, pacote do kit | sem samples; síntese própria (CC0) |
+| `trilha/trilha.mp3` | 9 s de trilha | MotionCraft `music make` ({"preset": "dreamy", "bpm": 96, "key": "Bb", "lead": "glock", "drums": "soft", "comp": "sustain", "brightness": 1.0}) | sem samples; síntese própria (CC0). MotionCraft é MIT |
+
+Conteúdo de demonstração (fica em `exemplos/`, não faz parte do estilo): desenhado no código ou SVG próprio, sem fotos de terceiros, a menos que listado abaixo.

package/kits/stripe-ondas/assets/fontes/OFL-DM-Mono.txt

@@ -0,0 +1,93 @@
+Copyright The DM Mono Project Authors (https://www.github.com/googlefonts/dm-mono)
+
+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/stripe-ondas/assets/fontes/OFL-Inter.txt

@@ -0,0 +1,93 @@
+Copyright The Inter 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/stripe-ondas/elementos/AssinaturaMarca.tsx

@@ -0,0 +1,18 @@
+// AssinaturaMarca: o logo sobe sobre as ondas, o nome em Inter 700 azul-marinho, a linha de apoio e o endereço em mono. Última cena.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, caber, e5, eb, seg} from './base';
+
+export type AssinaturaMarcaProps = {logo: string; nome: string; detalhe?: string; endereco?: string; inicio?: number; y?: number};
+
+export const AssinaturaMarca: React.FC<AssinaturaMarcaProps> = ({logo, nome, detalhe, endereco, inicio = 0, y = 620}) => {
+  const f = useCurrentFrame();
+  const lg = eb(seg(f, inicio, inicio + 18)), nm = e5(seg(f, inicio + 6, inicio + 22));
+  const tam = caber(nome, 260, 860, 700, -0.05);
+  return <div style={{position: 'absolute', inset: 0}}>
+    <img src={logo} style={{position: 'absolute', left: 540 - 150, top: y - 330, width: 300, height: 300, borderRadius: 70, boxShadow: '0 40px 80px rgba(10,37,64,0.25)', transform: `scale(${lg}) rotate(${(1 - lg) * 60}deg)`, opacity: c01(lg * 2)}} />
+    <div style={{position: 'absolute', left: 0, right: 0, top: y - 10, textAlign: 'center', fontFamily: FONTE_D, fontWeight: 700, fontSize: tam, letterSpacing: '-0.05em', lineHeight: 1.05, color: COR.tinta, clipPath: `inset(0 ${(1 - nm) * 100}% 0 0)`}}>{nome}</div>
+    {detalhe && <div style={{position: 'absolute', left: 0, right: 0, top: y + tam * 1.1, textAlign: 'center', fontFamily: FONTE_D, fontWeight: 600, fontSize: 56, color: COR.tinta, opacity: c01((f - inicio - 20) / 8)}}>{detalhe}</div>}
+    {endereco && <div style={{position: 'absolute', left: 0, right: 0, top: y + tam * 1.1 + 90, textAlign: 'center', fontFamily: FONTE_T, fontWeight: 500, fontSize: 42, letterSpacing: '0.08em', color: COR.coral, opacity: c01((f - inicio - 26) / 8)}}>{endereco}</div>}
+  </div>;
+};

package/kits/stripe-ondas/elementos/Camera.tsx

@@ -0,0 +1,23 @@
+// Camera: deriva constante por baixo de tudo e um soco em cada batida. O quadro nunca fica parado.
+// `batidas` são quadros absolutos do vídeo. Parâmetros do kit em base.ts (CAMERA).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {CAMERA} from './base';
+
+export type CameraProps = {batidas?: number[]; forca?: number; children: React.ReactNode};
+
+export const posCamera = (f: number, batidas: number[], forca = 1) => {
+  const C = CAMERA;
+  let z = C.z + C.zOsc * Math.sin(f / 90) + f * C.push, dx = Math.sin(f / 37) * C.dx, dy = Math.cos(f / 51) * C.dy;
+  const rot = Math.sin(f / 83) * C.rot;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += C.soco * d; dx += C.dx * 0.8 * d * Math.sin((f - h) * 2.7 + h); dy += C.dy * 0.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/stripe-ondas/elementos/CartaoPagamento.tsx

@@ -0,0 +1,35 @@
+// CartaoPagamento: um cartão branco de interface, com sombra macia em duas camadas, que flutua em 3D (inclinação que deriva).
+// Valor contando, selo "aprovado" que estala, linhas do pedido que entram.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, e3, e5, eb, lerp, seg} from './base';
+import {useDuracaoCena} from './Cena';
+
+export type CartaoPagamentoProps = {valor: number; moeda?: string; rotulo?: string; status?: string; itens: {nome: string; preco: string}[]; inicio?: number; y?: number};
+
+const SOMBRA = '0 60px 110px rgba(10,37,64,0.20), 0 18px 40px rgba(10,37,64,0.10)';
+
+export const CartaoPagamento: React.FC<CartaoPagamentoProps> = ({valor, moeda = 'R$', rotulo = 'Pagamento', status = 'Aprovado', itens, inicio = 0, y = 720}) => {
+  const f = useCurrentFrame(), dur = useDuracaoCena();
+  const en = eb(seg(f, inicio, inicio + 18)), n = e5(seg(f, inicio + 6, inicio + 28));
+  const ry = lerp(-14, 12, e3(f / dur)), rx = lerp(8, -4, e3(f / dur));
+  const v = (valor * n).toFixed(2).replace('.', ',');
+  const sel = eb(seg(f, inicio + 26, inicio + 38));
+  return <div style={{position: 'absolute', left: 0, right: 0, top: y - 400, height: 800, perspective: 2200}}>
+    <div style={{position: 'absolute', left: 110, width: 860, top: 40, background: '#fff', borderRadius: 44, boxShadow: SOMBRA, padding: '56px 60px', transform: `translateY(${(1 - en) * 300}px) rotateY(${ry}deg) rotateX(${rx}deg) scale(${0.8 + 0.2 * en})`, opacity: c01(en * 2)}}>
+      <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 30, letterSpacing: '0.12em', textTransform: 'uppercase', color: COR.mute}}>{rotulo}</div>
+      <div style={{fontFamily: FONTE_D, fontWeight: 700, fontSize: 150, letterSpacing: '-0.045em', color: COR.tinta, marginTop: 6, whiteSpace: 'nowrap'}}>{moeda} {v}</div>
+      <div style={{display: 'inline-flex', alignItems: 'center', gap: 14, marginTop: 14, background: 'rgba(39,201,224,0.16)', color: '#0B7C8C', borderRadius: 40, padding: '10px 28px 10px 14px', transform: `scale(${sel})`, transformOrigin: '0 50%', fontFamily: FONTE_D, fontWeight: 700, fontSize: 40}}>
+        <span style={{width: 48, height: 48, borderRadius: 24, background: COR.ciano, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 32}}>✓</span>{status}
+      </div>
+      <div style={{marginTop: 44, borderTop: '3px solid #E6EBF1'}}>
+        {itens.map((it, i) => {
+          const e = e5(seg(f, inicio + 18 + i * 4, inicio + 30 + i * 4));
+          return <div key={i} style={{display: 'flex', justifyContent: 'space-between', padding: '24px 0', borderBottom: '3px solid #E6EBF1', fontFamily: FONTE_D, fontWeight: 600, fontSize: 44, color: COR.tinta, opacity: e, transform: `translateX(${(1 - e) * 80}px)`}}>
+            <span>{it.nome}</span><span style={{fontFamily: FONTE_T, fontWeight: 500, color: COR.mute}}>{it.preco}</span>
+          </div>;
+        })}
+      </div>
+    </div>
+  </div>;
+};

package/kits/stripe-ondas/elementos/Cena.tsx

@@ -0,0 +1,46 @@
+// Cena: janela de tempo de um plano. Entra com movimento e sai com movimento (conforme a entrada).
+// Dentro dela, useCurrentFrame() começa em 0. A saída cruza SOBREPOE quadros com a próxima cena.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {COR, e5, seg, LARGURA} from './base';
+
+export type Entrada = 'subir' | 'zoom' | 'direita' | 'esquerda' | 'whip' | 'cortina' | 'corte' | 'nenhuma';
+export const SOBREPOE = 10;
+const COM_SAIDA: Entrada[] = ['subir', 'zoom', 'direita', 'esquerda', 'whip'];
+
+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 dur = entrada === 'whip' ? 8 : 12;
+  const en = entrada === 'nenhuma' || entrada === 'corte' ? 0 : 1 - e5(seg(f, 0, dur));
+  const sai = !ultima && COM_SAIDA.includes(entrada);
+  const xo = sai ? e5(seg(f, duracao, duracao + SOBREPOE)) : 0;
+  let tf = '';
+  if (entrada === 'subir') tf += `translateY(${en * 260 - xo * 220}px) scale(${1 + xo * 0.06})`;
+  if (entrada === 'zoom') tf += `scale(${1 + en * 0.9 + xo * 0.5})`;
+  if (entrada === 'direita') tf += `translateX(${en * 760 - xo * 760}px)`;
+  if (entrada === 'esquerda') tf += `translateX(${-en * 760 + xo * 760}px)`;
+  if (entrada === 'whip') tf += `translateX(${en * 1500 - xo * 1500}px) skewX(${(en - xo) * -14}deg)`;
+  const blur = en * (entrada === 'whip' ? 34 : 16) + xo * (entrada === 'whip' ? 34 : 14);
+  const opac = entrada === 'whip' ? 1 : (1 - en * 0.85) * (1 - xo);
+  const corte = entrada === 'cortina' ? e5(seg(f, 0, 14)) : 1;
+  return <AbsoluteFill style={{transform: tf || undefined, opacity: opac, filter: blur > 0.3 ? `blur(${blur}px)` : undefined, clipPath: corte < 1 ? `inset(0 ${(1 - corte) * 100}% 0 0)` : undefined}}>
+    {children}
+    {entrada === 'cortina' && corte < 1 && <div style={{position: 'absolute', top: 0, bottom: 0, left: corte * LARGURA - 90, width: 90, background: COR.cortina}} />}
+  </AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'subir', ultima = false, children}) => {
+  const duracao = ate - de;
+  const extra = !ultima && COM_SAIDA.includes(entrada) ? SOBREPOE : 0;
+  return <Sequence from={de} durationInFrames={duracao + extra} layout="none">
+    <CenaCtx.Provider value={{duracao}}>
+      <Janela duracao={duracao} entrada={entrada} ultima={ultima}>{children}</Janela>
+    </CenaCtx.Provider>
+  </Sequence>;
+};

package/kits/stripe-ondas/elementos/FaixaDeOndas.tsx

@@ -0,0 +1,49 @@
+// FaixaDeOndas: o herói do estilo. 18 fitas de seda sobrepostas, inclinadas −12°, que ondulam sem parar com cor que vai de
+// coral a âmbar, rosa e ciano. Entra se desenrolando. Pode ser a faixa de fundo (sob outro herói) ou o próprio herói.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, c01, e5, seg} from './base';
+
+const hex = (h: string) => {const n = parseInt(h.slice(1), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255];};
+const mistura = (paleta: string[], t: number) => {
+  const p = c01(t) * (paleta.length - 1), i = Math.min(paleta.length - 2, Math.floor(p)), k = p - i;
+  const a = hex(paleta[i]), b = hex(paleta[i + 1]);
+  return `rgb(${a.map((v, j) => Math.round(v + (b[j] - v) * k)).join(',')})`;
+};
+
+export type FaixaDeOndasProps = {
+  /** centro vertical da faixa */
+  y?: number;
+  /** altura da faixa em px */
+  altura?: number;
+  inicio?: number;
+  /** 'quente' coral→âmbar→rosa→ciano; 'fria' ciano→rosa→âmbar→coral */
+  variacao?: 'quente' | 'fria';
+  /** amplitude da onda (px) */
+  amplitude?: number;
+  /** velocidade da onda (1 = padrão) */
+  velocidade?: number;
+  opacidade?: number;
+};
+
+export const FaixaDeOndas: React.FC<FaixaDeOndasProps> = ({y = 1000, altura = 760, inicio = 0, variacao = 'quente', amplitude = 110, velocidade = 1, opacidade = 1}) => {
+  const f = useCurrentFrame(), t = (f / 30) * velocidade;
+  const paleta = variacao === 'quente' ? [COR.coral, COR.ambar, COR.rosa, COR.ciano] : [COR.ciano, COR.rosa, COR.ambar, COR.coral];
+  const N = 18, W = 1600, abre = e5(seg(f, inicio, inicio + 24));
+  const gap = (altura / N) * abre;
+  const curva = (k: number) => Array.from({length: 54}, (_, i) => {
+    const x = i * 30;
+    return [x, k * gap + amplitude * abre * (Math.sin(x / 300 + t * 1.3 + k * 0.2) + 0.45 * Math.sin(x / 140 - t * 1.0 + k * 0.42))];
+  });
+  const cs = Array.from({length: N + 1}, (_, k) => curva(k));
+  return <div style={{position: 'absolute', left: -260, top: y - altura / 2, width: W, height: altura, transform: 'rotate(-12deg)', opacity: opacidade * c01(abre * 3)}}>
+    <svg width={W} height={altura + amplitude * 2} viewBox={`0 ${-amplitude} ${W} ${altura + amplitude * 2}`} style={{overflow: 'visible'}}>
+      {Array.from({length: N}, (_, k) => {
+        const a = cs[k], b = cs[k + 1];
+        const d = `M${a.map((p) => `${p[0]},${p[1].toFixed(1)}`).join('L')}L${b.slice().reverse().map((p) => `${p[0]},${p[1].toFixed(1)}`).join('L')}Z`;
+        return <path key={k} d={d} fill={mistura(paleta, k / (N - 1))} opacity={0.88} />;
+      })}
+      {cs.filter((_, k) => k % 3 === 0).map((c, k) => <path key={k} d={`M${c.map((p) => `${p[0]},${p[1].toFixed(1)}`).join('L')}`} fill="none" stroke="#fff" strokeWidth="3" opacity="0.35" />)}
+    </svg>
+  </div>;
+};

package/kits/stripe-ondas/elementos/Fundo.tsx

@@ -0,0 +1,11 @@
+// Fundo: branco-azulado (#F6F9FC) com duas manchas pastel de cor que flutuam devagar. Fica FORA da Camera.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC<{velocidade?: number}> = ({velocidade = 1}) => {
+  const t = (useCurrentFrame() / 30) * velocidade;
+  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.topo} 0%, ${COR.fundo} 55%, #FFFFFF 100%)`}}>
+    <AbsoluteFill style={{background: `radial-gradient(40% 22% at ${25 + Math.sin(t * 0.6) * 18}% ${24 + Math.cos(t * 0.5) * 6}%, rgba(255,122,89,0.16), transparent 70%), radial-gradient(44% 24% at ${78 + Math.cos(t * 0.5) * 14}% ${70 + Math.sin(t * 0.4) * 8}%, rgba(39,201,224,0.16), transparent 70%)`}} />
+  </AbsoluteFill>;
+};

package/kits/stripe-ondas/elementos/GraficoOnda.tsx

@@ -0,0 +1,34 @@
+// GraficoOnda: cartão branco com número gigante contando e uma curva suave que se desenha, com traço em degradê
+// coral → rosa → ciano e área pastel embaixo. A curva respira (uma onda leve corre por ela).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, e5, eb, seg} from './base';
+
+export type GraficoOndaProps = {valor: number; prefixo?: string; sufixo?: string; rotulo: string; serie: number[]; inicio?: number; y?: number};
+
+export const GraficoOnda: React.FC<GraficoOndaProps> = ({valor, prefixo = '', sufixo = '', rotulo, serie, inicio = 0, y = 740}) => {
+  const f = useCurrentFrame(), t = f / 30;
+  const en = eb(seg(f, inicio, inicio + 18)), tr = e5(seg(f, inicio + 6, inicio + 34));
+  const W = 780, H = 380, mx = Math.max(...serie), mn = Math.min(...serie);
+  const pts = Array.from({length: 60}, (_, i) => {
+    const u = i / 59, p = u * (serie.length - 1), a = Math.floor(p), b = Math.min(serie.length - 1, a + 1), k = p - a;
+    const v = serie[a] + (serie[b] - serie[a]) * (k * k * (3 - 2 * k));
+    return [u * W, H - ((v - mn) / (mx - mn || 1)) * (H - 70) - 30 + Math.sin(u * 9 + t * 3) * 7];
+  });
+  const d = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
+  const ult = pts[pts.length - 1];
+  return <div style={{position: 'absolute', left: 90, width: 900, top: y - 440, height: 880, background: '#fff', borderRadius: 44, boxShadow: '0 60px 110px rgba(10,37,64,0.20), 0 18px 40px rgba(10,37,64,0.10)', padding: '50px 60px', transform: `translateY(${(1 - en) * 300}px) scale(${0.8 + 0.2 * en})`, opacity: c01(en * 2)}}>
+    <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 30, letterSpacing: '0.12em', textTransform: 'uppercase', color: COR.mute}}>{rotulo}</div>
+    <div style={{fontFamily: FONTE_D, fontWeight: 700, fontSize: 250, letterSpacing: '-0.05em', lineHeight: 1.05, color: COR.tinta}}>{prefixo}{Math.round(valor * tr)}{sufixo}</div>
+    <svg width={W} height={H} style={{marginTop: 20, overflow: 'visible'}}>
+      <defs>
+        <linearGradient id="go-s" x1="0" x2="1"><stop offset="0" stopColor={COR.coral} /><stop offset="0.5" stopColor={COR.rosa} /><stop offset="1" stopColor={COR.ciano} /></linearGradient>
+        <linearGradient id="go-a" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={COR.rosa} stopOpacity="0.22" /><stop offset="1" stopColor={COR.rosa} stopOpacity="0" /></linearGradient>
+        <clipPath id="go-c"><rect x="-10" y="-20" width={W * tr + 10} height={H + 40} /></clipPath>
+      </defs>
+      {[0.3, 0.6, 0.9].map((k) => <line key={k} x1="0" x2={W} y1={H * k} y2={H * k} stroke="#E6EBF1" strokeWidth="3" />)}
+      <g clipPath="url(#go-c)"><path d={`${d} L${W} ${H} L0 ${H} Z`} fill="url(#go-a)" /><path d={d} fill="none" stroke="url(#go-s)" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round" /></g>
+      <circle cx={pts[Math.floor(59 * tr)][0]} cy={pts[Math.floor(59 * tr)][1]} r="18" fill="#fff" stroke={COR.ciano} strokeWidth="9" />
+    </svg>
+  </div>;
+};

package/kits/stripe-ondas/elementos/Montagem.tsx

@@ -0,0 +1,61 @@
+// Montagem: transforma um plano de cenas (JSON escrito pela IA) em vídeo, usando só os elementos do kit.
+// Ela NÃO decide estética: põe Fundo + Camera + Cenas + sons onde o plano mandou. Formato: exemplos/plano.json.
+import React from 'react';
+import {AbsoluteFill} from 'remotion';
+import {COR} from './base';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {AssinaturaMarca} from './AssinaturaMarca';
+import {CartaoPagamento} from './CartaoPagamento';
+import {FaixaDeOndas} from './FaixaDeOndas';
+import {GraficoOnda} from './GraficoOnda';
+import {PainelCodigo} from './PainelCodigo';
+import {SelosDeMetodo} from './SelosDeMetodo';
+import {TituloLimpo} from './TituloLimpo';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  AssinaturaMarca, CartaoPagamento, FaixaDeOndas, GraficoOnda, PainelCodigo, SelosDeMetodo, TituloLimpo,
+};
+
+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[]};
+
+/** props de cor aceitam o nome do token ("vermelho") ou um hex */
+const CHAVES_COR = ['cor', 'corAnel', 'ponto', 'tinta'];
+/** troca nomes de arquivo ("fotos/a.jpg") pela URL importada, em qualquer prop */
+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, CHAVES_COR.includes(k) && typeof x === 'string' && x in COR ? COR[x as keyof typeof COR] : 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: COR.fundo}}>
+    <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(`stripe-ondas: 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/stripe-ondas/elementos/PainelCodigo.tsx

@@ -0,0 +1,36 @@
+// PainelCodigo: um cartão azul-marinho com um trecho de código digitado letra a letra, em cores de sintaxe
+// (chave ciano, texto âmbar, função rosa). Cursor piscando. Cada linha é uma lista de pedaços {t, c}.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_T, c01, eb, seg} from './base';
+
+export type Pedaco = {t: string; c?: 'rosa' | 'ciano' | 'ambar' | 'mute' | 'branco'};
+export type PainelCodigoProps = {linhas: Pedaco[][]; titulo?: string; inicio?: number; y?: number; /** letras por quadro */ ritmo?: number};
+
+const COR_PEDACO: Record<string, string> = {rosa: COR.rosa, ciano: COR.ciano, ambar: COR.ambar, mute: '#8FA3BC', branco: '#FFFFFF'};
+
+export const PainelCodigo: React.FC<PainelCodigoProps> = ({linhas, titulo = 'cobrar.js', inicio = 0, y = 740, ritmo = 1.1}) => {
+  const f = useCurrentFrame();
+  const en = eb(seg(f, inicio, inicio + 16));
+  let gasto = Math.max(0, (f - inicio - 10) * ritmo);
+  const LH = 88;
+  const total = linhas.reduce((a, l) => a + l.reduce((b, p) => b + p.t.length, 0), 0);
+  return <div style={{position: 'absolute', left: 60, width: 960, top: y - (linhas.length * LH + 160) / 2, background: COR.tinta, borderRadius: 40, boxShadow: '0 60px 110px rgba(10,37,64,0.35)', transform: `scale(${0.75 + 0.25 * en}) translateY(${(1 - en) * 120}px)`, opacity: c01(en * 2), overflow: 'hidden'}}>
+    <div style={{height: 84, display: 'flex', alignItems: 'center', gap: 14, padding: '0 36px', borderBottom: '2px solid rgba(255,255,255,0.10)'}}>
+      {[COR.coral, COR.ambar, COR.ciano].map((c, i) => <div key={i} style={{width: 20, height: 20, borderRadius: 10, background: c}} />)}
+      <div style={{marginLeft: 22, fontFamily: FONTE_T, fontSize: 28, color: '#8FA3BC'}}>{titulo}</div>
+    </div>
+    <div style={{padding: '36px 44px 44px'}}>
+      {linhas.map((l, i) => {
+        const len = l.reduce((b, p) => b + p.t.length, 0);
+        const mostra = Math.max(0, Math.min(len, gasto)); gasto -= len;
+        let resto = mostra;
+        const ativa = mostra > 0 && mostra < len;
+        return <div key={i} style={{height: LH, fontFamily: FONTE_T, fontWeight: 500, fontSize: 42, lineHeight: `${LH}px`, whiteSpace: 'pre', color: '#fff'}}>
+          {l.map((p, j) => {const t = p.t.slice(0, Math.max(0, resto)); resto -= p.t.length; return <span key={j} style={{color: COR_PEDACO[p.c ?? 'branco']}}>{t}</span>;})}
+          {(ativa || (i === linhas.length - 1 && f - inicio > total / ritmo + 10)) && <span style={{display: 'inline-block', width: 20, height: 46, background: COR.ciano, verticalAlign: 'middle', opacity: Math.floor(f / 7) % 2 ? 0.25 : 1}} />}
+        </div>;
+      })}
+    </div>
+  </div>;
+};

package/kits/stripe-ondas/elementos/SelosDeMetodo.tsx

@@ -0,0 +1,27 @@
+// SelosDeMetodo: 3 a 5 pílulas brancas enormes, uma por forma de pagar (ou recurso). Cada uma entra de um lado com overshoot
+// e acende por um instante com uma fita de cor correndo por baixo; um círculo de degradê faz de ícone.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE_D, FONTE_T, c01, e5, eb, seg} from './base';
+
+export type SelosDeMetodoProps = {itens: {nome: string; tag?: string}[]; inicio?: number; intervalo?: number; y?: number};
+
+const ICONES = [[COR.coral, COR.ambar], [COR.rosa, COR.coral], [COR.ciano, COR.rosa], [COR.ambar, COR.ciano], [COR.rosa, COR.ciano]];
+
+export const SelosDeMetodo: React.FC<SelosDeMetodoProps> = ({itens, inicio = 0, intervalo = 6, y = 740}) => {
+  const f = useCurrentFrame();
+  const H = 190, topo = y - (itens.length * H) / 2;
+  const ativo = Math.floor(Math.max(0, f - inicio - 8) / intervalo) % itens.length;
+  return <div style={{position: 'absolute', inset: 0}}>
+    {itens.map((it, i) => {
+      const t0 = inicio + i * intervalo * 0.5, e = eb(seg(f, t0, t0 + 16)), on = i === ativo && f > inicio + 14;
+      const ic = ICONES[i % ICONES.length];
+      return <div key={i} style={{position: 'absolute', left: 90, width: 900, top: topo + i * H, height: H - 26, background: '#fff', borderRadius: 95, boxShadow: on ? '0 40px 80px rgba(10,37,64,0.22)' : '0 24px 50px rgba(10,37,64,0.12)', display: 'flex', alignItems: 'center', gap: 36, padding: '0 44px', transform: `translateX(${(1 - e) * (i % 2 ? 900 : -900)}px) scale(${on ? 1.04 : 1})`, opacity: c01(e * 2), overflow: 'hidden'}}>
+        <div style={{width: 100, height: 100, borderRadius: 50, background: `linear-gradient(135deg, ${ic[0]}, ${ic[1]})`, flexShrink: 0}} />
+        <div style={{fontFamily: FONTE_D, fontWeight: 700, fontSize: 84, letterSpacing: '-0.04em', color: COR.tinta, flex: 1, whiteSpace: 'nowrap'}}>{it.nome}</div>
+        {it.tag && <div style={{fontFamily: FONTE_T, fontWeight: 500, fontSize: 28, letterSpacing: '0.1em', color: COR.mute, textTransform: 'uppercase'}}>{it.tag}</div>}
+        {on && <div style={{position: 'absolute', left: 0, bottom: 0, height: 10, width: `${e5(seg((f - inicio - 8) % intervalo, 0, intervalo * 0.8)) * 100}%`, background: `linear-gradient(90deg, ${ic[0]}, ${ic[1]}, ${COR.ciano})`}} />}
+      </div>;
+    })}
+  </div>;
+};