What it does
Builds video compositions in HyperFrames, where a video is an HTML file with data attributes for timing, a GSAP timeline for animation and CSS for appearance. It covers captions, text-to-speech narration, audio-reactive visuals, animated text highlights and scene transitions. It requires a visual identity (a DESIGN.md or style file) before it writes any composition.
Try saying
- Add captions synced to this audio
- Make a title card with a marker highlight
- Add crossfade transitions between scenes
What it needs
- The HyperFrames kit
- Node.js
- FFmpeg
What is in the zip
40 files, 67 KB zipped
- data-in-motion.md1 KB
- house-style.md4 KB
- NOTICE.txt1 KB
- palettes/bold-energetic.md1 KB
- palettes/clean-corporate.md1 KB
- palettes/dark-premium.md1 KB
- palettes/jewel-rich.md1 KB
- palettes/monochrome.md1 KB
- palettes/nature-earth.md1 KB
- palettes/neon-electric.md1 KB
- palettes/pastel-soft.md1 KB
- palettes/warm-editorial.md1 KB
- patterns.md3 KB
- references/audio-reactive.md3 KB
- references/captions.md5 KB
- references/css-patterns.md8 KB
- references/dynamic-techniques.md7 KB
- references/motion-principles.md4 KB
- references/transcript-guide.md8 KB
- references/transitions.md11 KB
- references/transitions/catalog.md6 KB
- references/transitions/css-3d.md1 KB
- references/transitions/css-blur.md2 KB
- references/transitions/css-cover.md1 KB
- references/transitions/css-destruction.md4 KB
- references/transitions/css-dissolve.md2 KB
- references/transitions/css-distortion.md2 KB
- references/transitions/css-grid.md1 KB
- references/transitions/css-light.md2 KB
- references/transitions/css-mechanical.md2 KB
- references/transitions/css-other.md1 KB
- references/transitions/css-push.md1 KB
- references/transitions/css-radial.md1 KB
- references/transitions/css-scale.md1 KB
- references/tts.md2 KB
- references/typography.md9 KB
- scripts/animation-map.mjs19 KB
- scripts/contrast-report.mjs12 KB
- SKILL.md20 KB
- visual-styles.md10 KB
Credit
Nate Herk's HyperFrames student kit, MIT