Skip to content

feat(studio): gesture-to-keyframes recording#1256

Open
miguel-heygen wants to merge 7 commits into
feat/motionpath-arc-motionfrom
feat/gesture-to-keyframes
Open

feat(studio): gesture-to-keyframes recording#1256
miguel-heygen wants to merge 7 commits into
feat/motionpath-arc-motionfrom
feat/gesture-to-keyframes

Conversation

@miguel-heygen

@miguel-heygen miguel-heygen commented Jun 7, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Gesture recording mode: select element, press Record (or R key), drag in preview while timeline plays — mouse/scroll gestures are sampled at ~60fps and converted to editable GSAP keyframes
  • Multi-property recording via modifier keys: plain drag (x/y), scroll (z), Shift+drag (rotationX/Y), Alt+drag (rotation), Cmd+drag (opacity), Cmd+scroll (scale)
  • Ramer-Douglas-Peucker simplification reduces 180+ raw samples to 5-15 clean keyframes
  • Velocity-to-ease inference auto-matches gesture acceleration curves to GSAP ease presets
  • Ghost trail SVG overlay visualizes the motion path during and after recording
  • Post-record preview panel with tolerance slider, property/ease display, commit/discard/re-record

Closes #1252

Test plan

  • Select an element, press R or click Record button
  • Drag in preview while timeline plays — verify trail overlay appears
  • Stop recording — verify preview panel shows with keyframe count
  • Adjust smoothing slider — verify keyframe count updates
  • Commit — verify GSAP keyframes written to code tab
  • Re-record — verify previous take is replaced
  • Test modifier keys: Shift+drag, Alt+drag, Cmd+drag, scroll

Copy link
Copy Markdown
Collaborator Author

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch from 8282bdd to 2e6c21e Compare June 7, 2026 23:31
@miguel-heygen miguel-heygen force-pushed the feat/motionpath-arc-motion branch from ed6ef87 to c7578e8 Compare June 7, 2026 23:40
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch from 2e6c21e to b9e42d6 Compare June 7, 2026 23:42
@miguel-heygen miguel-heygen force-pushed the feat/motionpath-arc-motion branch from c7578e8 to ad82c7b Compare June 7, 2026 23:49
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch from b9e42d6 to 1caa83a Compare June 7, 2026 23:49
@miguel-heygen miguel-heygen force-pushed the feat/motionpath-arc-motion branch from ad82c7b to a27fa9c Compare June 8, 2026 00:00
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch 13 times, most recently from 49c0586 to 3016641 Compare June 8, 2026 01:54
Gesture recording engine with RAF-based sampling, RDP simplification,
velocity-to-ease inference, ghost trail overlay, post-record preview
panel, and keyframe commit pipeline. Record button in animation section,
R keyboard shortcut, clipboard element context copy with toast, glass
toast styling, always-visible render queue actions, and keyframe diamond
dedup fix.
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch 7 times, most recently from da902bc to fb10b15 Compare June 8, 2026 20:50
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch from 0432ccf to 419f25e Compare June 8, 2026 21:59
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch 21 times, most recently from 43adfbf to b9a7cd6 Compare June 9, 2026 16:50
… and cache

Stabilize the keyframe system after the initial 17-unit implementation.

GSAP coordinate system, gesture recording, keyframe cache, auto-update
100% keyframe (_auto flag), re-render optimization, overlay fixes, and
dead code cleanup. Remove all strategic debug console.log statements.

Gate keyframes behind VITE_STUDIO_ENABLE_KEYFRAMES (default false) for
stable release — set to true to enable for bug bashing.
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch from b9a7cd6 to 474856a Compare June 9, 2026 16:54
Remove dead ct/ts/td declarations left from refactor — lint was
flagging them as unused.
The Studio timeline discovery code stamped data-start/data-duration on
ALL GSAP-targeted elements including those inside sub-compositions,
using the root composition's duration. This made the visibility system
treat sub-composition elements as always-visible, overriding the
parent clip's hidden state after the clip window ended.

Skip elements that are descendants of a composition host
(data-composition-src / data-composition-file) since their visibility
is already managed by the parent clip.

Reverts style-17-prod baseline to the correct (pre-regression) version.
The data-start/data-duration stamping for timeline discovery must only
run in Studio (where __hfStudioManualEditsApply is set). In production
renders, stamping elements changes visibility behavior and breaks
compositions that rely on CSS/anime.js visibility management.
Replace __hfStudioManualEditsApply check (not set during init) with
window.parent !== window (true in iframe = Studio, false in top-level
page = production render). Fixes keyframe diamonds not appearing in
Studio after the previous guard.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant