Skip to content

feat(studio): smooth gesture recordings#1658

Closed
miguel-heygen wants to merge 1 commit into
mainfrom
feat/gesture-smooth-motion
Closed

feat(studio): smooth gesture recordings#1658
miguel-heygen wants to merge 1 commit into
mainfrom
feat/gesture-smooth-motion

Conversation

@miguel-heygen

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

Copy link
Copy Markdown
Collaborator

Summary

  • Smooth gesture recordings: recorded mouse/pointer movements now pass through a Gaussian-weighted moving average (radius 3) before commit, eliminating jitter while preserving overall motion shape. First and last keyframes are pinned.
  • Editable easeEach: the Animation panel's Speed dropdown writes easeEach for keyframed tweens (interpolation between individual keyframes) and ease for flat tweens. Gesture recordings default to power1.inOut.
  • Fixed fetch-cancellation race: useGsapAnimationsForElement had a bug where the target object in useEffect deps was unstable across re-renders, causing cleanup to cancel in-flight API calls before results arrived. Switched deps to primitive strings (target?.id, target?.selector).
  • Cache-buster on gsap-animations fetch: prevents stale HTTP-cached responses after mutations.
  • EasePresetGrid highlight fix: removed stale memo that prevented the selected preset from highlighting after changes.

Test plan

  • Record a gesture (pointer drag), verify the resulting motion path is smooth (no jitter)
  • After recording, open Animation panel → Speed dropdown, select different presets
  • Verify the dropdown value and preset grid highlight update immediately on each click
  • Verify easeEach is written to the source file for keyframed tweens
  • Verify flat (non-keyframe) tweens still write ease correctly

@miguel-heygen miguel-heygen force-pushed the feat/gesture-smooth-motion branch 3 times, most recently from 0c9e793 to cf30ff8 Compare June 23, 2026 01:47
@mintlify

mintlify Bot commented Jun 23, 2026

Copy link
Copy Markdown

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated (UTC)
hyperframes 🟢 Ready View Preview Jun 23, 2026, 1:48 AM

💡 Tip: Enable Workflows to automatically generate PRs for you.

…ion panel

Gesture recordings now go through Gaussian smoothing (radius 3) before
commit, eliminating jitter while preserving motion shape.  The Animation
panel's Speed dropdown writes easeEach for keyframed tweens (ease for flat
tweens), and the selected preset highlights correctly.

Fixed a fetch-cancellation race in useGsapAnimationsForElement — the
target object reference in useEffect deps was unstable across re-renders,
causing cleanup to cancel in-flight API calls before results arrived.
Switched deps to target?.id and target?.selector primitives.

Also adds a cache-buster query param on the gsap-animations fetch to
prevent stale HTTP-cached responses after mutations.
@miguel-heygen miguel-heygen force-pushed the feat/gesture-smooth-motion branch from cf30ff8 to 5ae8a9b Compare June 23, 2026 02:52
miguel-heygen added a commit that referenced this pull request Jun 23, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 23, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 23, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 23, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
@miguel-heygen

Copy link
Copy Markdown
Collaborator Author

Superseded by #1663 which includes all these changes (gesture smoothing, easeEach, fetch-race fix) plus marquee selection, AE presets, per-keyframe ease editing, and velocity fitting.

miguel-heygen added a commit that referenced this pull request Jun 23, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
miguel-heygen added a commit that referenced this pull request Jun 24, 2026
…city fitting

Marquee selection: click+drag on empty canvas draws a dashed selection
rectangle. All elements whose OBB intersects are group-selected via
SAT. Shift+marquee adds to selection. Click on empty deselects.

Per-keyframe easing: each keyframe segment has its own ease, editable
via expandable bezier curve editor in the Animation panel. Parser
preserves per-keyframe ease through round-trips (ease-only updates
preserve existing properties).

AE Easy Ease presets: correct After Effects bezier values (0.333, 0,
0.667, 1) in the preset grid.

Velocity-based curve fitting: gesture recordings analyze velocity
profile and assign per-keyframe custom eases automatically.

Gesture smoothing: Gaussian-weighted moving average (from PR #1658)
+ easeEach support for keyframed tweens + fetch-cancellation race
fix in useGsapAnimationsForElement.
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