Skip to content

fix(studio): keyframe stability + modular border-radius editor#1217

Open
miguel-heygen wants to merge 1 commit into
mainfrom
fix/keyframe-stability-border-radius
Open

fix(studio): keyframe stability + modular border-radius editor#1217
miguel-heygen wants to merge 1 commit into
mainfrom
fix/keyframe-stability-border-radius

Conversation

@miguel-heygen

Copy link
Copy Markdown
Collaborator

Summary

  • Fix code editor not refreshing after GSAP script mutations (stale content until page refresh)
  • Fix keyframe cache not clearing on animation/keyframe deletion (orphaned timeline diamonds)
  • Fix pre-existing typecheck error (handleGsapMaterializeKeyframes optional in TimelineToolbar)
  • Add Figma-style visual border-radius editor with per-corner display and link/unlink toggle
  • Wire GSAP runtime-interpolated border-radius values to the corner picker

Test plan

  • Select element with GSAP animation, add keyframe via design panel diamond → code tab updates immediately
  • Delete keyframe via context menu → timeline diamond disappears without refresh
  • Delete all keyframes → Animation card resets, all diamonds gone
  • Select blob in 01-liquid-blob → Radius section shows per-corner values
  • Scrub playhead on GSAP-animated borderRadius element → corner values update in real-time
  • Toggle link/unlink in corner picker → uniform vs per-corner editing works

@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown

Fallow audit report

Found 22 findings.

Duplication (11)
Severity Rule Location Description
minor fallow/code-duplication packages/studio/src/components/editor/MotionPanel.tsx:173 Code clone group 1 (18 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/components/editor/PropertyPanel.tsx:259 Code clone group 1 (18 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/contexts/DomEditContext.tsx:38 Code clone group 2 (40 lines, 3 instances)
minor fallow/code-duplication packages/studio/src/contexts/DomEditContext.tsx:107 Code clone group 2 (40 lines, 3 instances)
minor fallow/code-duplication packages/studio/src/contexts/FileManagerContext.tsx:54 Code clone group 3 (44 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useDomEditSession.ts:573 Code clone group 2 (40 lines, 3 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:87 Code clone group 4 (8 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:117 Code clone group 4 (8 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:296 Code clone group 5 (31 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:382 Code clone group 5 (31 lines, 2 instances)
minor fallow/code-duplication packages/studio/src/hooks/useFileManager.ts:450 Code clone group 3 (44 lines, 2 instances)
Health (11)
Severity Rule Location Description
major fallow/high-crap-score packages/studio/src/components/StudioHeader.tsx:143 'StudioHeader' has CRAP score 90.0 (threshold: 30.0, cyclomatic 9)
minor fallow/high-crap-score packages/studio/src/components/editor/PropertyPanel.tsx:128 'commitManualOffset' has CRAP score 31.6 (threshold: 30.0, cyclomatic 10)
critical fallow/high-crap-score packages/studio/src/components/editor/PropertyPanel.tsx:185 'gsapRuntimeValues' has CRAP score 106.4 (threshold: 30.0, cyclomatic 20)
minor fallow/high-crap-score packages/studio/src/components/editor/PropertyPanel.tsx:220 'gsapBorderRadius' has CRAP score 37.1 (threshold: 30.0, cyclomatic 11)
critical fallow/high-crap-score packages/studio/src/components/editor/propertyPanelStyleSections.tsx:38 'StyleSections' has CRAP score 62.5 (threshold: 30.0, cyclomatic 53)
major fallow/high-crap-score packages/studio/src/hooks/useFileManager.ts:69 '<arrow>' has CRAP score 56.0 (threshold: 30.0, cyclomatic 7)
major fallow/high-crap-score packages/studio/src/hooks/useFileManager.ts:194 'openSourceForSelection' has CRAP score 56.0 (threshold: 30.0, cyclomatic 7)
critical fallow/high-crap-score packages/studio/src/hooks/useFileManager.ts:237 'uploadProjectFiles' has CRAP score 182.0 (threshold: 30.0, cyclomatic 13)
major fallow/high-crap-score packages/studio/src/hooks/useGsapTweenCache.ts:123 'animations' has CRAP score 49.5 (threshold: 30.0, cyclomatic 13)
minor fallow/high-crap-score packages/studio/src/hooks/useGsapTweenCache.ts:225 '<arrow>' has CRAP score 31.6 (threshold: 30.0, cyclomatic 10)
minor fallow/high-crap-score packages/studio/src/hooks/useGsapTweenCache.ts:254 'tryRuntimeScan' has CRAP score 31.6 (threshold: 30.0, cyclomatic 10)

Generated by fallow.

miguel-heygen commented Jun 6, 2026

Copy link
Copy Markdown
Collaborator Author

@miguel-heygen miguel-heygen force-pushed the fix/keyframe-stability-border-radius branch 2 times, most recently from 4d4133c to 40109f6 Compare June 6, 2026 21:28
@miguel-heygen miguel-heygen force-pushed the fix/keyframe-stability-border-radius branch from 40109f6 to 03339b8 Compare June 7, 2026 23:39
Comment thread packages/producer/src/services/render/stages/captureHdrResources.ts Fixed
Comment thread packages/producer/src/services/render/stages/captureHdrResources.ts Fixed
Comment thread packages/producer/src/services/renderOrchestrator.ts Fixed
@miguel-heygen miguel-heygen force-pushed the fix/keyframe-stability-border-radius branch from 03339b8 to 7bd6e17 Compare June 7, 2026 23:47
- Per-corner border-radius display and visual editor with corner picker
- Wire GSAP runtime border-radius values to corner picker
- Bump GSAP cache on code-tab edits
- Sync code editor after GSAP mutations + clear keyframe cache on deletion
- Flat undo/redo/capture buttons in header
@miguel-heygen miguel-heygen force-pushed the fix/keyframe-stability-border-radius branch from 7bd6e17 to 5921c9f Compare June 7, 2026 23:54
miguel-heygen added a commit that referenced this pull request Jun 9, 2026
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.
miguel-heygen added a commit that referenced this pull request Jun 9, 2026
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.
miguel-heygen added a commit that referenced this pull request Jun 9, 2026
…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).
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.

2 participants