skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

website-to-hyperframes

Capture a website and produce a HyperFrames video from its design and content.

Updated Mar 4, 2026
Search Tags:#video generation#storyboard#promo video#hyperframes#website capture#tts narration#social ads
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill website-to-hyperframes-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-to-hyperframes
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/website-to-hyperframes
Command: npx skills add https://github.com/gmolike/Claude-Template --skill website-to-hyperframes-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning an existing website into a polished promotional video normally requires manual design extraction, scripting, storyboarding, voiceover, and animation work. This Skill automates that entire pipeline, converting any URL into a professional HyperFrames video project. ## Core Features & Use Cases - Automated Site Capture: Extracts screenshots, design tokens, fonts, assets, and text content from any URL with a single command. - Guided 7-Step Pipeline: Walks through capture, brand design doc, narration script, storyboard, TTS voiceover with word-level timing, composition building, and validation. - Deterministic Video Output: Builds GSAP-based HTML compositions with linting, validation, and snapshot review before delivering a Studio preview URL. - Use Case: Paste a product landing page URL and ask for a 15-second Instagram ad — the Skill captures the brand identity, writes the script, generates narration, and delivers a scrubbable video project. ## Quick Start Capture https://example.com and turn it into a 20-second product launch video in portrait format.

Frequently Asked Questions about website-to-hyperframes

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

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

Provide a URL and describe the video you want, such as a 15-second social ad or 30-second product tour. The Skill captures the site with npx hyperframes capture, then builds a script, storyboard, voiceover, and animated compositions from the extracted brand assets.

What video formats and durations does website capture support?▼

Output supports landscape 1920x1080, portrait 1080x1920 for Stories and TikTok, and square 1080x1080 for feeds. Typical durations range from 10-15 second social ads to 30-60 second product demos, with beat counts matched to the narration.

Which TTS voices can I use for the video narration?▼

Three providers are supported: Kokoro runs locally for free without an API key, ElevenLabs offers the widest voice selection, and HeyGen TTS returns word-level timestamps automatically. The Skill recommends auditioning 2-3 voices before generating the full narration.

Does the website capture require API keys?▼

No API keys are required for the basic capture, which extracts design tokens, screenshots, fonts, and assets automatically. Setting GEMINI_API_KEY optionally enables richer AI-powered image descriptions via Gemini vision at roughly $0.001 per image.

Why does my rendered video show frozen or missing elements?▼

Common causes include iframes that cannot scrub deterministically, stacked transform tweens on one element, or standalone gsap.to() calls outside the timeline. Run npx hyperframes lint and validate, then snapshot each beat midpoint to visually verify the output.

When should I render the final MP4 file?▼

Rendering should only happen on explicit request, since it takes minutes per pass. The default delivery is the localhost Studio preview URL where you can scrub and request changes; render with npx hyperframes render --output renders/<name>.mp4 only when satisfied.

Related Skills

Explore More Marketing & Sales Skills→
mooch10mooch10
1

website-to-video

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

Community
Advanced
refly-airefly-ai
199

video-creator

Generates short AI-powered videos and scripts for social media platforms.

Official
Intermediate
rakibulismrakibulism
2

brand-review

Review marketing content against brand voice, style, and messaging standards.

Community
Advanced
himanshu231204himanshu231204
2

video-editing

Automate raw footage editing into platform-ready videos with FFmpeg and Remotion.

Community
Intermediate