# SquareMCP Remotion Workflow

This directory is the canonical video-production workspace for SquareMCP marketing assets inside the `hermes-mcp` repo.

## What lives here

- `SquareMCPLinkedIn`: 90-second 1080x1080 explainer
- `SquareMCPHeroLoop`: 30-second 1920x1080 seamless site hero loop
- `SquareMCPTikTokFull`: 30-second 1080x1920 short-form vertical launch video
- `SquareMCPTikTokHook`, `SquareMCPTikTokProblem`, `SquareMCPTikTokDemo`, `SquareMCPTikTokProof`, `SquareMCPTikTokCTA`: standalone cutdowns for platform testing

## Install

```bash
cd videos/remotion-demo
npm install
```

## Preview in Studio

```bash
cd videos/remotion-demo
npm run dev
```

Remotion Studio will open on `http://localhost:3000`.

## Render Commands

Full LinkedIn video:

```bash
cd videos/remotion-demo
npx remotion render src/index.ts SquareMCPLinkedIn out/squaremcp-linkedin.mp4
```

Full site hero loop:

```bash
cd videos/remotion-demo
npx remotion render src/index.ts SquareMCPHeroLoop out/squaremcp-hero-loop.mp4
```

Full TikTok video:

```bash
cd videos/remotion-demo
npx remotion render src/index.ts SquareMCPTikTokFull out/squaremcp-tiktok-full.mp4
```

TikTok cutdowns:

```bash
cd videos/remotion-demo
npx remotion render src/index.ts SquareMCPTikTokHook out/squaremcp-tiktok-hook.mp4
npx remotion render src/index.ts SquareMCPTikTokProblem out/squaremcp-tiktok-problem.mp4
npx remotion render src/index.ts SquareMCPTikTokDemo out/squaremcp-tiktok-demo.mp4
npx remotion render src/index.ts SquareMCPTikTokProof out/squaremcp-tiktok-proof.mp4
npx remotion render src/index.ts SquareMCPTikTokCTA out/squaremcp-tiktok-cta.mp4
```

## Project conventions

- Keep assets brand-aligned with `src/styles.ts`
- Put reusable animations in dedicated scene files under `src/scenes/`
- Render outputs to `out/`; the repo already ignores that directory
- Do not mention Remotion in public-facing social copy

## Notes

- Logo source for video work lives in `public/squaremcp-logo.svg`
- The May 11 notes in the synced vault describe the original LinkedIn and hero-loop workflow