Web developing

Quickly pan the current video clip by navigating the box with the mouse on the right window and pressing the 'd' shortcut to place a keyframe. The box on the right is what controls the position, scale/zoom and rotation of the main video.
The right window shows a box that has only blue outlines (for a better visual look, dotted outlines like in the animation and a small blue) which controls the transform properties of the currently selected clip with certain shortcuts that are listed below.
The left window shows the final result in real time (including the transformation of the box that is applied onto the clip - check the explanation video where what I mean exactly is illustrated with paint).
Below both windows is a simple timeline where the user can scroll both horizontally and vertically, cut and ripple cut (cuts are also done with a shortcut). The clips on the timeline can be colored as well.
There is a simple window where the user can set the project settings (like dimension, frames per second etc). There is an additional button for rendering the video. The user can change the render settings (Frames per second, dimension/size of video, codec... Etc)

Shortcuts and navigation:

d: Set a keyframe
Only moving the mouse around: Control the position of the box when the cursor is in the frame of the right window.
Scroll: Box Zoom in/out.
Shift + Scroll: Rotate the box to left/right.
S: Cut on timeline at current playhead
a: Ripple cut left side

We need a render button where the user can render out the selected video - we would need in and out points which can be triggered by the short cut 'i' for the in-point and 'o' for the outpoint.