Remotion has always been a code-first tool: you write React components, use useCurrentFrame(), and call interpolate() to animate properties over time. That workflow is powerful, but adding a timed animation means stopping, writing code, saving, and scrubbing the preview to check it. The new Interactive Keyframes feature in Remotion Studio collapses that loop into a single click.
Click a diamond, get an animation
The mechanic is straightforward. In the Remotion Studio timeline, every animatable property now shows a diamond icon next to its value.
Clicking it pins the value to the current playhead position, and between any two pinned diamonds, values will animate automatically.
Remotion handles the interpolate() call in your source code behind the scenes, so the output is real, readable React code, not a proprietary project file.
This is part of a much larger Studio interactivity push that landed in v4.0.475, which introduced the ability to click items in the canvas and drag them, drag effects onto elements, drop videos and images directly onto the canvas, set keyframes for CSS properties, component props, and effect props, and drag layers in the timeline.
What's actually happening under the hood
Remotion is a React-based framework that lets developers generate real MP4 videos programmatically, without touching timeline-based software like After Effects. Instead of manually keyframing animations frame by frame, you write React components that describe how your video should look and move. The traditional approach looks like this:
Don't miss what's next in AI
Join 300,000+ engineers and researchers who get the signal, not the noise.
- Full access to in-depth AI research breakdowns
- Be the first to know what's trending before it hits mainstream
- Daily curated papers, repos, and industry moves