# Website To Video > Captura una web y la convierte en un vídeo de HyperFrames — tour del sitio, showcase o clip social — usando capturas con Chrome headless y los activos de marca del propio sitio. Fuente: https://skillsagentes.com/skills/calesthio/openmontage/website-to-video Markdown: https://skillsagentes.com/skills/calesthio/openmontage/website-to-video.md Repositorio: https://github.com/calesthio/OpenMontage Autor: calesthio Licencia: AGPL-3.0 Actualizado: el mes pasado Coste de contexto: 164 tok instalada, 3k tok al activarse, 394.6k tok con todos los archivos del bundle Bundle: 32 archivos, 1.5 MB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add calesthio/OpenMontage --skill website-to-video --agent claude-code # Cursor npx -y skills add calesthio/OpenMontage --skill website-to-video --agent cursor # Codex npx -y skills add calesthio/OpenMontage --skill website-to-video --agent codex # Gemini CLI npx -y skills add calesthio/OpenMontage --skill website-to-video --agent gemini # Windsurf npx -y skills add calesthio/OpenMontage --skill website-to-video --agent windsurf # Cline npx -y skills add calesthio/OpenMontage --skill website-to-video --agent cline ``` ## Qué hace - Captura una web con Chrome headless y la convierte en un vídeo de HyperFrames a partir de sus propios visuales - Sigue siete pasos encadenados, y cada uno produce un artefacto que abre el siguiente - Extrae la identidad de marca, define estrategia y mensaje, y monta storyboard y guion - Genera voz en off, tiempos y subtítulos, construye las composiciones y valida antes de entregar - En modo autónomo se saltan las puertas de preferencia del usuario, pero nunca las de verificación de calidad ## Cuándo usarla - Convertir un portfolio, blog o landing en un tour o showcase en vídeo - Sacar un clip social a partir de los visuales del propio sitio ## Cuándo no - Lanzamiento o promoción de un producto, aunque sea desde una URL: usa `/product-launch-video` - Explicativo de un tema sin sitio web, o un PR de GitHub: usa `/faceless-explainer` o `/pr-to-video` - Subtítulos sobre un vídeo existente, o un motion graphic corto sin narración ## Qué la activa - "Convierte esta web en un clip de 15 segundos para Instagram" - "Hazme un tour en vídeo de 30 segundos de este sitio" - "Captura nuestra home y monta un vídeo con sus visuales" ## Antes de instalar - Antes de buscar audio o imágenes hay que llamar a `/media-use`, ejecutando primero `--adopt` para registrar los activos que ya existan. - Variables de entorno: BEAT_DURATION_DRIFT_TOLERANCE_S, HEADLINE_MIN_PX, PROJECT_DIR, SFX_DRIFT_TOLERANCE_S - reads environment config ## Archivos - SKILL.md — 12 KB - assets/sfx/CREDITS.md — 1 KB - assets/sfx/chime.mp3 — 27 KB - assets/sfx/click-soft.mp3 — 11 KB - assets/sfx/click.mp3 — 11 KB - assets/sfx/error.mp3 — 51 KB - assets/sfx/glitch-1.mp3 — 82 KB - assets/sfx/glitch-2.mp3 — 110 KB - assets/sfx/glitch-3.mp3 — 97 KB - assets/sfx/impact-bass-1.mp3 — 66 KB - assets/sfx/impact-bass-2.mp3 — 81 KB - assets/sfx/key-press.mp3 — 4 KB - assets/sfx/manifest.json — 4 KB - assets/sfx/notification.mp3 — 77 KB - assets/sfx/ping.mp3 — 26 KB - assets/sfx/pop.mp3 — 23 KB - assets/sfx/riser.mp3 — 314 KB - assets/sfx/sparkle.mp3 — 56 KB - assets/sfx/typing.mp3 — 26 KB - assets/sfx/whoosh-cinematic.mp3 — 173 KB - assets/sfx/whoosh-short.mp3 — 18 KB - assets/sfx/whoosh.mp3 — 18 KB - references/beat-builder-guide.md — 20 KB - references/capabilities.md — 56 KB - references/step-0-capture.md — 4 KB - references/step-1-design.md — 20 KB - references/step-2-brief.md — 14 KB - references/step-3-storyboard.md — 47 KB - references/step-4-vo.md — 13 KB - references/step-5-build.md — 28 KB - references/step-6-validate.md — 23 KB - scripts/w2h-verify.mjs — 28 KB ## SKILL.md Reproducido tal cual desde calesthio/OpenMontage bajo AGPL-3.0. Esta sección es el documento original y está en inglés. > **media-use**: Before sourcing audio/images, call `/media-use` to resolve BGM/SFX/images from the HeyGen catalog. Run `--adopt` first to register existing assets. See `/media-use` skill. # Website to HyperFrames Capture a website, then produce a professional video from it. > **Confirm the route before Step 0.** This skill makes a video _of / from a general site_. If the user is really **marketing / launching / promoting a product** (even from this URL, even "promo for our site") → `/product-launch-video`. A **topic explainer with no site** → `/faceless-explainer`; a **GitHub PR** → `/pr-to-video`; **re-cutting / recoloring / reordering an existing video file** → out of scope. Routed here on a vague "make a video", or unsure launch-vs-general-site? **Read `/hyperframes` first** (full routing table + § What HyperFrames cannot do). Users say things like: - "Turn this website into a 15-second social clip for Instagram" - "Make a 30-second site tour / showcase from https://..." - "Capture our homepage and build a video from its own visuals" The workflow has 7 steps. Each produces an artifact that gates the next. By default it's collaborative — gates marked 💬 stop and ask the user. If the user signals autonomous mode ("decide for me", "surprise me"), 💬 user-preference gates are skipped; see step-2-brief.md for how that propagates. **Autonomous mode is NOT "skip all gates."** Auto mode covers user-preference questions (TTS provider, voice, color emphasis, beat count, music yes/no, captions yes/no — where the agent decides on the user's behalf). It does NOT cover quality-verification gates. The following remain non-skippable in auto mode: - Asset Audit (Step 3) — viewing contact sheets and justifying USE/SKIP for each asset - Per-beat HTML read (Step 5) — structured evidence block per beat - DoD checklist (Step 6) — including animation-map, per-warning WCAG verification, audio/motion playback - Honest disclosure section (Step 6) — "What I did NOT verify" must appear in your final summary If you find yourself reasoning "auto mode says bias toward action, so I'll skip X" — and X is a verification gate, not a preference question — that reasoning is wrong. Bias toward action applies to deciding _what to build_, not to deciding _whether to verify_. --- ## Step 0: Capture & Understand the Brand **Read:** [references/step-0-capture.md](references/step-0-capture.md) Capture the site, then read the extracted data to understand the **brand and product** — what it does, who it's for, what voice it speaks in, what mood it lives in. The captured assets are a brand toolkit for later, not the building blocks the video is made from. **Show sign-in status before the brief** — run `npx hyperframes auth status` and **relay its output verbatim (don't paraphrase or rewrite it).** It reports whether voice/BGM will use HeyGen or local engines and, when not signed in, how to sign in. **If not signed in, STOP and wait for the user to choose — sign in, or say "go"/"offline" to continue with local engines — before asking the brief or anything else.** Treat it as a real decision point, not a passing note; don't fold the choice into the brief question, and don't write keys into a per-repo `.env`. (In autonomous mode, note the status and continue offline.) See `../hyperframes-media` → Preflight for the canonical guidance. **Gate:** Site summary printed — strategy-first (what the product does, who it's for, brand voice) before the asset / color / font inventory; sign-in status was shown (signed in, or continuing offline). --- ## Step 1: Brand Identity **Read:** [references/step-1-design.md](references/step-1-design.md) Write DESIGN.md — a brand cheat sheet covering the visual identity: colors, typography, component styles, layout principles. Use `design-styles.json` for exact computed values. **Speed option:** For fast-pacing videos (billboard-per-beat), DESIGN.md can be a 50-line summary of colors + fonts + do's/don'ts — not a 300-line document. The sub-agent prompt in Step 5 pastes brand values directly, so DESIGN.md depth only matters for complex compositions. **Gate:** `DESIGN.md` exists (any length) with at minimum: color palette, font choices, and do's/don'ts. --- ## Step 2: Strategy & Messaging **Read:** [references/step-2-brief.md](references/step-2-brief.md), [references/capabilities.md](references/capabilities.md) (scan the Table of Contents — deep-dive sections only as needed) Align with the user on **what the video must communicate** before talking visuals or assets. Parse the user's prompt — they probably already gave you the video type and style. Ask only what's missing: the ONE thing this video must say, the narrative arc, and the audience. **Gate:** Video type, duration, format, and — critically — the message and narrative arc are locked. Without those, Step 3 can't write a concept-first storyboard. --- ## Step 3: Storyboard + Script 💬 **Read:** [references/step-3-storyboard.md](references/step-3-storyboard.md) Write the storyboard concept-first: message → narrative arc → beats that serve the arc → techniques per beat → brand accents pass at the end. Then write the narration script to match. Present both to the user with a beat-by-beat summary. Iterate until they approve. **Gate:** `STORYBOARD.md` + `SCRIPT.md` exist AND the user has approved the plan. --- ## Step 4: VO, Timing + Captions 💬 **Read:** [references/step-4-vo.md](references/step-4-vo.md) If Step 2 said no narration — ask about background music, then skip to Step 5. Otherwise: ask the user which TTS provider (HeyGen TTS, ElevenLabs, or Kokoro), generate audio, transcribe, map timestamps to beats. Then ask about captions. **Gate:** Either (a) no narration was requested and storyboard has manual beat timings, or (b) `narration.wav` + `transcript.json` exist and beat timings updated with real durations. --- ## Step 5: Build Compositions **Read:** The `hyperframes` skill (load it — every rule matters) **Read:** [references/step-5-build.md](references/step-5-build.md) Build index.html and compositions following the architecture and pacing chosen in the storyboard (Step 3). Sub-agents run `hyperframes lint` and `hyperframes snapshot` on each beat before reporting back. **Gate:** Every `compositions/beat-N.html` has been read top-to-bottom by the main agent against DESIGN.md and STORYBOARD.md. The per-beat checklist lives in [step-5-build.md](references/step-5-build.md). --- ## Step 6: Validate & Deliver **Read:** [references/step-6-validate.md](references/step-6-validate.md) Lint, validate, take snapshots scaled to video length (formula: `max(beats × 3, ceil(duration_seconds / 2))`), and review each one. Fix issues before delivering. Deliver the localhost Studio project URL — only render to MP4 on explicit user request. Surface that Studio URL **only at handoff** — it is the final, stable preview; the build-phase snapshots are headless, so do not pop a preview mid-build. **Deliver something you're proud of.** Before handing off, ask yourself: would I post this on social media with my name on it? If not, fix what's wrong. **Gate:** `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors, and the final response includes the active Studio project URL. --- ## Quick Reference ### Video Types Typical constraints by video type — use as a starting point, not a formula. Beat count should follow from the content and the narration, not from a target range. | Type | Typical duration | Duration driver | Narration | | --------------------- | ---------------- | ------------------ | --------------------- | | Social ad (IG/TikTok) | 10–15s | Platform limit | Optional | | Product demo | 30–60s | Script length | Full narration | | Feature announcement | 15–30s | Feature complexity | Full narration | | Brand reel | 20–45s | Music track | Optional, music focus | | Launch teaser | 10–20s | Hook energy | Minimal | Beat count is not in this table intentionally — it should come from the storyboard, not from "social ad = 3-4 beats." A social ad for a complex product might need 5 well-timed beats. A brand reel with one strong visual thesis might need 3. ### Format - **Landscape**: 1920x1080 (default) - **Portrait**: 1080x1920 (Instagram Stories, TikTok) - **Square**: 1080x1080 (Instagram feed) ### Reference Files | File | When to read | | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | [step-0-capture.md](references/step-0-capture.md) | Step 0 — capture, understand the brand and product, write strategy-first site summary | | [step-1-design.md](references/step-1-design.md) | Step 1 — write DESIGN.md brand cheat sheet (5 sections, 250-350 lines; 50-line fast-path for billboard-style social ads) | | [step-2-brief.md](references/step-2-brief.md) | Step 2 — align on message, narrative arc, audience with user | | [capabilities.md](references/capabilities.md) | Steps 2 & 5 — full inventory of what HyperFrames can do (24 sections). Scan the TOC during the brief, deep-dive specific sections during build | | [step-3-storyboard.md](references/step-3-storyboard.md) | Step 3 — storyboard + script (combined) with user review gate | | [step-4-vo.md](references/step-4-vo.md) | Step 4 — TTS provider choice, generation, timing | | [step-5-build.md](references/step-5-build.md) | Step 5 — build index.html + compositions | | [step-6-validate.md](references/step-6-validate.md) | Step 6 — lint, validate, snapshots (scaled to video length), preview | | [techniques.md](../hyperframes/references/techniques.md) | Steps 3 & 5 — 13 primitive animation techniques with code patterns (adapt, don't copy-paste) | | [html-in-canvas-patterns.md](../hyperframes/references/html-in-canvas-patterns.md) | Step 5 — complete code patterns for HTML-in-Canvas effects (lives in the hyperframes skill) | ## Dónde encaja - Categoría: [Marketing](https://skillsagentes.com/categorias/marketing.md) — Campañas, copy, lanzamientos y ciclos de crecimiento. - Creador: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz. - [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad. - [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id. - [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma. - [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)