Skip to content

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

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

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

Conversation

@miguel-heygen

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

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 3 times, most recently from 0432ccf to 419f25e Compare June 8, 2026 21:59
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch 17 times, most recently from d7fd6cf to 7ec7be3 Compare June 9, 2026 00:14
… session fix, position capture

Replaces fragile inline keyframe toggle logic with a centralized
useEnableKeyframes hook that handles all scenarios:

- Element has keyframes → add/remove at seeked time
- Element has flat tween → convert + seeked keyframe + propagate to end
- Element has no animation (deleted) → create via add-with-keyframes mutation

Fixes:
- Stale closure: onToggle now reads from a sessionRef instead of render-time
  captured values, so animations are always current when the user clicks
- Fresh fetch fallback: when session.selectedGsapAnimations is empty, fetches
  directly from the parse API before falling back to create-new
- Position capture: reads GSAP runtime values only (no CSS offset — it applies
  separately via translate, adding it caused double-positioning)
- addKeyframeBatch: single mutation for all properties at a percentage,
  eliminating per-property race conditions
- Delete All Keyframes restored to delete-animation (not collapse-to-flat)
@miguel-heygen miguel-heygen force-pushed the feat/gesture-to-keyframes branch from 7ec7be3 to 9466f98 Compare June 9, 2026 00:21
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