hyperframes
Multi-frame animated composition with CSS keyframes — scroll-driven or auto-playing frames for storytelling. Use with "hyperframes", "scroll story", "animated narrative".
SKILL.mdskills/hyperframes/SKILL.md
GitHubHyperFrames Skill
Produce a multi-frame scroll-driven or auto-playing composition.
Structure
- Container: 100vh frames stacked vertically.
- Each frame: full-bleed scene with layered elements.
- Transitions: CSS
position: sticky+ opacity/scale transforms. - Auto-play mode:
setIntervalor CSS animation delays to cycle frames.
Rules
- Each frame tells one micro-story.
- Text minimal — 1 headline + 1 sentence max per frame.
- Motion: subtle parallax between background, midground, foreground.
- No JS frameworks — vanilla CSS + minimal JS for scroll detection.
data-df-idon each frame.
Output
Single index.html, inline CSS/JS.