Drag & Drop in the Remotion Player

The Remotion Player supports reacting to mouse events allowing for building interactions on the canvas.
Try to drag and resize the elements below.

Pointer events work just like in regular React. Make these Remotion-specific considerations:

• Disable the controls prop to disable any obstructing elements. You can render Playback controls outside of the Player.
• The Player might have CSS scale() applied to it.
  If you measure elements, you need to divide by the scale obtained by useCurrentScale().
• You can pass state update functions via inputProps to the Player. Alternatively, using React Context also works.

Example

Let's build the demo above.