Remotion Files

Interactivity in the Studio

Now Remotion Studio allows you to interactively change your code!

• Click items in the canvas and drag them around
• Drag effects on elements
• Drag videos, audio and images directly on the canvas
• Set keyframes for CSS, component props and effect props
• Drag layers in the timeline

How to make things interactive:

• Use <Img>, <AnimatedImage>, <Video>, <Sequence>, <HtmlInCanvas>, @remotion/shapes, <Gif>, <Solid> for built-in interactivity
• Turn regular HTML elements into interactive ones: <div> → <Interactive.Div>

Opt out of interactivity:

• Use the new "Outline Toggle" in the Studio to hide all outlines
• Set showInTimeline={false} so it doesn't participate in interactivity

What's new

• remotion: Add Interactive components by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8269
• remotion: Support transform-origin keywords in interpolate() by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8248
• remotion: Add easing to interpolateColors by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8240
• @remotion/media: Prevent initial double seek by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8278
• @remotion/studio: Release Studio interactivity by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8271
• @remotion/studio: Exclude hidden timeline elements from canvas selection by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8282
• @remotion/studio: Fix marquee selection from empty timeline area by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8279
• @remotion/studio: Allow editing transform origin by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8265
• @remotion/studio: Polish timeline styling by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8262
• @remotion/studio: Fix asset and effect drop conflict by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8264
• @remotion/studio: Remove color swatch border by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8267
• @remotion/studio: Add outline rotation handles by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8255
• @remotion/studio: Preserve selection while dragging sequences by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8263
• @remotion/studio: Add timeline marquee selection by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8257
• @remotion/studio: Add easing editor modal by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8253
• @remotion/studio: Add Shift axis lock for outline dragging by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8245
• @remotion/studio: Fix nested composition selector button by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8244
• @remotion/studio: Support mixed timeline selections by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8239
• @remotion/studio: Allow visual editing keyframed UV coordinates by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8241
• @remotion/studio: Toggle selected keyframes together by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8230
• @remotion/studio: Add keyframe easing controls by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8229
• @remotion/studio: Allow dragging effects onto canvas outlines by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8226
• @remotion/studio: Allow dragging shape demos into Studio by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8258
• @remotion/studio-server: Make log updates more concise by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8256
• @remotion/studio-server: Condense log update output by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8246
• @remotion/studio-server: Avoid blank lines in keyframed props by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8247
• @remotion/studio-server: Omit absolute positioning for audio insertions by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8228
• @remotion/skills: Add Studio-editable animation guidance by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8249

Docs

• Upgrade Docusaurus and Rspack by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8268
• Reduce docs build Node memory by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8250

Internal and unreleased

• Internal: Experimental high-DPI screen recorder by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/8275

Full Changelog: https://github.com/remotion-dev/remotion/compare/v4.0.474...v4.0.475