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
Install
alecs5am/ralphy/hyperframes · repository language: TypeScript
git clone https://github.com/alecs5am/ralphy
cp -r ralphy/.agents/skills/hyperframes ~/.claude/skills/hyperframesFrequently 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)
Read as markdown · JSON record · Browse the source repository
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