@remotion/studio: Interpret keyframes as runtime values with drag overrides

[JonnyBurger]

Closes #7779

Previously, when Studio's Visual Mode encountered a prop wired up with interpolate() or interpolateColors(), it treated the prop status as non-editable and fell back to the runtime value evaluated by the user's JSX expression. Keyframes were detected and surfaced as keyframe markers on the timeline, but the parsed easing/clamping/keyframe metadata were otherwise unused at render time.

This PR interprets the parsed keyframes properly:

• New interpolateKeyframedStatus({frame, status}) utility in @remotion/core runs interpolate() / interpolateColors() using the keyframes, easing, and clamping captured from the AST.
• computeEffectiveSchemaValuesDotNotation now accepts a frame and, for keyframed props, returns the interpolated value instead of the runtime fallback.
• wrapInSchema reads useCurrentFrame() and forwards it so that the wrapped component receives the dynamically calculated value (the foundation for later allowing edits at specific frames).
• The Timeline field row now shows the calculated value for the current playhead — using the same field component as editable props — but rendered in gray and non-interactive instead of the previous static "keyframed" label.

The keyframeDisplayOffset already used for visual keyframe lanes is plumbed down so the displayed value matches the frame the JSX expression evaluates at (i.e. global playhead minus parent sequence offset).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	May 29, 2026 1:32pm
remotion	Ready	Preview, Comment	May 29, 2026 1:32pm

[pullfrog]

Reviewed changes — Adds interpolateKeyframedStatus() to compute interpolated values for keyframed props at the current frame, wires it through wrapInSchema so components receive dynamically calculated values, and updates the Timeline to display the computed value (grayed out, non-interactive) instead of a static "keyframed" label.

• Add interpolateKeyframedStatus() utility — Runs interpolate() / interpolateColors() using parsed keyframe metadata (easing, clamping) from the AST. Returns null on error or unsupported type mixtures.
• Update computeEffectiveSchemaValuesDotNotation — Accepts a frame parameter; for keyframed props, returns the interpolated value instead of the raw runtime fallback.
• Wire useCurrentFrame() in wrapInSchema — Forwards the current frame so the wrapped component receives the dynamically calculated keyframed value.
• Add TimelineKeyframedValue component — Displays the interpolated value using the same field renderer as editable props, but grayed out and non-interactive.
• Plumb keyframeDisplayOffset — Passed through the Timeline component tree so displayed values account for parent sequence offsets.

✅ No new issues found.

Clean, focused change. The try/catch around interpolate() and interpolateColors() provides a safe fallback if parser-produced easing arrays ever have unexpected lengths. The frame: null path in getFieldsToShow correctly preserves the existing behavior for schema discovery while wrapInSchema gets the animated value.

  ^{｜ View workflow run ｜ Using Kimi K2 ｜ 𝕏}

[pullfrog]

Reviewed changes — Incremental review of commits pushed since the prior review (2eddc95 and 6267ccc).

• 2eddc95 — Limit interpolated value display to 2 decimals — TimelineKeyframedValue.tsx now rounds numeric interpolated values to 2 decimal places before rendering. Clean UX improvement that prevents long floating-point noise in the Timeline field row.
• 6267ccc — Merge from origin/main — Conflict resolution in TimelineEffectFieldRow.tsx correctly preserves both the new keyframed-value rendering from this PR and the reset/context-menu functionality that landed on main. The rename of TimelineFieldRow → TimelineSequenceFieldRow in TimelineExpandedRow.tsx is also correctly reflected.

✅ No new issues found in the incremental changes. Merge conflict resolution is clean and the decimal rounding is a nice polish touch.

  ^{｜ View workflow run ｜ Using Kimi K2 ｜ 𝕏}