NA

norahe0304-art/30x-video

Browser automation
62 stars 품질 40 트렌드 40

One URL in, an agency-grade launch video out. A Claude Code skill (Remotion + React) with a 16-law taste codex — 12 brands, 12 worlds, zero templates.

개요

One URL in. An agency-grade launch video out. A Claude Code skill that turns any brand's website into a 40-second launch video — real brand assets, a 5-act narrative, word-aligned AI voiceover, beat-synced music, and a that keeps every film premium and every brand distinct. 12 brands tested, 12 completely different visual worlds, zero templates — plus a handful of earlier-generation films (retired from the public wall as the codex improved, history preserved in git). Five of the current films were built end-to-end by autonomous agents reading nothing but the rules. - (Windows untested) - and (any paid plan) - One full run takes and a meaningful chunk of agent tokens — it is doing real work: harvesting, designing five acts, rendering proof frames, self-reviewing - Best results with the strongest model your plan offers — the taste codex holds the floor on any model; the ceiling scales with the model - ELEVENLABS_API_KEY in the project .

README

30x web-to-video

One URL in. An agency-grade launch video out.

▶ Watch all 12 films · npm

A Claude Code skill that turns any brand’s website into a 40-second launch video — real brand assets, a 5-act narrative, word-aligned AI voiceover, beat-synced music, and a taste codex of 16 hard-won design laws that keeps every film premium and every brand distinct.

12 brands tested, 12 completely different visual worlds, zero templates — plus a handful of earlier-generation films (retired from the public wall as the codex improved, history preserved in git). Five of the current films were built end-to-end by autonomous agents reading nothing but the rules.

Quick start

# one-shot: harvest a brand and build the video
npx 30x-web-to-video https://your-brand.com --agent

# or: install the skill user-wide, then just talk to Claude Code
npx 30x-web-to-video --global
# → open Claude Code anywhere and say: "make a launch video for your-brand.com"

Requirements & expectations

  • macOS / Linux (Windows untested)
  • Node 20+ and Claude Code (any paid plan)
  • One full run takes ~25 minutes and a meaningful chunk of agent tokens — it is doing real work: harvesting, designing five acts, rendering proof frames, self-reviewing
  • Best results with the strongest model your plan offers — the taste codex holds the floor on any model; the ceiling scales with the model
  • ELEVENLABS_API_KEY in the project .env gets premium narration; without it, narration falls back to local TTS (works, sounds simpler)
  • ffmpeg / yt-dlp / playwright auto-install during harvest

How it works

┌──────────────┐   ┌──────────────────┐   ┌──────────────────────────┐
│   HARVEST    │ → │   TASTE CODEX    │ → │   FIVE-ACT FILM          │
│ deterministic│   │ 16 design laws   │   │ Remotion + React         │
│ colors fonts │   │ 4 evidence gates │   │ ElevenLabs word-aligned  │
│ copy logo UI │   │ Claim→World map  │   │ VO · beat-synced BGM     │
└──────────────┘   └──────────────────┘   └──────────────────────────┘
  1. Harvest — a deterministic orchestrator scrapes the real brand: computed colors, loaded fonts, verbatim copy, logo, product screenshots, official demo video, BGM candidates.
  2. Taste — Claude designs five acts under the codex: no expanding rings, no heartbeat pulses, no divider bars, no text over full-bleed motion, one world per film, real assets over drawn abstractions. Every rule cites the incident that created it.
  3. Evidence gates — every asset is audited frame-by-frame before use; every act renders proof frames that get inspected; cuts snap to voiceover phrase onsets measured from word-level timestamps; downloaded music is whisper-checked for spoken watermarks.

What’s in the box

skills/30x-web-to-video/
├── SKILL.md                  # the workflow: 8 steps, 4 blocking gates
├── rules/                    # the taste codex — 16 laws with case law
│   ├── taste.md              #   anti-slop blacklist (rings, pulses, bars, pills…)
│   ├── composition.md        #   zero-vacuum, full-bleed moments, unity of world
│   ├── narration-sync.md     #   continuous VO, cuts snap to phrase onsets
│   ├── artifact-catalog.md   #   selection priority: semantics > real assets > rotation
│   └── …
├── scaffold/                 # Remotion project template (transitions, shaders, captions)
└── scripts/                  # orchestrator, beat-sync, audiomap, visual-audit

The showcase

12 films are live on the public wall today. Numbering follows build order (some earlier-generation builds were retired as the codex improved — history preserved in git, so the numbers aren’t consecutive).

# Brand World
01 Happy Model — AI gateway black/green routing world, global backbone
02 Caylent — AWS consulting black/mint infra, sailboat footage, agent decision graph
04 Parker — AI banking retro serif collage, 1940s jazz (agent-built)
05 Maná — yerba mate four flavor-colored rooms (agent-built)
07 JetPartners — private aviation navy old-money, night aerials
10 Corgi — startup insurance painted skies, official mascot family (agent-built)
11 Orchid — iMessage assistant paper-to-dusk, petals converge into the mark (agent-built)
12 TheraSun — spectral window film warm-black amber, the spectrum splits
13 Idensia — brand passport deep-forest engraving world
14 Laper — screenwriting software screenplay paper, FADE IN:, film-noir jazz
15 Dusty & Co — ceramic studio risograph print world; found the real brand behind a hosted passport page (agent-built)
20 Dior cream editorial, real Atacama/Hellix fonts embedded, faithful maison grammar

▶ Watch them all

Philosophy

AI-generated video all looks the same because everyone writes “make it premium” in a prompt. Premium is not an adjective. Premium is a few hundred specific nevers — written down, enforced by evidence, and versioned. Every time this codex grows, the floor rises for everyone who runs it.

License

MIT

View this README on GitHub

추천 도구

다른 키워드를 입력하거나 필터를 제거해 보세요.

설치

npx skillfish add norahe0304-art/30x-video