AmanVarshney01/tcut

tcut × Remotion — vídeos de lançamento com imagens de terminal reais

tcut produz clipes de terminal perfeitos em pixels; o Remotion os compõe em React com animações spring, tipografia e layout. Juntos: um vídeo de lançamento com design motion completo, onde as imagens do terminal são reais, reproduzíveis e re-renderizáveis.

Instale ambas as skills primeiro: npx skills add AmanVarshney01/tcut remotion-dev/skills.

Pipeline

1. Grave as imagens com tcut (consulte a skill tcut). Para clipes destinados ao Remotion:

   • fps: 30 para corresponder à composição do Remotion; margin: 0, borderRadius: 0 e deixe o React desenhar o cartão (cantos arredondados, sombra). Mantenha windowBar: "colorful" — os botões de tráfego indicam "um terminal real"
   • Para uma composição de 1920×1080, grave com --font-size 30 (≈1480 px de largura para 80 colunas) para que os clipes nunca sejam ampliados
   • maxPause: "1s" mantém os clipes enxutos; adicione keys: true apenas se o público precisar ver as teclas digitadas
   • Saída em MP4 (H.264) — o <OffthreadVideo> do Remotion o lê com precisão de quadro
   • Adicione t.chapter("nome") antes de cada etapa: os capítulos são inseridos no MP4 e ffprobe -show_chapters -print_format json clip.mp4 fornece timestamps exatos que você pode usar para sincronizar sobreposições (por exemplo, destacar a linha do script que está sendo executada — a melhor tomada de "código → vídeo")
   • Re-renderize um mesmo cast em vários temas — tcut render hero.cast --theme nord -o themes/nord.mp4 — e troque o src do <OffthreadVideo> por quadro: mesma linha do tempo, tema alterna ao vivo

2. Inicialize o Remotion: bun create video (escolha blank) ou adicione remotion, @remotion/cli, react, react-dom a um projeto com um registerRoot.

3. Componha: copie os MP4s do tcut para public/, então enquadre-os:

import { AbsoluteFill, OffthreadVideo, staticFile, spring, useCurrentFrame, useVideoConfig } from "remotion";

const Clip: React.FC<{ src: string; caption: string }> = ({ src, caption }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const enter = spring({ frame, fps, config: { damping: 200 } });
  return (
    <AbsoluteFill style={{ background: "#11111b", justifyContent: "center", alignItems: "center" }}>
      <div style={{ transform: `scale(${0.92 + 0.08 * enter})`, borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 80px rgba(0,0,0,.6)" }}>
        <OffthreadVideo src={staticFile(src)} style={{ width: 1060 }} muted />
      </div>
      <h2 style={{ color: "#cdd6f4", fontFamily: "ui-monospace, monospace", fontSize: 38, marginTop: 26, opacity: enter }}>{caption}</h2>
    </AbsoluteFill>
  );
};

Sequencie as cenas com <Sequence from={...} durationInFrames={...}>; ajuste a duração das cenas à duração real de cada clipe (ffprobe -show_entries format=duration). Corte com startFrom/endAt (em quadros).

Clipes gravados com margin incorporada podem ser cortados escalando o vídeo por videoW / (videoW - 2 * margin) dentro de um cartão com overflow: hidden.

4. Renderize: bunx remotion render <CompositionId> out/promo.mp4 --crf 15 --image-format png para um master de alta qualidade (intermediários PNG, H.264 quase sem perdas). Corresponda o fps da composição aos clipes do tcut para evitar reamostragem; verifique o layout primeiro com bunx remotion still <Id> still.png --frame N para um quadro por cena.

5. Publique também como página web (opcional): a mesma composição é executada ao vivo no navegador com @remotion/player — <Player component={Promo} durationInFrames fps compositionWidth={1920} compositionHeight={1080} controls autoPlay loop initiallyMuted acknowledgeRemotionLicense style={{ width: "100%" }} />. O <OffthreadVideo> usa <Video> como fallback no Player automaticamente. Mantenha as URLs dos clipes atrás de um único helper (staticFile(ASSET_BASE + path)) para que o projeto e o site possam apontar para pastas diferentes, copie os clipes para o public/ do site e carregue a mesma fonte (ex.: @fontsource-variable/jetbrains-mono). Os títulos se tornam texto DOM real e o vídeo inteiro pode ser percorrido; tcut.amanv.dev/promo é um exemplo.

Notas de design para um acabamento profissional

• Clipes de terminal são texto nítido: nunca escalonar acima de 100%; escalonar ligeiramente para baixo (~85–95%) dentro de um cartão emoldurado
• Fundo sólido e plano na paleta do tema do terminal (ex.: #0b0b12, fg #e8e8f2); deixe os cartões de janela carregarem a profundidade através da sombra. Evite gradientes, brilhos e grades de pontos — eles competem com o texto nítido do terminal
• Cartão de título: manchete monoespaçada com digitação (divida a string por quadro) soa como "nativo do terminal"
• Cartão final: o comando de instalação em um bloco com aparência de copiar-e-colar supera um logotipo
• Uma ideia por cena, uma manchete mono grande mais a única linha da API tcut que a faz; corte no momento em que algo aparece no clipe. Um tour de recursos pode durar ~70 s; um corte para redes sociais deve ficar abaixo de 30 s

Por que esta combinação

As imagens do terminal são um artefato de build, não uma captura de tela: altere o script ou tema do tcut, reexecute, e o promo é re-renderizado com bunx remotion render — um pipeline de vídeo de lançamento totalmente reproduzível em TypeScript, de ponta a ponta.