primocode 10.17.0 → 10.19.0

package/kits/infografico/assets/fontes/OFL-Caveat.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Caveat Project Authors (https://fonts.google.com/specimen/Caveat)
+
+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/infografico/assets/fontes/OFL-Outfit.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Outfit Project Authors (https://fonts.google.com/specimen/Outfit)
+
+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/infografico/elementos/Anotacao.tsx

@@ -0,0 +1,34 @@
+// Anotacao: bilhete escrito à mão (Caveat 600) que aparece como se fosse escrito, da esquerda pra direita, com uma setinha
+// torta apontando para `seta`. É o único apoio permitido ao lado de um herói: use curto (até 18 caracteres).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, MANUAL, e5, seg} from './base';
+
+export type AnotacaoProps = {
+  texto: string;
+  /** canto superior esquerdo do texto, px */
+  x: number;
+  y: number;
+  /** vetor (dx, dy) da setinha a partir do fim do texto; omita para não ter seta */
+  seta?: [number, number];
+  tamanho?: number;
+  rot?: number;
+  cor?: string;
+  inicio?: number;
+  fim?: number;
+};
+
+export const Anotacao: React.FC<AnotacaoProps> = ({texto, x, y, seta, tamanho = 96, rot = -5, cor = COR.coral, inicio = 0, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 10) return null;
+  const escreve = e5(seg(f, inicio, inicio + Math.max(10, texto.length * 1.4))), sai = 1 - seg(f, fim, fim + 8);
+  const larg = texto.length * tamanho * 0.42, fimX = x + larg;
+  const p = e5(seg(f, inicio + texto.length * 1.4, inicio + texto.length * 1.4 + 12));
+  return <div style={{position: 'absolute', inset: 0, opacity: sai}}>
+    <div style={{position: 'absolute', left: x, top: y, width: larg + 40, overflow: 'hidden', transform: `rotate(${rot}deg)`, transformOrigin: '0 50%', clipPath: `inset(0 ${(1 - escreve) * 100}% 0 0)`, fontFamily: MANUAL, fontWeight: 600, fontSize: tamanho, lineHeight: 1.1, color: cor, whiteSpace: 'nowrap'}}>{texto}</div>
+    {seta && <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
+      <path d={`M${fimX + 20} ${y + tamanho * 0.5} q${seta[0] * 0.5} ${-30} ${seta[0]} ${seta[1]}`} pathLength={1} fill="none" stroke={cor} strokeWidth={9} strokeLinecap="round" strokeDasharray={1} strokeDashoffset={1 - p} />
+      {p > 0.98 && <path d={`M${fimX + 20 + seta[0] - 24} ${y + tamanho * 0.5 + seta[1] - 6} L${fimX + 20 + seta[0]} ${y + tamanho * 0.5 + seta[1]} L${fimX + 20 + seta[0] + 6} ${y + tamanho * 0.5 + seta[1] - 28}`} fill="none" stroke={cor} strokeWidth={9} strokeLinecap="round" strokeLinejoin="round" />}
+    </svg>}
+  </div>;
+};

package/kits/infografico/elementos/CadeiaPassos.tsx

@@ -0,0 +1,49 @@
+// CadeiaPassos: o processo inteiro de uma vez, em zigue-zague: 3 discos de 280 px (coral, sol, teal) ligados por setas que se
+// desenham uma após a outra, cada passo com o título do lado de fora. Herói da batida de processo; texto sempre fora do disco.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, CORES_NO, FONTE, caber, e5, ov, seg} from './base';
+import {Icone, NomeIcone} from './Icone';
+
+export type CadeiaPassosProps = {
+  passos: {icone: NomeIcone; titulo: string}[];
+  inicio?: number;
+  /** quadros entre um passo e o próximo */
+  intervalo?: number;
+  /** centro vertical do conjunto, px */
+  y: number;
+  fim?: number;
+};
+
+const ORDEM: ('coral' | 'sol' | 'teal')[] = ['coral', 'sol', 'teal'];
+
+export const CadeiaPassos: React.FC<CadeiaPassosProps> = ({passos, inicio = 0, intervalo = 16, y, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const D = 280, gapY = 400, sai = e5(seg(f, fim, fim + 10));
+  const topo = y - ((passos.length - 1) * gapY) / 2;
+  const pos = passos.map((_, i) => ({x: i % 2 === 0 ? 100 + D / 2 : 980 - D / 2, y: topo + i * gapY}));
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
+    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible'}}>
+      {pos.slice(0, -1).map((a, i) => {
+        const b = pos[i + 1], p = e5(seg(f, inicio + i * intervalo + 12, inicio + i * intervalo + 12 + 16));
+        const sx = a.x, sy = a.y + D / 2 + 16, ex = b.x, ey = b.y - D / 2 - 18, cx = (a.x < b.x ? 1 : -1) * 0 + 540, cy = (sy + ey) / 2;
+        return <g key={i}>
+          <path d={`M${sx} ${sy} Q${cx + (a.x < b.x ? -120 : 120)} ${cy} ${ex} ${ey}`} pathLength={1} fill="none" stroke={COR.tinta} strokeWidth={10} strokeLinecap="round" strokeDasharray="1" strokeDashoffset={1 - p} />
+          {p > 0.98 && <path d={`M${ex + (a.x < b.x ? -44 : 44)} ${ey - 34} L${ex} ${ey} L${ex + (a.x < b.x ? 8 : -8)} ${ey - 46}`} fill="none" stroke={COR.tinta} strokeWidth={10} strokeLinecap="round" strokeLinejoin="round" />}
+        </g>;
+      })}
+    </svg>
+    {passos.map((s, i) => {
+      const t = ov(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16)), desenho = e5(seg(f, inicio + i * intervalo + 6, inicio + i * intervalo + 22));
+      const esq = i % 2 === 0, tam = caber(s.titulo, 84, 480, 800, -0.03, 'IG Outfit');
+      return <React.Fragment key={i}>
+        <div style={{position: 'absolute', left: pos[i].x - D / 2, top: pos[i].y - D / 2, width: D, height: D, borderRadius: '50%', background: CORES_NO[ORDEM[i % 3]], border: `9px solid ${COR.tinta}`, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${Math.max(0, t)}) rotate(${(1 - t) * -50}deg)`}}>
+          <Icone nome={s.icone} tamanho={D * 0.56} desenho={desenho} />
+          <div style={{position: 'absolute', right: -6, top: -6, width: 84, height: 84, borderRadius: 42, background: COR.tinta, color: COR.creme, fontFamily: FONTE, fontWeight: 800, fontSize: 52, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{i + 1}</div>
+        </div>
+        <div style={{position: 'absolute', left: esq ? pos[i].x + D / 2 + 40 : 100, width: 480, top: pos[i].y - 50, height: 100, textAlign: esq ? 'left' : 'right', fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: '100px', color: COR.tinta, letterSpacing: '-0.03em', whiteSpace: 'nowrap', opacity: seg(f, inicio + i * intervalo + 8, inicio + i * intervalo + 16), transform: `translateX(${(1 - ov(seg(f, inicio + i * intervalo + 8, inicio + i * intervalo + 24))) * (esq ? 80 : -80)}px)`}}>{s.titulo}</div>
+      </React.Fragment>;
+    })}
+  </div>;
+};

package/kits/infografico/elementos/Camera.tsx

@@ -0,0 +1,21 @@
+// Camera: deriva constante por baixo de tudo (zoom, deslize e giro mínimos) 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.016 + 0.012 * Math.sin(f / 120) + f * 0.00012, dx = Math.sin(f / 37) * 10, dy = Math.cos(f / 51) * 8;
+  const rot = Math.sin(f / 83) * 0.004;
+  for (const h of batidas) if (f >= h) {
+    const d = Math.exp(-(f - h) / 7) * forca;
+    z += 0.025 * d; dx += 6 * d * Math.sin((f - h) * 2.7 + h); dy += 6 * 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/infografico/elementos/Cena.tsx

@@ -0,0 +1,39 @@
+// Cena: janela de tempo de um plano (troca "revelar"). Dentro dela, useCurrentFrame() começa em 0.
+// A saída da cena cruza 14 quadros com a entrada da próxima.
+import React, {createContext, useContext} from 'react';
+import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
+import {e5, seg} from './base';
+
+export type Entrada = 'cortina' | 'baixo' | 'circulo' | 'flip' | 'nenhuma';
+export const SOBREPOE = 14; // 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 estilo = (f: number, duracao: number, entrada: Entrada, ultima: boolean): React.CSSProperties => {
+  const p = entrada === 'nenhuma' ? 1 : e5(seg(f, 0, 14));
+  const xo = ultima ? 0 : e5(seg(f, duracao, duracao + SOBREPOE));
+  const base = {transform: `scale(${1 - xo * 0.05})`, opacity: 1 - xo * 0.6} as React.CSSProperties;
+  if (p >= 1) return base;
+  if (entrada === 'cortina') return {...base, clipPath: `polygon(0 0, ${p * 140 - 20}% 0, ${p * 140 - 40}% 100%, 0 100%)`};
+  if (entrada === 'baixo') return {...base, clipPath: `inset(${(1 - p) * 100}% 0 0 0)`};
+  if (entrada === 'circulo') return {...base, clipPath: `circle(${p * 150}% at 50% 55%)`};
+  return {...base, transform: `perspective(1800px) rotateX(${(1 - p) * -80}deg) scale(${1 - xo * 0.05})`, transformOrigin: '50% 0%', opacity: 0.3 + 0.7 * p};
+};
+
+const Janela: React.FC<{duracao: number; entrada: Entrada; ultima: boolean; children: React.ReactNode}> = ({duracao, entrada, ultima, children}) => {
+  const f = useCurrentFrame();
+  return <AbsoluteFill style={estilo(f, duracao, entrada, ultima)}>{children}</AbsoluteFill>;
+};
+
+export const Cena: React.FC<CenaProps> = ({de, ate, entrada = 'cortina', 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/infografico/elementos/Fundo.tsx

@@ -0,0 +1,23 @@
+// Fundo: papel verde-menta com quadriculado fino de prancheta que desliza devagar e cantos marcados (traços de esquadro).
+// Fica FORA da Camera; quem se mexe é o que está em cima.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export type FundoProps = {
+  /** cor do papel */
+  cor?: string;
+  /** velocidade do quadriculado (1 = a do preview) */
+  velocidade?: number;
+};
+
+export const Fundo: React.FC<FundoProps> = ({cor = COR.papel, velocidade = 1}) => {
+  const f = useCurrentFrame() * velocidade;
+  return <AbsoluteFill style={{background: cor}}>
+    <AbsoluteFill style={{backgroundImage: `linear-gradient(rgba(18,34,63,0.07) 2px, transparent 2px), linear-gradient(90deg, rgba(18,34,63,0.07) 2px, transparent 2px)`, backgroundSize: '72px 72px', backgroundPosition: `${f * 0.6}px ${f * 0.9}px`}} />
+    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
+      {[[60, 120, 1, 1], [1020, 120, -1, 1], [60, 1800, 1, -1], [1020, 1800, -1, -1]].map(([x, y, dx, dy], i) =>
+        <path key={i} d={`M${x} ${y + dy * 70} V${y} H${x + dx * 70}`} fill="none" stroke={COR.tinta} strokeWidth={6} strokeOpacity={0.35} strokeLinecap="round" />)}
+    </svg>
+  </AbsoluteFill>;
+};

package/kits/infografico/elementos/GraficoBarras.tsx

@@ -0,0 +1,41 @@
+// GraficoBarras: barras grossas (contorno azul-marinho de 8 px) que crescem com overshoot, uma de cada vez, com o valor
+// contando em cima e o rótulo embaixo; a última barra é teal (o resultado) e as outras alternam coral e sol. Herói.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, MANUAL, e5, lerp, ov, seg} from './base';
+
+export type GraficoBarrasProps = {
+  titulo: string;
+  barras: {rotulo: string; valor: number}[];
+  unidade?: string;
+  inicio?: number;
+  /** quadros entre barras */
+  intervalo?: number;
+  /** base do gráfico (linha do chão), px */
+  y: number;
+  /** altura da maior barra, px */
+  altura?: number;
+  fim?: number;
+};
+
+export const GraficoBarras: React.FC<GraficoBarrasProps> = ({titulo, barras, unidade = '', inicio = 0, intervalo = 7, y, altura = 620, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const max = Math.max(...barras.map((b) => b.valor)), sai = e5(seg(f, fim, fim + 10));
+  const n = barras.length, gap = 28, larg = (880 - gap * (n - 1)) / n;
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
+    <div style={{position: 'absolute', left: 100, width: 880, top: y - altura - 230, fontFamily: FONTE, fontWeight: 800, fontSize: 84, lineHeight: 1.05, color: COR.tinta, letterSpacing: '-0.03em', opacity: seg(f, inicio, inicio + 8), transform: `translateX(${(1 - ov(seg(f, inicio, inicio + 16))) * -700}px)`}}>{titulo}</div>
+    {barras.map((b, i) => {
+      const p = ov(seg(f, inicio + 6 + i * intervalo, inicio + 6 + i * intervalo + 16));
+      const h = (altura * b.valor) / max * Math.max(0, p);
+      const cor = i === n - 1 ? COR.teal : i % 2 ? COR.sol : COR.coral;
+      const v = Math.round(lerp(0, b.valor, e5(seg(f, inicio + 8 + i * intervalo, inicio + 8 + i * intervalo + 18))));
+      return <React.Fragment key={i}>
+        <div style={{position: 'absolute', left: 100 + i * (larg + gap), top: y - h, width: larg, height: h, background: cor, border: `8px solid ${COR.tinta}`, borderBottom: 'none', borderRadius: '28px 28px 0 0', boxSizing: 'border-box'}} />
+        <div style={{position: 'absolute', left: 100 + i * (larg + gap), width: larg, top: y - h - 76, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: 60, color: COR.tinta, fontVariantNumeric: 'tabular-nums', opacity: Math.min(1, p * 2)}}>{v}<span style={{fontSize: 36}}>{unidade}</span></div>
+        <div style={{position: 'absolute', left: 100 + i * (larg + gap), width: larg, top: y + 24, textAlign: 'center', fontFamily: MANUAL, fontWeight: 600, fontSize: 64, color: COR.tinta, opacity: seg(f, inicio + 6 + i * intervalo, inicio + 14 + i * intervalo)}}>{b.rotulo}</div>
+      </React.Fragment>;
+    })}
+    <div style={{position: 'absolute', left: 80, top: y - 4, width: 920 * e5(seg(f, inicio, inicio + 14)), height: 8, background: COR.tinta, borderRadius: 4}} />
+  </div>;
+};

package/kits/infografico/elementos/Icone.tsx

@@ -0,0 +1,35 @@
+// Icone: ícones de traço grosso desenhados em SVG (folha, ciclo, broto, grafico, check, relogio, pessoa, engrenagem).
+// O traço se desenha sozinho (`desenho` 0..1). Usado dentro de NoProcesso e CadeiaPassos; também funciona solto com x/y.
+import React from 'react';
+import {COR} from './base';
+
+export type NomeIcone = 'folha' | 'ciclo' | 'broto' | 'grafico' | 'check' | 'relogio' | 'pessoa' | 'engrenagem';
+
+const CAMINHOS: Record<NomeIcone, string[]> = {
+  folha: ['M18 82 C16 40 48 14 86 14 C88 54 60 86 18 82 Z', 'M18 82 L62 38'],
+  ciclo: ['M82 50 A32 32 0 1 1 64 21', 'M60 6 L66 22 L82 18', 'M18 50 A32 32 0 0 0 36 79'],
+  broto: ['M50 88 V48', 'M50 58 C28 58 18 42 18 28 C38 28 50 40 50 58', 'M50 46 C50 30 62 18 82 18 C82 36 68 46 50 46'],
+  grafico: ['M20 82 V54', 'M46 82 V32', 'M72 82 V16', 'M8 88 H92'],
+  check: ['M20 52 L42 74 L82 26'],
+  relogio: ['M50 14 A36 36 0 1 0 50 86 A36 36 0 1 0 50 14 Z', 'M50 30 V52 L66 62'],
+  pessoa: ['M50 16 A16 16 0 1 0 50 48 A16 16 0 1 0 50 16 Z', 'M16 88 C16 62 34 54 50 54 C66 54 84 62 84 88'],
+  engrenagem: ['M50 34 A16 16 0 1 0 50 66 A16 16 0 1 0 50 34 Z', 'M50 10 V24 M50 76 V90 M10 50 H24 M76 50 H90 M22 22 L32 32 M68 68 L78 78 M78 22 L68 32 M32 68 L22 78'],
+};
+
+export type IconeProps = {
+  nome: NomeIcone;
+  tamanho?: number;
+  cor?: string;
+  /** 0..1: quanto do traço já foi desenhado */
+  desenho?: number;
+  /** centro na tela, px (omita para usar dentro de outro elemento) */
+  x?: number;
+  y?: number;
+};
+
+export const Icone: React.FC<IconeProps> = ({nome, tamanho = 200, cor = COR.tinta, desenho = 1, x, y}) => {
+  const pos: React.CSSProperties = x !== undefined && y !== undefined ? {position: 'absolute', left: x - tamanho / 2, top: y - tamanho / 2} : {};
+  return <svg width={tamanho} height={tamanho} viewBox="0 0 100 100" style={{overflow: 'visible', ...pos}}>
+    {CAMINHOS[nome].map((d, i) => <path key={i} d={d} pathLength={1} fill="none" stroke={cor} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={1} strokeDashoffset={1 - Math.max(0, Math.min(1, desenho))} />)}
+  </svg>;
+};

package/kits/infografico/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 {COR} from './base';
+import {Fundo} from './Fundo';
+import {Camera} from './Camera';
+import {Cena, Entrada} from './Cena';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {Icone} from './Icone';
+import {NoProcesso} from './NoProcesso';
+import {CadeiaPassos} from './CadeiaPassos';
+import {SetaCurva} from './SetaCurva';
+import {GraficoBarras} from './GraficoBarras';
+import {NumeroDestaque} from './NumeroDestaque';
+import {Anotacao} from './Anotacao';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {
+  Icone, NoProcesso, CadeiaPassos, SetaCurva, GraficoBarras, NumeroDestaque, Anotacao,
+};
+
+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; 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 = {}}) => {
+  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.papel}}>
+    <Fundo {...(plano.fundo as object)} />
+    <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(`infografico: 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/infografico/elementos/NoProcesso.tsx

@@ -0,0 +1,33 @@
+// NoProcesso: um passo do processo como herói. Disco chapado de 560 px (coral, sol ou teal) com contorno azul-marinho de 10 px,
+// o ícone desenhando o traço por dentro, o número do passo num selo e o título embaixo. Entra com overshoot e boia.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, CORES_NO, FONTE, caber, e5, ov, seg} from './base';
+import {Icone, NomeIcone} from './Icone';
+
+export type NoProcessoProps = {
+  icone: NomeIcone;
+  numero: number;
+  titulo: string;
+  cor?: 'coral' | 'sol' | 'teal';
+  inicio?: number;
+  /** centro do disco, px */
+  y: number;
+  diametro?: number;
+  fim?: number;
+};
+
+export const NoProcesso: React.FC<NoProcessoProps> = ({icone, numero, titulo, cor = 'coral', inicio = 0, y, diametro = 560, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 10));
+  const desenho = e5(seg(f, inicio + 8, inicio + 30));
+  const tam = caber(titulo, 130, 880, 800, -0.03, 'IG Outfit');
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
+    <div style={{position: 'absolute', left: 540 - diametro / 2, top: y - diametro / 2 + Math.sin(f / 16) * 10, width: diametro, height: diametro, borderRadius: '50%', background: CORES_NO[cor], border: `10px solid ${COR.tinta}`, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${Math.max(0, t)}) rotate(${(1 - t) * -40}deg)`}}>
+      <Icone nome={icone} tamanho={diametro * 0.56} desenho={desenho} />
+      <div style={{position: 'absolute', left: 4, top: 4, width: 128, height: 128, borderRadius: 64, background: COR.tinta, color: COR.creme, fontFamily: FONTE, fontWeight: 800, fontSize: 84, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${ov(seg(f, inicio + 10, inicio + 24))})`}}>{numero}</div>
+    </div>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: y + diametro / 2 + 50, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: 1.1, color: COR.tinta, letterSpacing: '-0.03em', opacity: seg(f, inicio + 12, inicio + 22), transform: `translateY(${(1 - ov(seg(f, inicio + 12, inicio + 28))) * 90}px)`}}>{titulo}</div>
+  </div>;
+};

package/kits/infografico/elementos/NumeroDestaque.tsx

@@ -0,0 +1,35 @@
+// NumeroDestaque: o número da estatística em Outfit 800 de 520 px, preenchido de teal com contorno azul-marinho, contando de 0 até
+// o valor, com um rabisco sublinhado que se desenha e a legenda escrita à mão (Caveat). Herói de abertura ou fecho.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, MANUAL, caber, e5, lerp, ov, seg} from './base';
+
+export type NumeroDestaqueProps = {
+  /** o valor final, ex.: 40 */
+  valor: number;
+  /** o que vem depois do número, ex.: "%" ou "×" */
+  sufixo?: string;
+  legenda: string;
+  inicio?: number;
+  /** centro vertical do número, px */
+  y: number;
+  tamanho?: number;
+  cor?: string;
+  fim?: number;
+};
+
+export const NumeroDestaque: React.FC<NumeroDestaqueProps> = ({valor, sufixo = '', legenda, inicio = 0, y, tamanho = 520, cor = COR.teal, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 12) return null;
+  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 10));
+  const n = Math.round(lerp(0, valor, e5(seg(f, inicio + 2, inicio + 26))));
+  const tam = caber(`${valor}${sufixo}`, tamanho, 860, 800, -0.04, 'IG Outfit');
+  const rabisco = e5(seg(f, inicio + 20, inicio + 36));
+  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 160}px)`}}>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: y - tam * 0.6, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: 1.2, color: cor, WebkitTextStroke: `12px ${COR.tinta}`, paintOrder: 'stroke fill', letterSpacing: '-0.04em', fontVariantNumeric: 'tabular-nums', transform: `translateY(${(1 - t) * 700}px) rotate(${(1 - t) * 8 - 2}deg) scale(${0.8 + 0.2 * t})`}}>{`${n}${sufixo}`}</div>
+    <svg width={760} height={60} viewBox="0 0 760 60" style={{position: 'absolute', left: 160, top: y + tam * 0.6 + 10}}>
+      <path d="M10 34 C 80 6, 120 58, 190 30 S 300 6, 380 32 S 500 58, 570 30 S 690 8, 750 30" pathLength={1} fill="none" stroke={COR.coral} strokeWidth={14} strokeLinecap="round" strokeDasharray={1} strokeDashoffset={1 - rabisco} />
+    </svg>
+    <div style={{position: 'absolute', left: 0, width: 1080, top: y + tam * 0.6 + 90, textAlign: 'center', fontFamily: MANUAL, fontWeight: 600, fontSize: 120, lineHeight: 1.05, color: COR.tinta, opacity: seg(f, inicio + 22, inicio + 32), transform: `translateY(${(1 - ov(seg(f, inicio + 22, inicio + 38))) * 70}px) rotate(-2deg)`}}>{legenda}</div>
+  </div>;
+};

package/kits/infografico/elementos/SetaCurva.tsx

@@ -0,0 +1,33 @@
+// SetaCurva: seta desenhada à mão: uma curva (quadrática) que se traça do ponto `de` ao ponto `ate` e fecha com a ponta em V.
+// Em coordenadas da tela. O traço de 12 px, azul-marinho, termina com uma pequena batida (a ponta pula).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, e5, ov, seg} from './base';
+
+export type SetaCurvaProps = {
+  de: [number, number];
+  ate: [number, number];
+  /** quanto a curva sai da reta (px, com sinal) */
+  curva?: number;
+  cor?: string;
+  inicio?: number;
+  /** quadros para desenhar o traço */
+  duracao?: number;
+  espessura?: number;
+  fim?: number;
+};
+
+export const SetaCurva: React.FC<SetaCurvaProps> = ({de, ate, curva = 120, cor = COR.tinta, inicio = 0, duracao = 18, espessura = 12, fim = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < inicio - 1 || f > fim + 8) return null;
+  const mx = (de[0] + ate[0]) / 2, my = (de[1] + ate[1]) / 2;
+  const dx = ate[0] - de[0], dy = ate[1] - de[1], len = Math.hypot(dx, dy) || 1;
+  const cx = mx - (dy / len) * curva, cy = my + (dx / len) * curva;
+  const p = e5(seg(f, inicio, inicio + duracao)), ponta = ov(seg(f, inicio + duracao - 2, inicio + duracao + 8)), sai = 1 - seg(f, fim, fim + 8);
+  const ang = Math.atan2(ate[1] - cy, ate[0] - cx);
+  const a = (r: number) => `${ate[0] + Math.cos(ang + r) * -46} ${ate[1] + Math.sin(ang + r) * -46}`;
+  return <svg width={1080} height={1920} style={{position: 'absolute', inset: 0, overflow: 'visible', opacity: sai}}>
+    <path d={`M${de[0]} ${de[1]} Q${cx} ${cy} ${ate[0]} ${ate[1]}`} pathLength={1} fill="none" stroke={cor} strokeWidth={espessura} strokeLinecap="round" strokeDasharray={1} strokeDashoffset={1 - p} />
+    {f >= inicio + duracao - 2 && <path d={`M${a(0.55)} L${ate[0]} ${ate[1]} L${a(-0.55)}`} fill="none" stroke={cor} strokeWidth={espessura} strokeLinecap="round" strokeLinejoin="round" transform={`translate(${ate[0]} ${ate[1]}) scale(${ponta}) translate(${-ate[0]} ${-ate[1]})`} />}
+  </svg>;
+};