// Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays. Use when a HyperFrames project needs a voiceover, captions/subtitles from existing audio, or a clean cutout from a photo/video for use as an overlay.
HyperFrames CLI dev loop — use `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when working in or alongside a HyperFrames project and the user asks to scaffold, preview, render, lint, install a registry block, or diagnose a broken environment.
Capture a website and create a HyperFrames video from it. Use whenever the user (1) provides a URL and wants a video, (2) says "capture this site", "turn this into a video", "make a video tour of this page", or (3) wants a scrolling product walkthrough, marketing reel, or before/after visual built from a real site.
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions. Use whenever the user asks to build a video, motion graphic, animated explainer, intro, outro, title card, or convert a website / podcast / talk into a video. HyperFrames is HTML-based — fast iteration, real rendering.
Audit websites for accessibility issues and WCAG compliance. Use when checking accessibility, fixing a11y issues, or ensuring WCAG compliance.
Generate REST API endpoints with proper structure, validation, error handling, and types. Use when creating new API routes, endpoints, or backend services.
Create professional CSS animations, transitions, micro-interactions, and complex motion design. Use when adding animations, hover effects, loading states, page transitions, scroll animations, or any motion design work.
| name | hyperframes-media |
| description | Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays. Use when a HyperFrames project needs a voiceover, captions/subtitles from existing audio, or a clean cutout from a photo/video for use as an overlay. |
Three preprocessing pipelines that turn raw inputs into HyperFrames-ready assets:
Use this skill when the user wants any of those, as input to a HyperFrames composition. For standalone TTS or transcription that won't end up in a video, suggest a simpler approach.
Local, fast, no API key needed. Good defaults:
Drop the audio file into the HyperFrames project's assets/audio/ and
reference it from a layer with data-audio="./assets/audio/voiceover.mp3".
The composition's data-duration should match (or exceed) the audio length.
For captions/subtitles, use Whisper to produce a timestamped transcript.
base is fast and good enough for most accents. Use
small or medium only if base produces errors.data-start / data-end per line (or per
word for kinetic captions).If the user has source audio + a script, prefer alignment (Whisper
with --initial_prompt to bias toward the known script) over raw
transcription. Result is cleaner.
For transparent overlays — speaker headshots floating over a colored background, product cutouts, mascot characters, etc.
rembg (uses U2-Net or similar) is the standard. Output a
PNG with alpha.ffmpeg to
reassemble. Slower but works.Drop the alpha PNG into assets/images/ and place it as a layer:
<img src="./assets/images/host.png"
class="absolute right-12 bottom-12 w-64"
data-start="0" data-end="6000" />
A common flow for a 30-second product demo:
hyperframes-media → Kokoro generates the voiceover (~28s of audio)website-to-hyperframes captures the product page at the right momentsnpx hyperframes render produces a captioned, narrated demoassets/raw/ and processed outputs in assets/.
Makes the project regeneratable.