primocode 10.17.1 → 10.19.0

package/kits/tutorial-tela/assets/fontes/OFL-PlusJakartaSans.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Plus Jakarta Sans Project Authors (https://fonts.google.com/specimen/Plus+Jakarta+Sans)
+
+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/tutorial-tela/elementos/CameraTela.tsx

@@ -0,0 +1,29 @@
+// CameraTela: a câmera da gravação. Chaves {em, x, y, zoom} (x, y = ponto da JANELA que vai pro CENTRO
+// da tela; zoom 0,7 = janela inteira, 2–2,4 = um controle enche a tela). Entre chaves: rampa de
+// velocidade (easeInOutQuint) e DESFOQUE DE MOVIMENTO na direção do deslocamento (até 7 px).
+// `entra`/`sai`: a janela sobe inclinada (rotateX 22° → 0) e sai caindo pra trás.
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {CENTRO, JANELA, chave, e5, seg} from './base';
+
+export type ChaveTela = {em: number; x?: number; y?: number; zoom?: number};
+export type CameraTelaProps = {chaves: ChaveTela[]; entra?: number; sai?: number; children: React.ReactNode};
+
+const estado = (f: number, ks: ChaveTela[]) => ({x: chave(f, ks, 'x', JANELA.l / 2), y: chave(f, ks, 'y', JANELA.a / 2), z: chave(f, ks, 'zoom', 0.7)});
+
+export const CameraTela: React.FC<CameraTelaProps> = ({chaves, entra = 0, sai = 1e9, children}) => {
+  const f = useCurrentFrame();
+  const a = estado(f, chaves), b = estado(f - 1, chaves);
+  const vx = (a.x * a.z - b.x * b.z), vy = (a.y * a.z - b.y * b.z), vz = Math.abs(a.z - b.z) * 600;
+  const bx = Math.min(7, Math.abs(vx) * 0.05 + vz * 0.02), by = Math.min(7, Math.abs(vy) * 0.05 + vz * 0.02);
+  const te = e5(seg(f, entra, entra + 18)), ts = seg(f, sai, sai + 14) ** 2;
+  const tx = CENTRO[0] - a.x * a.z, ty = CENTRO[1] - a.y * a.z;
+  return <AbsoluteFill style={{perspective: 2200}}>
+    <svg width={0} height={0} style={{position: 'absolute'}}><filter id="tt-borrao" x="-10%" y="-10%" width="120%" height="120%"><feGaussianBlur stdDeviation={`${bx.toFixed(2)} ${by.toFixed(2)}`} /></filter></svg>
+    <AbsoluteFill style={{transform: `translateY(${(1 - te) * 900 + ts * 300}px) rotateX(${(1 - te) * 22 + ts * 30}deg) scale(${1 - ts * 0.2})`, transformOrigin: '50% 60%', opacity: 1 - ts}}>
+      <div style={{position: 'absolute', left: 0, top: 0, width: JANELA.l, height: JANELA.a, transformOrigin: '0 0', transform: `translate(${tx}px, ${ty}px) scale(${a.z})`, filter: bx + by > 0.6 ? 'url(#tt-borrao)' : undefined}}>
+        {children}
+      </div>
+    </AbsoluteFill>
+  </AbsoluteFill>;
+};

package/kits/tutorial-tela/elementos/Cursor.tsx

@@ -0,0 +1,36 @@
+// Cursor: o ponteiro GRANDE (seta de 34 × 50 na janela; com zoom 2 vira ~70 px), contorno branco e
+// sombra. Anda entre chaves {em, x, y} em ARCO (desvio de 12% da distância) com rampa de velocidade.
+// Em cada `cliques`: afunda pra 82% por 4 quadros e solta uma ONDA laranja (r 0 → 54, 14 quadros).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, rampa, seg} from './base';
+
+export type CursorProps = {chaves: {em: number; x: number; y: number}[]; cliques?: number[]; aparece?: number; some?: number};
+
+const pos = (f: number, ks: CursorProps['chaves']): [number, number] => {
+  if (f <= ks[0].em) return [ks[0].x, ks[0].y];
+  for (let i = 1; i < ks.length; i++) if (f <= ks[i].em) {
+    const a = ks[i - 1], b = ks[i], t = rampa(seg(f, a.em, b.em));
+    const dx = b.x - a.x, dy = b.y - a.y, arco = Math.sin(Math.PI * t) * 0.12;
+    return [a.x + dx * t - dy * arco, a.y + dy * t + dx * arco];
+  }
+  const u = ks[ks.length - 1]; return [u.x, u.y];
+};
+
+export const Cursor: React.FC<CursorProps> = ({chaves, cliques = [], aparece = 0, some = 1e9}) => {
+  const f = useCurrentFrame();
+  if (f < aparece || f > some) return null;
+  const [x, y] = pos(f, chaves);
+  const ultimo = cliques.filter((c) => c <= f).pop();
+  const aperta = ultimo !== undefined && f - ultimo < 4 ? 0.82 : 1;
+  return <>
+    {cliques.map((c, i) => {
+      const t = seg(f, c, c + 14); if (t <= 0 || t >= 1) return null;
+      const [cx, cy] = pos(c, chaves);
+      return <div key={i} style={{position: 'absolute', left: cx - 54 * t, top: cy - 54 * t, width: 108 * t, height: 108 * t, borderRadius: '50%', border: `4px solid ${COR.acento}`, opacity: 1 - t, background: `rgba(255,91,20,${0.18 * (1 - t)})`}} />;
+    })}
+    <svg width={34} height={50} viewBox="0 0 17 25" style={{position: 'absolute', left: x - 3, top: y - 2, transform: `scale(${aperta})`, transformOrigin: '3px 2px', filter: 'drop-shadow(0 4px 6px rgba(0,0,0,.3))', overflow: 'visible'}}>
+      <path d="M1.5 1.5 L1.5 20 L6 15.6 L9.2 22.6 L12.2 21.3 L9.1 14.5 L15.3 14.5 Z" fill={COR.tinta} stroke="#fff" strokeWidth={1.6} strokeLinejoin="round" />
+    </svg>
+  </>;
+};

package/kits/tutorial-tela/elementos/DestaqueCaixa.tsx

@@ -0,0 +1,17 @@
+// DestaqueCaixa: o foco no controle da vez, dentro da janela. Anel laranja de 4 px (raio 16) que chega
+// grande (1,25 → 1) e pulsa 3%, e um holofote: o resto da janela escurece 22%.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, e5, seg} from './base';
+
+export type DestaqueCaixaProps = {x: number; y: number; largura: number; altura: number; de: number; ate: number; holofote?: boolean};
+
+export const DestaqueCaixa: React.FC<DestaqueCaixaProps> = ({x, y, largura, altura, de, ate, holofote = true}) => {
+  const f = useCurrentFrame();
+  if (f < de || f > ate + 8) return null;
+  const t = e5(seg(f, de, de + 8)) * (1 - seg(f, ate, ate + 8));
+  const s = 1.25 - 0.25 * e5(seg(f, de, de + 10)) + 0.03 * Math.sin(f / 4);
+  const p = 10;
+  return <div style={{position: 'absolute', left: x - p, top: y - p, width: largura + p * 2, height: altura + p * 2, borderRadius: 18, border: `4px solid ${COR.acento}`, opacity: t,
+    transform: `scale(${s})`, boxShadow: holofote ? `0 0 0 3000px rgba(20,22,26,${0.22 * t})` : undefined}} />;
+};

package/kits/tutorial-tela/elementos/Fundo.tsx

@@ -0,0 +1,12 @@
+// Fundo: o chão limpo do tutorial. Cinza-azulado claro com luz no meio, uma grade de pontos de 32 px
+// a 7% e uma deriva lenta da grade (nada fica parado).
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {COR} from './base';
+
+export const Fundo: React.FC = () => {
+  const f = useCurrentFrame();
+  return <AbsoluteFill style={{background: `radial-gradient(90% 60% at 50% 42%, ${COR.chao} 0%, ${COR.chaoFundo} 100%)`}}>
+    <AbsoluteFill style={{backgroundImage: 'radial-gradient(rgba(20,22,26,.07) 2px, transparent 2px)', backgroundSize: '32px 32px', backgroundPosition: `${f * 0.4}px ${f * 0.25}px`}} />
+  </AbsoluteFill>;
+};

package/kits/tutorial-tela/elementos/JanelaApp.tsx

@@ -0,0 +1,81 @@
+// JanelaApp: a "gravação": um app de lista nítido (janela 1400 × 940 com barra, lateral e lista) que
+// MUDA DE ESTADO por quadros, sempre causado pelo clique do cursor: o botão afunda, o modal abre,
+// o texto é digitado com cursor de texto, o Salvar afunda, o modal fecha e a linha nova entra no topo
+// com fundo de destaque. Pontos úteis pra câmera e cursor: veja ALVOS (coordenadas da janela).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, JANELA, MONO, e5, lerp, mola, seg} from './base';
+
+export const ALVOS = {botao: [1230, 124], campo: [850, 440], salvar: [1060, 568], novaLinha: [850, 242]} as const;
+
+export type JanelaAppProps = {
+  endereco?: string;
+  lateral?: string[];
+  titulo: string;
+  /** "{n} tarefas": {n} vira o número de itens */
+  subtitulo?: string;
+  botao: string;
+  itens: {texto: string; tag?: string}[];
+  modal: {titulo: string; placeholder: string; texto: string; botao: string; tag?: string};
+  /** quadros (relativos à gravação): clique no botão, digitação [de, até], clique em salvar */
+  tempos: {abre: number; digita: [number, number]; salva: number};
+};
+
+const Linha: React.FC<{texto: string; tag?: string; y: number; h?: number; destaque?: number; check?: number}> = ({texto, tag, y, h = 84, destaque = 0, check = 0}) =>
+  <div style={{position: 'absolute', left: JANELA.lateral + 40, right: 40, top: y, height: h, overflow: 'hidden', borderRadius: 14, background: destaque > 0 ? `rgba(255,91,20,${0.14 * destaque})` : undefined, boxShadow: destaque > 0 ? `inset 0 0 0 2px rgba(255,91,20,${0.5 * destaque})` : undefined}}>
+    <div style={{position: 'absolute', left: 24, top: 26, width: 32, height: 32, borderRadius: 16, border: `3px solid ${check > 0 ? COR.ok : '#C7CCD4'}`, boxSizing: 'border-box', background: check > 0.5 ? COR.ok : undefined, transform: `scale(${check > 0 ? mola(check) : 1})`}} />
+    <div style={{position: 'absolute', left: 78, top: 22, fontFamily: FONTE, fontWeight: 600, fontSize: 30, color: COR.tinta}}>{texto}</div>
+    {tag && <div style={{position: 'absolute', right: 24, top: 24, padding: '6px 14px', borderRadius: 999, background: '#F0F2F5', fontFamily: MONO, fontSize: 20, color: COR.apagado}}>{tag}</div>}
+    <div style={{position: 'absolute', left: 24, right: 24, bottom: 0, height: 1, background: COR.linha}} />
+  </div>;
+
+export const JanelaApp: React.FC<JanelaAppProps> = ({endereco = 'pauta.app', lateral = ['Hoje', 'Próximos', 'Projetos', 'Arquivo'], titulo, subtitulo = '{n} tarefas', botao, itens, modal, tempos}) => {
+  const f = useCurrentFrame();
+  const apertaB = f >= tempos.abre && f < tempos.abre + 4 ? 0.94 : 1;
+  const abre = e5(seg(f, tempos.abre + 1, tempos.abre + 9)), fecha = seg(f, tempos.salva + 2, tempos.salva + 8);
+  const mod = abre * (1 - fecha);
+  const [d0, d1] = tempos.digita;
+  const n = Math.round(lerp(0, modal.texto.length, seg(f, d0, d1)));
+  const caret = f < d0 + 1 || n < modal.texto.length || Math.floor(f / 8) % 2 === 0;
+  const apertaS = f >= tempos.salva && f < tempos.salva + 4 ? 0.92 : 1;
+  const entra = e5(seg(f, tempos.salva + 6, tempos.salva + 16));
+  const brilho = 1 - seg(f, tempos.salva + 30, tempos.salva + 60);
+  const total = itens.length + (entra > 0 ? 1 : 0);
+  const Y0 = 210;
+  return <div style={{position: 'absolute', inset: 0, width: JANELA.l, height: JANELA.a, borderRadius: 22, overflow: 'hidden', background: COR.tela,
+    boxShadow: '0 60px 120px rgba(20,22,26,.22), 0 12px 30px rgba(20,22,26,.12), 0 0 0 1px rgba(20,22,26,.08)'}}>
+    {/* barra */}
+    <div style={{position: 'absolute', left: 0, right: 0, top: 0, height: JANELA.barra, background: '#FAFAFB', borderBottom: `1px solid ${COR.linha}`}}>
+      {['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => <div key={i} style={{position: 'absolute', left: 24 + i * 26, top: 20, width: 16, height: 16, borderRadius: 8, background: c}} />)}
+      <div style={{position: 'absolute', left: 0, right: 0, top: 14, textAlign: 'center', fontFamily: MONO, fontSize: 20, color: COR.apagado}}>{endereco}</div>
+    </div>
+    {/* lateral */}
+    <div style={{position: 'absolute', left: 0, top: JANELA.barra, bottom: 0, width: JANELA.lateral, background: COR.lateral, borderRight: `1px solid ${COR.linha}`}}>
+      {lateral.map((l, i) => <div key={i} style={{position: 'absolute', left: 20, right: 20, top: 30 + i * 62, height: 50, borderRadius: 10, background: i === 0 ? '#E9ECF1' : undefined,
+        fontFamily: FONTE, fontWeight: i === 0 ? 700 : 500, fontSize: 26, color: i === 0 ? COR.tinta : COR.apagado, lineHeight: '50px', paddingLeft: 18}}>{l}</div>)}
+    </div>
+    {/* cabeçalho */}
+    <div style={{position: 'absolute', left: JANELA.lateral + 60, top: 88, fontFamily: FONTE, fontWeight: 800, fontSize: 54, color: COR.tinta, letterSpacing: '-0.02em'}}>{titulo}</div>
+    <div style={{position: 'absolute', left: JANELA.lateral + 62, top: 154, fontFamily: FONTE, fontWeight: 500, fontSize: 22, color: COR.apagado}}>{subtitulo.replace('{n}', String(total))}</div>
+    <div style={{position: 'absolute', left: 1120, top: 96, width: 220, height: 56, borderRadius: 14, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 700, fontSize: 24,
+      display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${apertaB})`, boxShadow: '0 6px 16px rgba(255,91,20,.35)'}}>{botao}</div>
+    {/* lista */}
+    {entra > 0 && <Linha texto={modal.texto} tag={modal.tag} y={Y0} h={84 * entra} destaque={brilho} />}
+    {itens.map((it, i) => <Linha key={i} texto={it.texto} tag={it.tag} y={Y0 + (i + entra) * 84} />)}
+    {/* modal */}
+    {mod > 0.01 && <>
+      <div style={{position: 'absolute', inset: 0, background: `rgba(20,22,26,${0.28 * mod})`}} />
+      <div style={{position: 'absolute', left: 530, top: 300, width: 640, height: 330, borderRadius: 20, background: COR.tela, opacity: mod, transform: `scale(${0.94 + 0.06 * mod}) translateY(${(1 - mod) * 20}px)`,
+        boxShadow: '0 30px 80px rgba(20,22,26,.3)'}}>
+        <div style={{position: 'absolute', left: 40, top: 34, fontFamily: FONTE, fontWeight: 800, fontSize: 34, color: COR.tinta}}>{modal.titulo}</div>
+        <div style={{position: 'absolute', left: 40, top: 100, width: 560, height: 80, borderRadius: 14, border: `3px solid ${f >= d0 - 4 ? COR.acento : COR.linha}`, boxSizing: 'border-box',
+          boxShadow: f >= d0 - 4 ? `0 0 0 6px ${COR.acentoClaro}` : undefined, fontFamily: FONTE, fontWeight: 600, fontSize: 30, lineHeight: '74px', paddingLeft: 22, color: n ? COR.tinta : '#A3A9B3', whiteSpace: 'nowrap'}}>
+          {n ? modal.texto.slice(0, n) : f >= d0 - 4 ? '' : modal.placeholder}
+          {f >= d0 - 4 && caret && <span style={{display: 'inline-block', width: 3, height: 36, background: COR.acento, verticalAlign: 'middle', marginLeft: 2}} />}
+        </div>
+        <div style={{position: 'absolute', left: 460, top: 240, width: 140, height: 56, borderRadius: 14, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 700, fontSize: 24,
+          display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${apertaS})`}}>{modal.botao}</div>
+      </div>
+    </>}
+  </div>;
+};

package/kits/tutorial-tela/elementos/Montagem.tsx

@@ -0,0 +1,49 @@
+// Montagem: monta o tutorial a partir do plano. A GRAVAÇÃO (janela + câmera + cursor + destaques) é um
+// plano contínuo, como uma gravação de tela de verdade; as cenas são as camadas da tela por cima
+// (título, passos, atalho). A Montagem não decide estética.
+import React from 'react';
+import {AbsoluteFill, Sequence} from 'remotion';
+import {Fundo} from './Fundo';
+import {CameraTela, ChaveTela} from './CameraTela';
+import {JanelaApp, JanelaAppProps} from './JanelaApp';
+import {Cursor, CursorProps} from './Cursor';
+import {DestaqueCaixa, DestaqueCaixaProps} from './DestaqueCaixa';
+import {Efeito, NomeSom, Trilha} from './Som';
+import {TituloTela} from './TituloTela';
+import {PassoChamada} from './PassoChamada';
+import {TeclaAtalho} from './TeclaAtalho';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ELEMENTOS: Record<string, React.FC<any>> = {TituloTela, PassoChamada, TeclaAtalho};
+
+export type Camada = {elemento: string; props: Record<string, unknown>};
+export type CenaPlano = {batida: string; de: number; ate: number; camadas: Camada[]; sons?: {som: NomeSom; em: number; volume?: number}[]};
+export type Plano = {
+  kit: string; duracao: number; trilha?: {volume?: number} | false;
+  /** a gravação: quadros absolutos de/até; dentro dela os tempos são relativos a `de` */
+  gravacao: {de: number; ate: number; entra?: number; sai?: number; camera: ChaveTela[]; janela: JanelaAppProps; cursor: CursorProps; destaques?: DestaqueCaixaProps[]};
+  cenas: CenaPlano[];
+};
+
+export const Montagem: React.FC<{plano: Plano}> = ({plano}) => {
+  const g = plano.gravacao;
+  return <AbsoluteFill>
+    <Fundo />
+    <Sequence from={g.de} durationInFrames={g.ate - g.de} layout="none">
+      <CameraTela chaves={g.camera} entra={g.entra} sai={g.sai}>
+        <JanelaApp {...g.janela} />
+        {(g.destaques ?? []).map((d, i) => <DestaqueCaixa key={i} {...d} />)}
+        <Cursor {...g.cursor} />
+      </CameraTela>
+    </Sequence>
+    {plano.cenas.map((c, i) => <Sequence key={i} from={c.de} durationInFrames={c.ate - c.de} layout="none">
+      {c.camadas.map((k, j) => {
+        const El = ELEMENTOS[k.elemento];
+        if (!El) throw new Error(`tutorial-tela: elemento "${k.elemento}" não existe no kit`);
+        return <El key={j} {...k.props} />;
+      })}
+    </Sequence>)}
+    {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/tutorial-tela/elementos/PassoChamada.tsx

@@ -0,0 +1,22 @@
+// PassoChamada: a legenda do passo, na TELA (não na janela). Cartão branco de 28 px de raio com sombra,
+// o número do passo num círculo laranja de 84 px e o texto em 46 px. Sobe 60 px com mola e sai descendo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, MONO, entradaSaida} from './base';
+
+export type PassoChamadaProps = {numero: number; total?: number; texto: string; y?: number; inicio: number; fim: number};
+
+export const PassoChamada: React.FC<PassoChamadaProps> = ({numero, total = 3, texto, y = 1180, inicio, fim}) => {
+  const f = useCurrentFrame();
+  const {t, op} = entradaSaida(f, inicio, fim);
+  if (op <= 0) return null;
+  return <div style={{position: 'absolute', left: 0, right: 0, top: y, display: 'flex', justifyContent: 'center', opacity: op, transform: `translateY(${(1 - t) * 60}px)`}}>
+    <div style={{display: 'flex', alignItems: 'center', gap: 26, padding: '22px 40px 22px 22px', borderRadius: 28, background: COR.tela, boxShadow: '0 24px 60px rgba(20,22,26,.22), 0 0 0 1px rgba(20,22,26,.06)'}}>
+      <div style={{width: 84, height: 84, borderRadius: 42, background: COR.acento, color: '#fff', fontFamily: FONTE, fontWeight: 800, fontSize: 46, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${0.6 + 0.4 * t})`}}>{numero}</div>
+      <div>
+        <div style={{fontFamily: MONO, fontSize: 22, color: COR.apagado, letterSpacing: '0.08em'}}>PASSO {numero} DE {total}</div>
+        <div style={{fontFamily: FONTE, fontWeight: 800, fontSize: 46, color: COR.tinta, letterSpacing: '-0.01em', whiteSpace: 'nowrap'}}>{texto}</div>
+      </div>
+    </div>
+  </div>;
+};

package/kits/tutorial-tela/elementos/Som.tsx

@@ -0,0 +1,41 @@
+// Som: os efeitos e a trilha do kit. Efeitos sintetizados (MotionCraft `sfx make`, pacote organic-wood); trilha de 8.6 s
+// (MotionCraft `music make`, preset calm-punch, 108 bpm, tom F). Ver assets/ASSETS.md.
+// Regra: um som por movimento que importa, 1 a 2 quadros ANTES do visual.
+import React from 'react';
+import {Audio, Sequence, interpolate, useVideoConfig} from 'remotion';
+import 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 digitar from '../assets/sons/digitar.mp3';
+import sucesso from '../assets/sons/sucesso.mp3';
+import trilha from '../assets/trilha/passo-108bpm.mp3';
+
+export const SONS = {
+  'whoosh-entra': whooshEntra, 'whoosh-sai': whooshSai, swoosh, 'pop-palavra': popPalavra, 'pop-cartao': popCartao, clique, impacto, subida, assinatura, digitar, sucesso,
+} as const;
+export type NomeSom = keyof typeof SONS;
+
+// volume de cada efeito (0..1) já calibrado contra a trilha a 0.42
+const VOLUME: Record<NomeSom, number> = {
+  'whoosh-entra': 0.8, 'whoosh-sai': 0.65, swoosh: 0.85, 'pop-palavra': 0.9, 'pop-cartao': 0.9, clique: 0.9, impacto: 0.85, subida: 0.65, assinatura: 0.85, digitar: 0.6, sucesso: 0.8,
+};
+
+export type EfeitoProps = {som: NomeSom; em: number; volume?: number};
+/** um efeito no quadro `em` (relativo à Cena se estiver dentro de uma, absoluto no resto) */
+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.42, 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/tutorial-tela/elementos/TeclaAtalho.tsx

@@ -0,0 +1,29 @@
+// TeclaAtalho: teclas de verdade (190 px, brancas, com a borda de baixo de 14 px) que entram com mola e
+// são APERTADAS em sequência (descem 10 px, a borda some, a letra fica laranja). Legenda embaixo.
+// "cmd" desenha o símbolo de comando em SVG (não depende da fonte).
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, e5, mola, seg} from './base';
+
+export type TeclaAtalhoProps = {teclas: string[]; legenda?: string; y?: number; inicio?: number; aperta?: number};
+
+const Cmd: React.FC<{cor: string}> = ({cor}) => <svg width={92} height={92} viewBox="0 0 24 24" fill="none" stroke={cor} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
+  <path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z" /></svg>;
+
+export const TeclaAtalho: React.FC<TeclaAtalhoProps> = ({teclas, legenda, y = 760, inicio = 0, aperta}) => {
+  const f = useCurrentFrame();
+  const ap = aperta ?? inicio + 16;
+  return <div style={{position: 'absolute', left: 0, right: 0, top: y}}>
+    <div style={{display: 'flex', justifyContent: 'center', gap: 40}}>
+      {teclas.map((k, i) => {
+        const t = mola(seg(f, inicio + i * 4, inicio + i * 4 + 12));
+        const baixo = f >= ap + i * 3 && f < ap + i * 3 + 30 ? 1 : 0;
+        const c = baixo ? COR.acento : COR.tinta;
+        return <div key={i} style={{width: 190, height: 190, borderRadius: 36, background: COR.tela, transform: `translateY(${(1 - t) * 300 + baixo * 10}px) scale(${Math.max(0, t)})`,
+          boxShadow: baixo ? '0 4px 0 #C9CED6, 0 10px 20px rgba(20,22,26,.12)' : '0 14px 0 #C9CED6, 0 30px 40px rgba(20,22,26,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontFamily: FONTE, fontWeight: 800, fontSize: 100, color: c}}>{k === 'cmd' ? <Cmd cor={c} /> : k}</div>;
+      })}
+    </div>
+    {legenda && <div style={{marginTop: 70, textAlign: 'center', fontFamily: FONTE, fontWeight: 800, fontSize: 64, letterSpacing: '-0.02em', color: COR.tinta, opacity: e5(seg(f, inicio + 10, inicio + 20)), transform: `translateY(${(1 - e5(seg(f, inicio + 10, inicio + 20))) * 30}px)`}}>{legenda}</div>}
+  </div>;
+};

package/kits/tutorial-tela/elementos/TituloTela.tsx

@@ -0,0 +1,30 @@
+// TituloTela: o título do tutorial, grande (96 px, peso 800, −0,03 em), alinhado à esquerda em x 88.
+// Palavras sobem 40 px uma a uma (3 quadros entre elas); a parte entre *asteriscos* ganha um marca-texto
+// laranja que corre da esquerda (10 quadros). Sai subindo e sumindo.
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {COR, FONTE, SEGURA, e5, entradaSaida, seg} from './base';
+
+export type TituloTelaProps = {linhas: string[]; y?: number; tamanho?: number; inicio?: number; fim?: number; alinhar?: 'esquerda' | 'centro'};
+
+export const TituloTela: React.FC<TituloTelaProps> = ({linhas, y = 300, tamanho = 96, inicio = 0, fim = -1, alinhar = 'esquerda'}) => {
+  const f = useCurrentFrame();
+  const {s} = entradaSaida(f, inicio, fim);
+  let k = 0;
+  return <div style={{position: 'absolute', left: SEGURA.lado, right: SEGURA.lado, top: y, opacity: 1 - s, transform: `translateY(${-s * 80}px)`, textAlign: alinhar === 'centro' ? 'center' : 'left'}}>
+    {linhas.map((l, i) => <div key={i} style={{fontFamily: FONTE, fontWeight: 800, fontSize: tamanho, lineHeight: 1.08, letterSpacing: '-0.03em', color: COR.tinta}}>
+      {l.split(/(\*[^*]+\*)/).filter(Boolean).map((p, j) => {
+        const marca = p.startsWith('*');
+        return p.replace(/\*/g, '').split(' ').filter(Boolean).map((w, wi) => {
+          const em = inicio + (k++) * 3;
+          const t = e5(seg(f, em, em + 12));
+          const m = e5(seg(f, em + 6, em + 16));
+          return <span key={`${j}-${wi}`} style={{display: 'inline-block', marginRight: '0.24em', opacity: t, transform: `translateY(${(1 - t) * 40}px)`, position: 'relative', color: marca ? '#fff' : undefined}}>
+            {marca && <span style={{position: 'absolute', left: '-0.08em', right: '-0.08em', top: '0.1em', bottom: '0.02em', background: COR.acento, borderRadius: 10, transform: `scaleX(${m})`, transformOrigin: '0 50%', zIndex: -1}} />}
+            <span style={{position: 'relative'}}>{w}</span>
+          </span>;
+        });
+      })}
+    </div>)}
+  </div>;
+};

package/kits/tutorial-tela/elementos/base.ts

@@ -0,0 +1,65 @@
+// Base do kit tutorial-tela (v2): tour de produto com cara de gravação de tela profissional.
+// Cores, fontes, curvas (rampa de velocidade), medidas da janela. Todo número visual sai daqui.
+import {continueRender, delayRender} from 'remotion';
+import jakarta from '../assets/fontes/jakarta.woff2';
+import jbmono from '../assets/fontes/jbmono.woff2';
+
+export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
+export const SEGURA = {topo: 168, base: 1330, lado: 88};
+/** onde a câmera põe o alvo na tela (o centro óptico do tutorial) */
+export const CENTRO: [number, number] = [540, 820];
+/** a janela do app, em unidades dela (a câmera escala) */
+export const JANELA = {l: 1400, a: 940, barra: 56, lateral: 300};
+
+// ---------- cor (ver regras/cor.md) ----------
+export const COR = {
+  chao: '#ECEEF2',
+  chaoFundo: '#DCE0E7',
+  tela: '#FFFFFF',
+  lateral: '#F6F7F9',
+  linha: '#E4E7EC',
+  tinta: '#14161A',
+  apagado: '#6B7280',
+  /** o único acento: o controle da vez, o cursor clicando, o número do passo */
+  acento: '#FF5B14',
+  acentoClaro: '#FFE4D6',
+  ok: '#17A05D',
+};
+
+// ---------- fonte ----------
+export const FONTE = '"TS Jakarta", system-ui, sans-serif';
+export const MONO = '"TS JetBrains Mono", ui-monospace, monospace';
+if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__k_tutorial2) {
+  (globalThis as Record<string, unknown>).__k_tutorial2 = true;
+  const h = delayRender('tutorial-tela: fontes');
+  Promise.all([['TS Jakarta', jakarta, '500 800'], ['TS JetBrains Mono', jbmono, '500 700']].map(([nome, url, peso]) =>
+    new FontFace(nome, `url(${url}) format('woff2')`, {weight: peso, style: 'normal'}).load().then((ff) => {document.fonts.add(ff);}).catch(() => undefined)))
+    .then(() => continueRender(h));
+}
+
+// ---------- tempo e curva ----------
+export const c01 = (t: number) => Math.max(0, Math.min(1, t));
+export const seg = (f: number, a: number, b: number) => (b <= a ? (f >= b ? 1 : 0) : c01((f - a) / (b - a)));
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+/** rampa de velocidade: arranca devagar, voa no meio, freia longo (easeInOutQuint) */
+export const rampa = (t: number) => {const x = c01(t); return x < 0.5 ? 16 * x ** 5 : 1 - (-2 * x + 2) ** 5 / 2;};
+export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
+export const mola = (t: number, s = 1.7) => {const x = c01(t) - 1; return x * x * ((s + 1) * x + s) + 1;};
+/** batida da trilha (108 bpm) em quadros */
+export const BATIDA = 16.7;
+
+/** chaves {em, ...valores} → valor interpolado com a rampa */
+export const chave = <K extends string>(f: number, ks: ({em: number} & Partial<Record<K, number>>)[], k: K, padrao: number): number => {
+  const v = ks.filter((c) => c[k] !== undefined) as ({em: number} & Record<K, number>)[];
+  if (!v.length) return padrao;
+  if (f <= v[0].em) return v[0][k];
+  for (let i = 1; i < v.length; i++) if (f <= v[i].em) return lerp(v[i - 1][k], v[i][k], rampa(seg(f, v[i - 1].em, v[i].em)));
+  return v[v.length - 1][k];
+};
+
+/** entrada com mola em 12 quadros a partir de `inicio`, saída em 8 a partir de `fim` (−1 = fica) */
+export const entradaSaida = (f: number, inicio: number, fim: number) => {
+  const t = mola(seg(f, inicio, inicio + 12));
+  const s = fim < 0 ? 0 : seg(f, fim, fim + 8);
+  return {t, s, op: f < inicio ? 0 : Math.min(1, seg(f, inicio, inicio + 5) * 1) * (1 - s)};
+};

package/kits/tutorial-tela/elementos/index.ts

@@ -0,0 +1,12 @@
+// Tudo que o kit tutorial-tela oferece.
+export * from './base';
+export * from './Fundo';
+export * from './CameraTela';
+export * from './JanelaApp';
+export * from './Cursor';
+export * from './DestaqueCaixa';
+export * from './PassoChamada';
+export * from './TituloTela';
+export * from './TeclaAtalho';
+export * from './Som';
+export * from './Montagem';

package/kits/tutorial-tela/exemplos/plano.json

@@ -0,0 +1,41 @@
+{
+  "kit": "tutorial-tela",
+  "duracao": 240,
+  "trilha": {"volume": 0.42},
+  "gravacao": {
+    "de": 0, "ate": 240, "entra": 10, "sai": 192,
+    "camera": [
+      {"em": 0, "x": 700, "y": 300, "zoom": 0.62}, {"em": 44, "x": 700, "y": 300, "zoom": 0.62},
+      {"em": 62, "x": 1170, "y": 150, "zoom": 2.0}, {"em": 80, "x": 1170, "y": 150, "zoom": 2.0},
+      {"em": 96, "x": 850, "y": 440, "zoom": 1.6}, {"em": 138, "x": 850, "y": 440, "zoom": 1.6},
+      {"em": 150, "x": 1030, "y": 560, "zoom": 2.3}, {"em": 162, "x": 1030, "y": 560, "zoom": 2.3},
+      {"em": 178, "x": 850, "y": 360, "zoom": 1.0}],
+    "janela": {
+      "endereco": "pauta.app", "titulo": "Hoje", "subtitulo": "{n} tarefas", "botao": "+ Nova tarefa",
+      "itens": [{"texto": "Enviar proposta", "tag": "trabalho"}, {"texto": "Comprar café", "tag": "casa"}, {"texto": "Ligar pro Davi", "tag": "pessoal"}, {"texto": "Pagar o aluguel", "tag": "casa"}],
+      "modal": {"titulo": "Nova tarefa", "placeholder": "O que precisa ser feito?", "texto": "Revisar contrato", "botao": "Salvar", "tag": "trabalho"},
+      "tempos": {"abre": 70, "digita": [104, 132], "salva": 156}},
+    "cursor": {"aparece": 20, "chaves": [{"em": 20, "x": 1250, "y": 860}, {"em": 44, "x": 1000, "y": 620}, {"em": 64, "x": 1236, "y": 130}, {"em": 84, "x": 1236, "y": 130}, {"em": 98, "x": 860, "y": 452}, {"em": 136, "x": 900, "y": 520}, {"em": 150, "x": 1066, "y": 574}, {"em": 172, "x": 1150, "y": 420}], "cliques": [70, 100, 156]},
+    "destaques": [
+      {"x": 1120, "y": 96, "largura": 220, "altura": 56, "de": 60, "ate": 72},
+      {"x": 570, "y": 400, "largura": 560, "altura": 80, "de": 96, "ate": 134, "holofote": false},
+      {"x": 990, "y": 540, "largura": 140, "altura": 56, "de": 148, "ate": 158}]
+  },
+  "cenas": [
+    {"batida": "gancho", "de": 0, "ate": 44,
+     "camadas": [{"elemento": "TituloTela", "props": {"linhas": ["Tarefa nova", "em *3 passos*"], "y": 250, "inicio": 2, "fim": 36}}],
+     "sons": [{"som": "pop-palavra", "em": 2}, {"som": "whoosh-entra", "em": 10}]},
+    {"batida": "passo", "de": 44, "ate": 84,
+     "camadas": [{"elemento": "PassoChamada", "props": {"numero": 1, "texto": "Toque em Nova tarefa", "inicio": 8, "fim": 34}}],
+     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 26}, {"som": "pop-cartao", "em": 28, "volume": 0.6}]},
+    {"batida": "passo", "de": 84, "ate": 140,
+     "camadas": [{"elemento": "PassoChamada", "props": {"numero": 2, "texto": "Escreva o que precisa", "inicio": 6, "fim": 48}}],
+     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 16}, {"som": "digitar", "em": 20}]},
+    {"batida": "passo", "de": 140, "ate": 192,
+     "camadas": [{"elemento": "PassoChamada", "props": {"numero": 3, "texto": "Salve. Pronto.", "inicio": 4, "fim": 44}}],
+     "sons": [{"som": "swoosh", "em": 0}, {"som": "clique", "em": 16}, {"som": "sucesso", "em": 22}]},
+    {"batida": "atalho", "de": 192, "ate": 240,
+     "camadas": [{"elemento": "TeclaAtalho", "props": {"teclas": ["cmd", "N"], "legenda": "Ou use o atalho.", "y": 680, "inicio": 12, "aperta": 26}}],
+     "sons": [{"som": "whoosh-sai", "em": 0}, {"som": "pop-cartao", "em": 12}, {"som": "clique", "em": 26}, {"som": "assinatura", "em": 30, "volume": 0.6}]}
+  ]
+}