mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
Miguel Ángel
90b9a18b70
STUDIO — edit a selected element's GSAP motion path directly on the canvas: a dashed polyline through its x/y keyframes (or motionPath waypoints) with draggable diamond nodes, in composition coordinates so it tracks GSAP transforms. - Drag a node to rewrite its keyframe/waypoint; click to select a keyframe and park the playhead on it; double-click empty canvas to author a new motionPath; add/remove waypoints inline; right-click a keyframe node for the timeline's delete actions (remove keyframe / remove all). - The overlay spills into the canvas margin without bleeding into the side panels. - Keyframe add/remove key off the tween-relative percentage the GSAP writer expects, so edits from the Design panel, timeline, and motion path all persist and refresh consistently. Array-form keyframes (`keyframes: [...]`) are removable in both the acorn and recast writers. - Dragging a GSAP-animated element folds the offset through gsap.set instead of a conflicting CSS translate; the drag intercept trusts the live runtime so a deleted animation can't be resurrected from a stale parse cache. Gated behind the keyframes flag. CLI — `npx hyperframes keyframes [dir|file]` surfaces every GSAP tween, its keyframes (with absolute times), and an ASCII motion-path drawing so agents can read and edit motion as data instead of guessing at raw numbers. `--selector`, `--json` (machine-readable), filters internal hold markers, draws the path only for genuine multi-point/2-axis motion. Ships the `hyperframes-keyframes` skill (surface → read → edit → verify loop). PRODUCER — esbuild ESM banner also shims `__filename`/`__dirname` so bundled CJS deps (e.g. wawoff2) don't throw "__dirname is not defined" during render.