๐ŸŽฏ

website-to-video

๐ŸŽฏSkill

from heygen-com/hyperframes

VibeIndex|
What it does
|

Captures a website via headless Chrome screenshots and transforms it into a HyperFrames video. Produces site tours, showcases, and social clips using the site's own visuals and brand assets.

Overview

website-to-video is a HyperFrames skill that captures a general website and transforms it into a professional video. Using headless Chrome screenshots combined with the site's own brand assets, it produces site tours, showcases, and social clips. The workflow covers everything from initial site capture and brand extraction to scene composition and final rendering.

The 7-step pipeline includes capture and brand understanding, briefing, asset auditing (with contact sheet review), design system creation, beat-by-beat HTML composition, quality verification with a Definition of Done checklist, and final export. It supports both collaborative mode with user checkpoints and autonomous mode for faster iteration.

Key Features

  • Automated website capture via headless Chrome with brand color, font, and asset extraction
  • 7-step structured pipeline from capture to final export with quality gates at each stage
  • Asset audit system with contact sheets to justify inclusion or exclusion of each captured element
  • Supports multiple output formats and lengths (15-second social clips, 30-second tours, longer showcases)
  • Collaborative mode with user decision points and autonomous mode for unattended generation
  • Built-in WCAG verification, animation mapping, and honest disclosure of unverified elements

Who is this for?

  • Marketing teams who want to quickly turn existing websites into shareable video content
  • Social media managers creating short clips from landing pages or portfolios
  • Agencies producing site showcases or client portfolio videos
  • Content creators who need video versions of web content for platforms like Instagram or YouTube
๐Ÿ“ฆ

Same repository

heygen-com/hyperframes(48 items)

website-to-video

Installation

Vibe Index InstallInstalls to .claude/skills/
npx vibeindex add heygen-com/hyperframes --skill website-to-video
skills.sh Installโš  Installs to .agents/skills/
npx skills add heygen-com/hyperframes --skill website-to-video
Manual InstallCopy SKILL.md content and save to the path below
~/.claude/skills/website-to-video/SKILL.md

SKILL.md

101,397Installs
-
AddedJun 18, 2026

More from this repository10

๐ŸŽฏ
hyperframes-cli๐ŸŽฏSkill

CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.

๐ŸŽฏ
hyperframes๐ŸŽฏSkill

Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.

๐ŸŽฏ
hyperframes-registry๐ŸŽฏSkill

Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.

๐ŸŽฏ
remotion-to-hyperframes๐ŸŽฏSkill

A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.

๐ŸŽฏ
hyperframes-core๐ŸŽฏSkill

The foundational technical contract for HyperFrames HTML video compositions, defining data attributes, clip/track structure, sub-compositions, variables, media playback, deterministic rendering rules, and project validation.

๐ŸŽฏ
hyperframes-animation๐ŸŽฏSkill

Comprehensive animation skill for HyperFrames providing atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU.

๐ŸŽฏ
hyperframes-creative๐ŸŽฏSkill

Non-animation creative direction for HyperFrames videos covering design specs, color palettes, typography, narration scripting, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.

๐ŸŽฏ
media-use๐ŸŽฏSkill

Resolves media needs (background music, sound effects, images, icons) into frozen local files by searching the HeyGen catalog, downloading the best match, and registering it in a manifest. One resolve command handles the full cascade from cache lookup to provider search to file freezing.

๐ŸŽฏ
hyperframes-media๐ŸŽฏSkill

A media framework by HeyGen for building interactive video experiences with composable frames and real-time rendering capabilities.

๐ŸŽฏ
general-video๐ŸŽฏSkill

A fallback HyperFrames composition authoring skill for custom video creation when no specialized workflow fits. Handles multi-scene pieces, brand reels, montages, title cards, motion posters, static loops, and freeform compositions at any length or format.