skills.rest
Noetfield-Systems
Noetfield-SystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

website-to-video

Capture a website and produce a HyperFrames video from its brand assets and visuals.

Updated Jun 20, 2026
Search Tags:#video generation#storyboard#brand assets#gsap#social video#hyperframes#website capture
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill website-to-video-noetfield-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-to-video
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/website-to-video
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill website-to-video-noetfield-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning a live website into a polished marketing video normally requires manual screenshots, brand asset hunting, storyboarding, and frame-by-frame animation work. This Skill automates that pipeline: it captures a URL with headless Chrome, extracts the brand's colors, fonts, and assets, then guides a gated 7-step workflow from strategy and storyboard through narration, composition building, and validation to deliver a finished HyperFrames video. ## Core Features & Use Cases - Automated Site Capture: Runs npx hyperframes capture to download screenshots, SVGs, fonts, and computed design tokens, with optional Gemini-powered AI descriptions of captured images. - Brand-Truth Design Extraction: Generates a DESIGN.md cheat sheet with exact color palettes, WCAG contrast checks, font-face paths, and component CSS values so every beat stays on-brand. - Storyboard, Script & Voiceover Pipeline: Concept-first storyboarding with user approval gates, TTS narration via HeyGen, ElevenLabs, or Kokoro, transcription, and per-beat timestamp mapping. - Deterministic Composition & Validation: Builds GSAP-driven HTML compositions verified with hyperframes lint, snapshot contact sheets, and a definition-of-done checklist before delivering a Studio preview URL. - Use Case: A founder asks for a 15-second Instagram clip of their landing page. The Skill captures the site, locks the message and narrative arc, storyboards 4 beats, generates narration, builds the compositions, and hands back a validated video preview. ## Quick Start Ask the agent to turn https://your-site.com into a 15-second portrait social clip for Instagram and follow the gated workflow prompts.

Frequently Asked Questions about website-to-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a website into a video?▼

Run the capture step with npx hyperframes capture on the target URL, then follow the 7-step workflow: extract brand identity into DESIGN.md, lock the message and storyboard, optionally generate TTS narration, build GSAP compositions per beat, and validate with lint and snapshots before delivery.

What video formats and durations does website-to-video support?▼

It supports landscape 1920x1080, portrait 1080x1920, and square 1080x1080 outputs. Typical durations range from 10-15 seconds for social ads up to 30-60 seconds for narrated product demos, with beat count derived from the storyboard rather than fixed targets.

Which TTS providers can generate the narration voiceover?▼

The workflow offers three TTS options: HeyGen TTS, ElevenLabs, or Kokoro. After generation, the audio is transcribed and word-level timestamps are mapped to storyboard beats for caption and timing synchronization.

When should I not use website-to-video?▼

Do not use it for product or SaaS launch promos (use product-launch-video), topic explainers with no site (use faceless-explainer), GitHub PR videos (use pr-to-video), captioning existing footage, or re-cutting an existing video file. It is scoped to general site showcases built from captured visuals.

Does the capture step require an API key?▼

No key is required for the base capture. Setting a GEMINI_API_KEY in a .env file adds AI-generated descriptions of captured images, which improves asset selection for scenes, but the pipeline works without it using DOM-context descriptions.

Why does my video fail validation at the final step?▼

Delivery requires npx hyperframes lint and validate to pass with zero errors, plus snapshot review of every beat. Common failures include missing window.__timelines registration, nondeterministic code like Math.random or requestAnimationFrame, and mismatched data-composition-id attributes between compositions and index.html.

Related Skills

Explore More Marketing & Sales Skills→
celeroncoderceleroncoder

pr-to-video

Converts GitHub pull requests into narrated code-change explainer videos via HyperFrames.

Community
Advanced
compozycompozy
182

hyperframes-cli

Scaffold, validate, inspect, preview, and render HTML timeline compositions to MP4/WebM.

Official
Intermediate
heygen-comheygen-com
40.2k

hyperframes

Render deterministic HTML5 video scenes with HyperFrames and GSAP timelines.

Official
Advanced
zester4zester4
2

hyperframes

Routes video and animation requests to HyperFrames HTML-composition workflows.

Community
Advanced