AmanVarshney01/tcut

tcut × Remotion — vídeos de lanzamiento con metraje real de terminal

tcut produce clips de terminal con píxeles perfectos; Remotion los compone en React con resortes, tipografía y diseño. Juntos: un vídeo de lanzamiento completo con animaciones donde el metraje de terminal es real, reproducible y re-renderizable.

Instala ambas habilidades primero: npx skills add AmanVarshney01/tcut remotion-dev/skills.

Pipeline

1. Graba el metraje con tcut (consulta la habilidad tcut). Para clips destinados a Remotion:

   • fps: 30 para coincidir con la composición de Remotion; margin: 0, borderRadius: 0 y deja que React dibuje la tarjeta (esquinas redondeadas, sombra). Mantén windowBar: "colorful" — los puntos de tráfico se leen como "una terminal real"
   • Para una composición 1920×1080, graba con --font-size 30 (≈1480 px de ancho para 80 columnas) para que los clips nunca se amplíen por encima del 100%
   • maxPause: "1s" mantiene los clips ajustados; añade keys: true solo si la audiencia necesita ver las pulsaciones de teclado
   • Salida MP4 (H.264) — <OffthreadVideo> de Remotion lo lee con precisión de fotogramas
   • Inserta t.chapter("nombre") antes de cada paso: los capítulos quedan incrustados en el MP4 y ffprobe -show_chapters -print_format json clip.mp4 proporciona marcas de tiempo exactas que puedes usar para sincronizar superposiciones (por ejemplo, resaltar la línea del script que se está ejecutando — la toma más potente de "código → vídeo")
   • Re-renderiza un mismo cast en varios temas — tcut render hero.cast --theme nord -o themes/nord.mp4 — y cambia los <OffthreadVideo src> por fotograma: misma línea de tiempo, el tema cambia en vivo

2. Prepara el proyecto Remotion: bun create video (elige blank), o añade remotion, @remotion/cli, react, react-dom a un proyecto con un registerRoot.

3. Compón: copia los MP4 de tcut en public/, luego enmárcarlos:

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>
  );
};

Secuencia las escenas con <Sequence from={...} durationInFrames={...}>; ajusta la duración de cada escena a la duración real del clip (ffprobe -show_entries format=duration). Recorta con startFrom/endAt (fotogramas).

Los clips grabados con un margin incrustado se pueden recortar escalando el vídeo por videoW / (videoW - 2 * margin) dentro de una tarjeta con overflow: hidden.

4. Renderiza: bunx remotion render <CompositionId> out/promo.mp4 --crf 15 --image-format png para un master de alta calidad (PNG como intermedios, H.264 casi sin pérdida). Ajusta el fps de la composición al de los clips de tcut para evitar remuestreo; verifica el diseño primero con bunx remotion still <Id> still.png --frame N para un fotograma por escena.

5. Súbelo también como página web (opcional): la misma composición se ejecuta en vivo en el navegador con @remotion/player — <Player component={Promo} durationInFrames fps compositionWidth={1920} compositionHeight={1080} controls autoPlay loop initiallyMuted acknowledgeRemotionLicense style={{ width: "100%" }} />. <OffthreadVideo> recurre a <Video> en el Player automáticamente. Mantén las URL de los clips detrás de un helper (staticFile(ASSET_BASE + path)) para que el proyecto y el sitio puedan apuntar a diferentes carpetas, copia los clips en el public/ del sitio y carga la misma fuente (por ejemplo, @fontsource-variable/jetbrains-mono). Los títulos se convierten en texto DOM real y todo el vídeo es desplazable; tcut.amanv.dev/promo es un ejemplo.

Notas de diseño para que parezca profesional

• Los clips de terminal muestran texto nítido: nunca escalar por encima del 100%; escala ligeramente hacia abajo (~85–95%) dentro de una tarjeta con marco
• Fondo sólido y plano en la paleta del tema de terminal (por ejemplo, #0b0b12, fg #e8e8f2); deja que las tarjetas con ventana aporten profundidad mediante sombras. Evita degradados, brillos y cuadrículas de puntos — compiten con el texto nítido de la terminal
• Tarjeta de título: título en monoespaciado que se escribe por caracteres (dividir el string por fotograma) se percibe como "nativo de terminal"
• Tarjeta final: el comando de instalación en un bloque con aspecto de copiar y pegar supera a un logotipo
• Una idea por escena, un gran título monoespaciado más la línea de la API de tcut que lo hace; corta en el momento en que algo aparece en el clip. Un recorrido de funciones puede durar ~70 s; un corte para redes sociales debe mantenerse por debajo de 30 s

Por qué esta combinación

El metraje de terminal es un artefacto de compilación, no una captura de pantalla: cambia el script o el tema de tcut, vuelve a ejecutar y el promocional se re-renderiza con bunx remotion render — un pipeline de vídeo de lanzamiento completamente reproducible en TypeScript de principio a fin.