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.
14 lines
405 B
HTML
14 lines
405 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<title>HyperFrames Studio</title>
|
|
</head>
|
|
<body>
|
|
<div data-hf-id="hf-aph5" id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|