# Ccvideo

> Make product promo videos in the Claude video team style — terracotta canvas, macOS terminal window, animated Claude Code session — with Remotion. Use when the user asks for a product/feature promo, launch video, terminal demo video, or a "Claude-style" video.

- **Type:** Skill
- **Install:** `agentstack add skill-amazingang-ccvideo-ccvideo`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [AmazingAng](https://agentstack.voostack.com/s/amazingang)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [AmazingAng](https://github.com/AmazingAng)
- **Source:** https://github.com/AmazingAng/ccvideo

## Install

```sh
agentstack add skill-amazingang-ccvideo-ccvideo
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# ccvideo — Claude-style product promo videos

You are producing a short promo video (20–45 s, 1920×1080 @ 30 fps) in the
visual language of Anthropic's Claude launch videos: a warm terracotta canvas,
a single macOS terminal window running a Claude Code session, text that types
and streams in, brief camera pushes between locked framings, serif title cards.

## Prerequisites

1. A Remotion project must exist. If not, scaffold one:
   `npx create-video@latest --yes --blank --no-tailwind .` then `npm i`.
2. Packages (install with `npx remotion add ` so versions match):
   `@remotion/google-fonts`, `@remotion/transitions`, `zod` (declare zod
   explicitly — the library imports it directly; do not rely on it being a
   transitive dependency).
3. The component library must exist at `src/ccvideo/`. If it does not, copy
   every file from this skill's `templates/` directory into `src/ccvideo/`.
   Do not rewrite these components from scratch.
4. The capture/verify tooling must exist at `scripts/` in the project root.
   If it does not, copy this skill's `scripts/` directory (including
   `scripts/lib/`) there. All scripts resolve `captures/` against the
   directory you run them from, so always run them from the project root.

## Ground truth (non-negotiable content rules)

Video content is never hand-written into scene components. Every fact shown —
numbers, paths, endpoints, command output, line counts — must come from a
capture of something that really ran:

- Each video has a `captures//` directory holding raw artifacts (API
  responses, extracted session events) plus a `props.json` built from them
  deterministically. `props.json` is the single source of truth the
  composition renders.
- **Capture first.** Before making the video, run the real thing:
  - `node scripts/capture-xapi-cli.mjs` — live X data via the xapi CLI
    (`npx xapi-to`, key in `~/.xapi/config.json`; the `xapi` skill in
    `.agents/skills/xapi/` documents all its capabilities).
  - `node scripts/capture-x-user.mjs` — official X API variant (needs
    `X_BEARER_TOKEN`; `--sample` writes placeholder data with
    `raw-meta.json` marked `sample: true` — never publish a sample capture).
  - `node scripts/transcript-to-props.mjs  --prompt-match
     --out captures/` — replay a real Claude Code session turn
    (transcripts live in `~/.claude/projects//*.jsonl`).
  - New data source? Write a new capture script following the same pattern:
    fetch reality → save raw → build props via a shared deterministic
    builder in `scripts/lib/`.
- **Verify before publishing:** `node scripts/verify-props.mjs
  captures/` rebuilds props from the raw artifacts and fails on any
  hand-edit. Fix by re-capturing, never by editing `props.json`.
- Honest-replay boundary: pacing is a performance (typing speed, spinner
  time), but capability must be real — the video may only show what the
  captured run actually did. This extends to chrome: session-header facts
  (Claude Code version, cwd) come from the capture (`claude --version`,
  real cwd) or the header is omitted; the spinner's token counter renders
  only when the capture provides a real `thinkingTokens` value (otherwise
  seconds only). Sample captures fail `verify-props` outright
  (`--allow-sample` exists solely for pipeline testing).
- Captures aim to be commit-safe, with defense in depth — not a guarantee:
  `transcript-to-props` persists only the inputs the video actually uses
  (the selected events' shown lines + counts, one truncated command output,
  the summary bullet lines), scrubs secret-shaped strings (API keys, Bearer
  tokens, URL credentials, env/JSON password fields, private keys), and
  rewrites both normal and slug-flattened home paths to `~` — all before
  props are built, so props, video, and archived raw see identical redacted
  content. Pattern lists can never be complete: always review a capture
  before committing, and treat any redaction warning as a stop sign.

## Workflow

1. **Capture first** (see Ground truth): produce `captures//props.json`
   from a real run.
2. **Beat sheet from the capture.** Presentational text (card titles,
   thinking word) lives in the capture script's constants/flags — pick the
   one prompt, the code beat, the run output, the summary bullets. Aim for
   the classic arc: code → created → ran+output → summary.
3. **Compose:** register a `` in `src/Root.tsx` using
   `GroundedVideo` from `src/ccvideo` with `schema={groundedVideoSchema}`,
   `defaultProps` imported from the capture's `props.json`, and
   `calculateMetadata` deriving duration via `groundedVideoDuration` —
   durations follow content automatically. Custom scene work beyond the
   standard arc: build with the library primitives, same rules.
4. **Verify with stills** before declaring done. Render one still per beat:
   `npx remotion still  --frame= --scale=0.5 out.png`
   and look at them. Check: nothing clipped by the terminal window (a
   `[ccvideo]` overflow warning in render output means trim beats), timing
   feels unhurried, colors match the palette.
5. Run `node scripts/verify-props.mjs captures/`, then preview with
   `npx remotion studio --no-open`; final render with
   `npx remotion render  out/.mp4` (add
   `--props=captures//props.json` to render a different capture
   without touching code; add `--scale=2` for a 4K master like the official
   demos — compositions stay 1920×1080 @ 30 fps in code).

## Two themes

Pick per product, both share the brand terracotta `#D97656`/`#D97757`:

- **Terracotta** (default) — warm canvas, Claude Code REPL session. For
  agent/AI-workflow stories. Components: `GroundedVideo`/`DataSession`.
- **Dark** (the `ant` CLI demo grammar) — near-black canvas `#0B0B0B`,
  warm-black terminal `#181716` separated only by a subtle border, shell
  prompt `▶ ~/dir >` (arrow `#8B92C9`, chevron `#5FA97B`), cream serif
  `#D6D4CF`. Structure is **chaptered**: pixel-logo wordmark card →
  [interstitial card (mono kicker + thin divider + serif claim) → fresh
  shell beat (type real command, real output fades in, idle prompt
  returns)] per chapter → wordmark outro. For CLI/developer-tool products.
  Components: `DarkVideo`/`ShellBeat`/`InterstitialCard`/`WordmarkCard`,
  palette `dark` in `theme.ts`, schema `darkVideoSchema` (built from
  captures like the light theme — e.g. `props-dark.json` written by
  `capture-xapi-cli.mjs`, verified by `verify-props.mjs`).

## The look (non-negotiable style rules)

- Canvas `#CC7D5D`, terminal `#2B2C36`, titlebar `#3A3634`. Body text
  `#E3E4EB`, dim `#9899A1`, comments `#6C6E6A`, line numbers `#83848C`.
  Accents: periwinkle `#B8B9F2` (paths, inline code, strings), teal `#85BEC5`
  (keywords), gold `#F2C43D` (status arrows). All defined in
  `src/ccvideo/theme.ts` — import, never hardcode.
- Fonts: JetBrains Mono for everything terminal, Source Serif 4 for title
  cards. Loaded in `theme.ts` via `@remotion/google-fonts`, with Noto Sans SC
  already appended as CJK fallback for both stacks — Chinese prompts render
  out of the box.
- Terminal window 1560×950 centered (985 when a session `header` is shown;
  dark theme 1860×1010), 14 px radius, deep soft shadow, three
  traffic lights, mono titlebar text that mirrors the task, e.g.
  `dev — · Implement X — claude — 106×31`.
- The Claude Code session must look real: `>` input row above a gold
  `⏵⏵ auto mode on (shift+tab to cycle) · esc to interrupt` status bar (both
  always visible, pinned to the bottom); a `✻ Cogitating…` spinner in a
  fixed-height slot just above the input row; `●` tool-result bullets; a
  numbered code block ending in `… +N lines (ctrl+o to expand)`; a bold
  `What it does` summary with `-` bullets.
- Camera: no sustained zoom or pan on terminal scenes, ever — slow
  fractional scaling makes small mono text visibly drift and swim. The only
  allowed camera motion is ``: **brief, strongly-eased moves
  (~0.6 s) between otherwise locked framings** — push into dense content,
  hold, pull back for the payoff. Text may be mid-scale only during a
  deliberate fast move, never for seconds. Keep the same `origin` on the
  pull-out as the push-in so it doesn't read as a lateral slide.
  `DataSession` applies this automatically around the `run` beat.
  `` remains title-cards-only.
- Session authenticity chrome (all schema-driven, all optional):
  `header` (pixel logo + `Claude Code vX` + model/cwd line, always visible),
  `windowTitleIdle` → `windowTitle` swap at prompt submit, prompt echo as a
  highlighted block, spinner with live `(Ns · ↓ N tokens)` counters and an
  optional `⎿ Tip:` line, status bar that gains `esc to interrupt` only
  while working. Extra beat kinds: `answer` (rich prose block), `alert`
  (red-highlight row), `tool` beats may carry `⎿` children lines.
- **No transcript drift.** Terminal text may only fade in place: no
  positional entrance animations inside the window, and never mount/unmount
  an element that reflows lines below it — transient rows (spinners,
  progress) live in fixed-height slots so their disappearance shifts nothing.
- Title cards: serif headline in near-black `#1F1508` on the terracotta,
  mono subtitle at 68 % opacity, fade-up entrance. Headline ≥ 132 px,
  subtitle ≥ 52 px at 1920 wide.

## Component API (`src/ccvideo`)

Data-driven layer (preferred for whole videos):

- `` — intro card → session → outro card, entirely
  from a `groundedVideoSchema` value (a capture's `props.json`).
- `` — renders any `sessionSchema` value:
  optional header, prompt typing, spinner, then `beats` (discriminated
  union: `code`, `tool`, `run`, `summary`, `answer`, `alert`). Applies the
  run-beat cut-zoom automatically; warns at render time if content will
  overflow.
- `sessionTiming(props, fps)` / `groundedVideoDuration(props, fps)` — pure
  timing derivation; use in `calculateMetadata`.
- `` — renders JSON segments `{t: 'plain'|'kw'|'code'|
  'comment'|'dim'|'bold', s}`; the bridge from props.json to styled text.

Presentation primitives:

- `` — window on the canvas
  (`variant="dark"` for the dark theme). Children
  are a flex column; give the transcript `flex: 1` so `` +
  `` pin to the bottom.
- `` / `` — typewriter, 35–45 cps.
- `` — `>` row; no `typedText` = blinking cursor.
- ``.
- `` — spinner; `stats`
  shows live `(Ns)` — plus `↓ N tokens` only when `tokens` carries a real
  captured count; `tip` adds a `⎿ Tip:` line. Put it in a fixed-height slot
  between transcript and input; `until` fades it out in place.
- `` — one output row, 8-frame fade-in (opacity only).
- `` — `●` bullet row.
- `` — numbered lines.
- Token spans: `` keyword, `` code/path, `` comment, ``, ``.
- ``, ``, ``,
  `` — session chrome (see style rules).
- `` — brief eased moves
  between locked framings; the only camera motion allowed on terminal scenes.
- `` — title cards only, never around a terminal.
- ``.

All animation is frame-driven (`useCurrentFrame` + `interpolate`, clamped,
inline in `style`). Never use CSS `transition`/`animation`.

## Timing cookbook (30 fps session scene, ~14 s)

`DataSession` derives all of this automatically via `sessionTiming` — the
table below is for hand-built custom scenes only.

| Beat | Frame |
|---|---|
| Idle window, cursor blinking | 0–20 |
| Prompt types (`cps≈38`) | 20–105 |
| Prompt echoed as highlighted block, input clears | ~110 |
| `✻ Thinking…` spinner | 115–170 |
| Code block streams (stagger 4) | 170–240 |
| `●` tool result | ~240 |
| `What it does` + bullets (stagger ~16) | 268–330 |
| Hold on final state | ≥ 2 s |

Sequence the swaps with ``.
Let output beats breathe — when in doubt, slower. Transitions overlap scenes:
total duration = sum of scenes − sum of transition frames.

## Worked examples (patterns to reproduce)

The bundled scripts are themselves complete worked examples:

- **API-capture video** (`scripts/capture-xapi-cli.mjs` + both builders in
  `scripts/lib/build-props.mjs`) — one capture run produces a terracotta
  Claude Code session video *and* a dark chaptered CLI video from the same
  raw data. The run-output beats replay the script's real stdout, `+N lines`
  is the script's real line count, and the session header carries the real
  `claude --version` and cwd.
- **Session-replay video** (`scripts/transcript-to-props.mjs`) — converts a
  real Claude Code session turn (JSONL transcript) into a video script,
  with redaction and minimal storage built in. Handles CJK prompts via the
  bundled font fallback.

Register the resulting `props.json` on a `GroundedVideo` (terracotta) or
`DarkVideo` (dark) composition as described in the Workflow section.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [AmazingAng](https://github.com/AmazingAng)
- **Source:** [AmazingAng/ccvideo](https://github.com/AmazingAng/ccvideo)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-amazingang-ccvideo-ccvideo
- Seller: https://agentstack.voostack.com/s/amazingang
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.