hyperframes
HyperFrames lets you build video compositions, animations, and effects entirely in HTML with data attributes and GSAP timelines. Author captions synced to audio, generate voiceovers, create beat-reactive animations, and add transitions—all by treating HTML as your video source of truth.
HyperFrames creates animated video compositions using HTML files with GSAP timelines and data attributes for timing and effects.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
HyperFrames creates animated video compositions using HTML files with GSAP timelines and data attributes for timing and effects. HyperFrames lets you build video compositions, animations, and effects entirely in HTML with data attributes and GSAP timelines. Author captions synced to audio, generate voiceovers, create beat-reactive animations, and add transitions—all by treating HTML as your video source of truth.
Use it when
- HyperFrames lets you author captions and subtitles as HTML elements with timing data attributes that sync to your audio track.
- Yes.
Verify before relying
Read SKILL.md below before installing (39 files). Open directory: indexed for reading, not audited.
Install
CoWork-OS/CoWork-OS/hyperframes · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is HyperFrames and how do I create video animations with HTML?
HyperFrames is an HTML-based video composition framework that lets you build animated videos, title cards, and effects using HTML and GSAP timelines. Instead of a traditional video editor, you author your composition as HTML with data attributes, then HyperFrames renders it into a video. You define animations, timing, and effects declaratively, making video production programmable and version-controllable.
How do I sync captions to audio timing in HyperFrames?
HyperFrames lets you author captions and subtitles as HTML elements with timing data attributes that sync to your audio track. You specify start and end times for each caption, and HyperFrames automatically displays them in sync with your audio. This approach makes it easy to update text without re-rendering, and supports animated text highlighting and emphasis effects timed to speech.
Can I make audio reactive animations that beat sync with music?
Yes. HyperFrames supports building audio-reactive visuals that respond to music and sound in real time. You can create beat-sync animations, glow and pulse effects timed to audio peaks, and music-reactive visual compositions. By analyzing audio timing data, HyperFrames lets you trigger animations and transitions at precise moments in your soundtrack.
Does HyperFrames generate text-to-speech voiceovers for videos?
HyperFrames includes text-to-speech narration generation, allowing you to create voiceovers and automated narration directly within your composition. You can generate audio from text, sync it to your timeline, and layer it with captions and animations—all without leaving the framework.
What scene transitions and motion effects does HyperFrames support?
HyperFrames supports scene transitions, crossfades, text highlighting effects, and motion animations through GSAP timelines. You can add animated text scribble effects, hand-drawn marker animations, shader transitions between scenes, and custom motion effects—all defined in your HTML composition with precise timing control.
Is HyperFrames open source and what license does it use?
Yes, HyperFrames is released under the MIT license, making it free to use, modify, and distribute in both personal and commercial projects. The MIT license gives you full flexibility to integrate HyperFrames into your video production workflow.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
HyperFrames
HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.
Approach
Before writing HTML, think at a high level:
- What — what should the viewer experience? Identify the narrative arc, key moments, and emotional beats.
- Structure
(truncated - see the full file via the links below)
File tree — 15 files
resources/skills/hyperframes/SKILL.md
resources/skills/hyperframes/data-in-motion.md
resources/skills/hyperframes/house-style.md
resources/skills/hyperframes/palettes/bold-energetic.md
resources/skills/hyperframes/palettes/clean-corporate.md
resources/skills/hyperframes/palettes/dark-premium.md
resources/skills/hyperframes/palettes/jewel-rich.md
resources/skills/hyperframes/palettes/monochrome.md
resources/skills/hyperframes/palettes/nature-earth.md
resources/skills/hyperframes/palettes/neon-electric.md
resources/skills/hyperframes/palettes/pastel-soft.md
resources/skills/hyperframes/palettes/warm-editorial.md
resources/skills/hyperframes/patterns.md
resources/skills/hyperframes/references/audio-reactive.md
resources/skills/hyperframes/references/captions.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create animated video compositions using HTML and GSAP timelines”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
HyperFrames treats HTML as the source for video production, letting you author compositions with GSAP timelines for animation, data attributes for timing, and CSS for styling. Build title cards, overlays, captions, text-to-speech narration, beat-synced visuals, and scene transitions—then render to video. The framework handles clip visibility, media playback, and timeline synchronization across your composition.
HyperFrames treats HTML as the source of truth for video production. Create compositions with data attributes for timing, GSAP animations, and CSS styling to produce title cards, overlays, captions, voiceovers, audio-reactive effects, and scene transitions. The framework manages clip visibility, media playback, and timeline synchronization across your entire video workflow.
Compose post-production overlays—captions, covers, illustrations, and calls-to-action—directly onto video clips using HyperFrames, rendering everything in one pass to preserve quality. Works seamlessly downstream of segmentation workflows, turning raw clips into upload-ready MP4s with HTML/CSS captions, AI-generated covers, and timed motion graphics.
This skill converts a written article into a polished short-form video optimized for vertical platforms. It combines Volcano TTS Chinese narration, HyperFrames-powered scene animations, and AI-generated abstract watercolor backgrounds to produce 1080×1920 MP4 files ready for YouTube Shorts, TikTok, and similar services. The output emphasizes visual contrast and pacing over template repetition, enforcing diverse layouts and typography across 5–10 scenes.
Build navigable presentation decks using HyperFrames compositions backed by a JSON slideshow manifest. Each slide maps to a scene with optional speaker notes, fragment reveals, and hotspot-driven branching to alternate sequences. The skill enforces slide writing discipline—one idea per slide, headline-first claims, and visual hierarchy.
Build navigable decks backed by HyperFrames scenes with discrete slides, fragment reveals, hotspot branching, and integrated presenter mode. Each slide connects through a JSON manifest that declares order, speaker notes, interactive hotspots, and branch sequences. Output runs as a live deck, not a rendered video.
More skills pneuma-clipcraft (MIT) · Motion React (unlicensed) · Hyperframes Registry (AGPL-3.0)