hyperframes-keyframes

Author and verify seek-safe 2D/3D keyframes for HyperFrames video compositions.

Updated Sep 6, 2026
One-click install
npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill hyperframes-keyframes-abubakar125-co
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes-keyframes
Source: https://github.com/AbuBakar125-co/Resturant_web/tree/main/agent/skills/hyperframes-keyframes
Command: npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill hyperframes-keyframes-abubakar125-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Video compositions built with HyperFrames need deterministic, seek-safe keyframe animation—punch-ins, zooms, Ken Burns moves, match cuts, and mask reveals—that renders identically at any timeline position. Without registered, synchronously built timelines and CLI verification, motion breaks during scrubbing, rendering, or seeking. ## Core Features & Use Cases - Seek-safe keyframe authoring: Build GSAP, CSS, Anime.js, WAAPI, and WebGL animations that are paused, registered, finite, and free of timers or unseeded randomness. - CLI verification workflow: Prove motion with hyperframes lint, check, keyframes, focused --shot ghosts, and snapshots at proof times. - Mechanism selection guidance: Choose the smallest correct mechanism—FLIP, path travel, stroke draw, morph, clip/mask reveal, stagger, text subdivision, or 3D camera moves—using the keyframe-patterns reference. - Use Case: A creator asks for a smooth punch-in on a video clip. The skill directs keyframing scale and translation on a wrapper inside the clip, registering the GSAP timeline, then verifying with a focused --shot and final-frame snapshot. ## Quick Start Ask the agent to add a smooth zoom and reframe to a clip in your HyperFrames composition and verify it with the hyperframes keyframes CLI.

Frequently Asked Questions about hyperframes-keyframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a punch-in or zoom effect to a HyperFrames clip?

Keyframe scale with x/y or percentage translation on a non-timed visual wrapper inside the clip. Use a short tween for a hard punch or a longer eased tween for a smooth move, then verify with hyperframes keyframes and a focused --shot.

How do I make GSAP animations seek-safe for video rendering?

Build the timeline synchronously at page load with gsap.timeline({ paused: true }), register it on window.__timelines keyed by data-composition-id, keep repeats finite, and never call tl.play() for render-critical motion.

Which animation libraries work with HyperFrames keyframes?

GSAP, CSS keyframes, Anime.js, and WAAPI are supported, plus Three.js/WebGL driven from HyperFrames time. Each runtime has rules: CSS needs animation-fill-mode both, Anime.js needs autoplay false and registration on window.__hfAnime.

Why does my animation break when scrubbing the video timeline?

Unseekable motion usually comes from Date.now(), performance.now(), unseeded Math.random(), timers, async-created timelines, or unregistered requestAnimationFrame. Rebuild synchronously, pause autoplay, and register the instance.

Can HyperFrames keyframes do source speed ramps or freeze frames?

No. Time-varying playback-rate envelopes and arbitrary mid-source freezes are not supported. Preprocess a derived media asset, place it as its own clip through hyperframes-core, then apply visual keyframes on wrappers.

How do I verify a canvas or WebGL animation that DOM tools cannot see?

Use the --ghost flag with hyperframes keyframes, since marker boxes cannot capture internal canvas motion. Drive camera, object, and shader uniforms from deterministic state rendered from HyperFrames time, then snapshot proof poses.