mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 06:30:03 +00:00
feat(studio): keyframe system — parser, runtime, timeline UI, design panel, gesture recording (#1311)
* feat(studio): runtime hooks — global time compiler + keyframe runtime Add the runtime bridge layer: global time compilation (tween % → clip %), soft reload after mutations, runtime keyframe preview, and keyframe commit helper. * feat(studio): runtime hooks — global time compiler + keyframe runtime Add the runtime bridge layer: global time compilation (tween % → clip %), soft reload after mutations, runtime keyframe preview, and keyframe commit helper. * feat(studio): keyframe cache + commit hooks Add hooks for keyframe cache population (tween → clip-relative %), mutation dispatch, keyframe snapping, and audio beat detection. * feat(studio): timeline UI — dopesheet diamonds + keyboard nav Add dopesheet strip with diamond keyframe indicators, timeline property rows, keyboard navigation (J/Shift+J/Delete/K), and feature gate (STUDIO_KEYFRAMES_ENABLED defaults to false). * feat(studio): design panel — arc controls + ease curve + stagger Add arc path controls (curviness slider, auto-rotate), motion path SVG overlay, ease curve visualization, stagger controls, and expanded animation card. Includes border-radius editor dependency from #1217. * feat(studio): gesture recording core Add gesture recording engine with RAF sampling, modifier key property mapping (Shift→rotationXY, Alt→rotation, Cmd→opacity), Ramer-Douglas-Peucker simplification, and ghost trail SVG overlay. * fix(studio): keyframe drag + recording bug bash 21 fixes: capture GSAP base at drag start, translate:none before gsap.set, skip reapplyPathOffsets for GSAP elements, clamp recording seek, _auto flag for 100% keyframes, overlay flash fix, block edits during recording. * feat(studio): keyframe integration wiring + docs Wire App.tsx recording orchestration, TimelineToolbar K/R buttons, PropertyPanel per-property diamonds, shortcuts panel, toast notifications, and keyframes guide documentation. All gated on STUDIO_KEYFRAMES_ENABLED (default false).
This commit is contained in:
@@ -17,6 +17,46 @@ const SHORTCUT_SECTIONS = [
|
||||
{ key: "F", label: "Toggle fullscreen" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Keyframes",
|
||||
hints: [
|
||||
{ key: "K", label: "Add keyframe at playhead" },
|
||||
{ key: "Del", label: "Delete selected keyframe" },
|
||||
{ key: "H", label: "Toggle hold / bezier" },
|
||||
{ key: "U", label: "Expand / collapse properties" },
|
||||
{ key: "R", label: "Record gesture" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Editing",
|
||||
hints: [
|
||||
{ key: "⌘Z", label: "Undo" },
|
||||
{ key: "⌘⇧Z", label: "Redo" },
|
||||
{ key: "⌘C", label: "Copy element" },
|
||||
{ key: "⌘V", label: "Paste element" },
|
||||
{ key: "⌘X", label: "Cut element" },
|
||||
{ key: "S", label: "Split clip at playhead" },
|
||||
{ key: "Del", label: "Delete selected element" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Gesture recording modifiers",
|
||||
hints: [
|
||||
{ key: "Drag", label: "Record x / y position" },
|
||||
{ key: "Scroll", label: "Record z depth" },
|
||||
{ key: "⇧ Drag", label: "Record rotationX / rotationY" },
|
||||
{ key: "⌥ Drag", label: "Record rotation" },
|
||||
{ key: "⌘ Drag↕", label: "Record opacity" },
|
||||
{ key: "⌘ Scroll", label: "Record scale" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Panels",
|
||||
hints: [
|
||||
{ key: "⌘1", label: "Compositions tab" },
|
||||
{ key: "⌘2", label: "Assets tab" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Work area",
|
||||
hints: [
|
||||
|
||||
Reference in New Issue
Block a user