tcut × Remotion — 使用真實終端機畫面的宣傳影片
tcut 產出像素級完美的終端機片段；Remotion 則使用 React 搭配彈簧動畫、排版與佈局將它們組合起來。兩者結合：一部完整的動態設計宣傳影片，其中的終端機畫面真實、可重現、且可重新渲染。
先安裝這兩個技能：npx skills add AmanVarshney01/tcut remotion-dev/skills。
管線
-
使用 tcut 錄製畫面（請參閱
tcut技能）。針對要給 Remotion 使用的片段：fps: 30以配合 Remotion 合成；margin: 0, borderRadius: 0，讓 React 負責繪製卡片（圓角、陰影）。保留windowBar: "colorful"— 交通號誌看起來就像「真正的終端機」- 對於 1920×1080 的合成，使用
--font-size 30（約 80 欄寬 1480 像素）錄製，確保片段絕不放大 maxPause: "1s"讓片段保持緊湊；只有在觀眾需要看到按鍵輸入時才加上keys: true- 輸出 MP4（H.264）— Remotion 的
<OffthreadVideo>能以影格精確度讀取 - 在每一步之前插入
t.chapter("name")：章節資訊會嵌入 MP4 中，使用ffprobe -show_chapters -print_format json clip.mp4可取得精確時間戳記，用以同步覆疊動畫（例如反白正在執行的腳本行 — 最強烈的「程式碼 → 影片」鏡頭） - 用多種佈景主題重新渲染同一份錄影：
tcut render hero.cast --theme nord -o themes/nord.mp4，然後按影格切換<OffthreadVideo src>：相同時間軸，即時切換佈景主題
-
建立 Remotion 專案：執行
bun create video（選擇空白範本），或將remotion、@remotion/cli、react、react-dom加入已有registerRoot的專案。 -
編排合成：將 tcut 的 MP4 檔案複製到
public/目錄，然後像這樣將它們置入畫面中：
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>
);
};
使用 <Sequence from={...} durationInFrames={...}> 排列場景；場景長度對應每個片段的實際長度（可用 ffprobe -show_entries format=duration 查詢）。使用 startFrom/endAt（以影格為單位）進行修剪。
如果片段內建了 margin，可以在 overflow: hidden 的卡片內將影片縮放為 videoW / (videoW - 2 * margin) 來裁切。
-
渲染：執行
bunx remotion render <CompositionId> out/promo.mp4 --crf 15 --image-format png以獲得高品質主檔案（使用 PNG 中間格式，接近無損的 H.264）。將合成的fps設定為與 tcut 片段一致，以避免重新取樣；先使用bunx remotion still <Id> still.png --frame N為每個場景檢查佈局。 -
也部署為網頁（可選）：相同的合成可在瀏覽器中透過
@remotion/player即時執行 —<Player component={Promo} durationInFrames fps compositionWidth={1920} compositionHeight={1080} controls autoPlay loop initiallyMuted acknowledgeRemotionLicense style={{ width: "100%" }} />。<OffthreadVideo>在 Player 中會自動退化為<Video>。將片段 URL 統一透過一個輔助函式（staticFile(ASSET_BASE + path)）管理，以便專案與網站指向不同資料夾；將片段複製到網站的public/目錄，並載入相同的字型（例如@fontsource-variable/jetbrains-mono）。標題會變成真實的 DOM 文字，整個影片可以拖拉搜尋；tcut.amanv.dev/promo 就是一個範例。
讓影片看起來專業的設計要點
- 終端機片段文字清晰：絕不放大超過 100%；改為稍微縮小（約 85–95%）並放在附邊框的卡片內
- 使用終端機佈景主題色調的平面純色背景（例如
#0b0b12，前景色#e8e8f2）；讓視窗卡片透過陰影產生立體感。避免漸層、發光與網點背景—它們會與清晰的終端機文字衝突 - 標題卡：使用逐字打出的等寬字體標題（按影格切割字串），看起來像「終端機原生」
- 結尾卡：顯示安裝指令的複製貼上區塊，比 Logo 更有效
- 每個場景一個想法，一個大的等寬字體標題加上執行該操作的唯一一行 tcut API；在片段中某個元素出現的瞬間切入。功能導覽約 70 秒；社交媒體短片應控制在 30 秒以內
為什麼選擇這個組合
終端機畫面是建置產出物，而不是螢幕錄影：只要修改 tcut 腳本或佈景主題，重新執行 bunx remotion render，宣傳影片就會重新渲染 — 這是一套完全以 TypeScript 實作、可重複再現的發表影片製作管線。