hyperframes
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 lets you build video compositions, animations, and effects by writing HTML with GSAP timelines and data attributes for timing.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
HyperFrames lets you build video compositions, animations, and effects by writing HTML with GSAP timelines and data attributes for timing. 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.
Use it when
- Yes.
- HyperFrames supports beat-sync animation to audio by analyzing music amplitude and timing.
Verify before relying
Read SKILL.md below before installing (46 files). Open directory: indexed for reading, not audited.
Install
alecs5am/ralphy/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
How do I create animated video with HTML using HyperFrames?
HyperFrames treats HTML as your video source. Author compositions with GSAP timelines for animation, data attributes for timing, and CSS for styling. Define clips, overlays, and effects in markup, then HyperFrames renders them to video while managing timeline synchronization and media playback across your entire composition.
Can HyperFrames add captions to video with precise timing?
Yes. HyperFrames lets you add captions and subtitles synced to audio timing using data attributes and GSAP timelines. You define caption text and timing in your HTML composition, and the framework ensures they appear and disappear at exact moments, synchronized with your audio track and overall video timeline.
What's the best way to build audio-reactive animation that syncs to music beats?
HyperFrames supports beat-sync animation to audio by analyzing music amplitude and timing. Use GSAP timelines to trigger visual responses at specific beat markers, and HyperFrames will synchronize your animations with the audio track, letting you create music videos and audio-reactive visuals that respond to rhythm and intensity.
How does HyperFrames handle scene transitions and animated text effects?
HyperFrames provides built-in support for scene transitions and animated text effects. Design crossfades, wipes, and custom transitions using GSAP animations, and apply text highlighting, marker effects, and other overlays through CSS and timeline keyframes. All transitions stay synchronized with your video composition timeline.
Can I use HyperFrames to create a product demo video?
Yes. HyperFrames is ideal for product demos. Build your composition with HTML, add animated overlays, title cards, and text-to-speech voiceover, then use GSAP timelines to choreograph scene transitions and highlight key features. The framework manages clip visibility and timing, letting you produce polished demo videos with design consistency.
What license does HyperFrames use?
HyperFrames is released under the Apache-2.0 license, giving you freedom to use, modify, and distribute it in both open-source and commercial projects, provided you include the license notice and state any changes you make.
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
Discovery (exploratory requests only)
For open-ended requests
(truncated - see the full file via the links below)
File tree — 15 files
.agents/skills/hyperframes/SKILL.md
.agents/skills/hyperframes/data-in-motion.md
.agents/skills/hyperframes/house-style.md
.agents/skills/hyperframes/palettes/bold-energetic.md
.agents/skills/hyperframes/palettes/clean-corporate.md
.agents/skills/hyperframes/palettes/dark-premium.md
.agents/skills/hyperframes/palettes/jewel-rich.md
.agents/skills/hyperframes/palettes/monochrome.md
.agents/skills/hyperframes/palettes/nature-earth.md
.agents/skills/hyperframes/palettes/neon-electric.md
.agents/skills/hyperframes/palettes/pastel-soft.md
.agents/skills/hyperframes/palettes/warm-editorial.md
.agents/skills/hyperframes/patterns.md
.agents/skills/hyperframes/references/audio-reactive.md
.agents/skills/hyperframes/references/beat-direction.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 video compositions and animations using HTML with 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 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.
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 Registry lets you find, install, and integrate pre-built blocks and components into your compositions using the `hyperframes add` command. Blocks are standalone sub-compositions you wire in via attributes; components are effect snippets you paste directly into your markup. The registry also guides you through authoring and contributing new items upstream.
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.
pneuma-clipcraft is a video-production environment where a structured domain model—not files—drives your workflow. Generate video, audio, and captions through bundled scripts, then register assets and lineage in a timeline-based composition system. The viewer displays your project as an exploded 3D timeline, syncing edits instantly without reload.
Motion React lets you build fluid animations and interactive effects in React applications using declarative components and hooks. Animate on gestures (drag, hover, tap), scroll events, and layout changes with spring physics, keyframes, and exit animations via AnimatePresence.
More skills Slideshow (GPL-3.0) · slideshow (Apache-2.0) · hyperframes-creative (Apache-2.0) · Hyperframes Creative (AGPL-3.0)