Below are a set of resources for use with the Shotcut video editor.
Section | Title | Description |
---|---|---|
0 | Short Tutorial Videos | A set of short tutorial videos on YouTube. |
1 | SVG Path Animation | Animate the paths specified within an SVG file to make it appear that they are slowly being drawn on the screen. |
2 | Animating Routes on a Map | Using an SVG to animate routes on a map as well as icons travelling those routes. |
3 | Animated Text Strokes | A special case of the technique used in Section 1, without needing any knowledge of SVG editors, such as Inkscape and Illustrator. |
4 | Heartbeat | A video simulating a heartbeat, or electrocardiogram graph |
5 | 3D_Animation | Using HTML/CSS to produce a 3D-Animation of the Shotcut Logo |
6 | Lower-Thirds Banner Application | Using HTML/CSS to produce a "lower-third" banner effect as seen mainly on videos and TV programs |
7 | Typewriter (TTY) Effect Application | Using HTML/CSS to produce a "Typewriter" effect |
8 | Title Revealing Title Application | Using HTML/CSS to produce a Revealing Title effect |
9 | Pseudo-Morphing Application | Using HTML/CSS to produce a Pseudo-Morphing effect |
10 | MTL (Project File) Analyzer | A simple utility that analyses a Shotcut project file (.mlt). |
11 | SVG Morphing Application | Using HTML/CSS to produce an SVG Morphing effect |
12 | GPS Tracker Speedometer Display | An HTML file that takes speed and altitude, obtained from a GPX file, such as produced by a GPS Tracker, and displays it as an animation. |
13 | Subtitle Displayer | An HTML file that displays in a webpage cues from a Subrip (.srt) file according to their timings. |
14 | Subtitle MLT Generator | A simple utility that reads a Shotcut project file (.mlt), reads a subrip (.srt) subtitle file that matches the video that will be exported from the project file, then creates a second .mlt file that is a transparent video with the subtitles appearing at the relevant times. |
15 | Progress Circle | A simple utility to create an HTML file that will display an animated progress circle. |
16 | LUT-3D Viewer | A simple utility to get a quick impression of what an image looks like after applying one or more 3D LUTs (Look-Up Tables). 3D-LUTs have a file extension of '/cube'. |
17 | SubRip SRT Subtitles Generator | An HTML-based utility that creates SubRip SRT subtitles. These can be hardcode/burned into the video itself e,g, by using the Subtitle MLT Generator described in Section 14. |
18 | Keypresses Visualiser and PNG Image Creator | An HTML-based utility that enables you to visualise graphically any keypresses that you make in the area at the top of the page. Optionally, a PNG image with a transparent background can also be downloaded. |
19 | Greyscale (Luminosity) Masks | HTML files to generate fairly complex Greyscale Luminosity Masks for use e.g. with transitions. Optionally, a PNG image can be downloaded. |
I have put several short tutorial videos on my YouTube channel. Just click on the relevant image below:
SVG files are Scalable Vector Graphics files that are XML files which can easily be manipulated with Javascript. In particular the paths specified within the SVG file can be animated to make it appear that they are slowly being drawn on the screen. The HTML file SVG_animation.html is such an example.
You can replace the <svg>....</svg>
in the HTML with your own SVG file and easily tailor its animation
by modifting the parameters (see below). A tutorial on how to do this can be seen here:
SVG_animation_tutorial.mp4.
Play around with the parameters and please remember, PATHs are being animated; if you have objects like RECTANGLEs or ELLIPSEs
you must convert these to PATHs (e.g. using Inkscape - https://inkscape.org/) in order to animate them.
For those new to SVGs, Inkscape and/or OBS, have a look at the following useful Introductory videos:
To obtain the source (to edit in your SVG) click on the SVG_animation.html link above,
then Right-click
on the webpage and choose "view source" and copy-paste this into
a text editor (such as notepad++) to edit in your own SGV file.
Here is another SVG animation, this time of the Shotcut logo shotcut_Logo_Animation.html.
The parameters you can modify to alter the type of animation are:
Several users of Shotcut have asked how they can create an animated route on a map. There are ways of doing this just using Shotcut, which mainly involves using a chroma key filter with mask filters that are keyframed. A good example of this has been provided by Shotcut forum member "Namna" here: https://forum.shotcut.org/t/trace-an-animated-route-over-a-map/24366/3. However, this can quite fiddly and complicated if the route crosses itself or partway reverses or changes direction drastically. I have experimented with a different approach using SVGs (Scalable Vector Graphics). See "1. SVG Path Animation" above for more information on SVGs - though that technique and this one are similar they are totally independent of each other, you don't have to use one to use the other. Before going into detail on what to do it is worth looking at the finished result, so click here for an animated tour around Cyprus. It is a bit on the "gaudy" side as I have tried to include as many options as I could and the start times for each path is set to zero, whereas in reality each path would wait for the previous path to complete first.
Here are the steps to produce this:
The utility is fairly intuitive. Hovering over the title of a column will bring up a tool-tip explaining about that column. You can use "Drag & Drop" on the elements/cells in the first column to move a path upwards or downwards. This makes it easier sometimes when altering the "Start" and "Duration" cells to link paths sequentially.
Animating text strokes, such as is shown in these two videos is a special case of the technique used in Section 1 (SVG path animation) above. Some people feel a bit intimidated using SVG editors like Inkscape or Illustrator. To ensure that because of this these people don't miss out on using my path animation utility I have come up with a simpler procedure for animating text that does not require using an SVG editor.
There is simple web-base utility that enables you to input a line of text, choose a Google Font to display it and decide whether
to view the characters separately or as a continuous string. You are presented with the SVG representing this, which you can
then copy-paste into the following HTML (replacing the <svg>...</svg>
element in it). Then you can simply view this HTML
file in a browser (or as a browser source in OBS) and use a screen recorder to create a video clip that you can use in Shotcut.
There are quite a few parameters near the top of the HTML (See Section 1 above) that you can modify to change the behaviour of the animation. Try different combinations to see which suits your requirements best. Two new parameters have been added.
The instructions for creating text animation effects such as those shown in the videos above are:
<svg>...</svg>
element with one that you are now going to create. The two html files for downloading are:
.
<svg>...</svg>
element that is already there. Save the changed HTML file.
Several users of Shotcut have asked how they can simulate a heartbeat, or electrocardiogram graph. The easiest way is to obtain a clip from the web and use that. I generated two such clips:
If you are interested in how I produced the videos I downloaded an actual ECG dataset from the web, wrote a javascript program to massage the data and display it in an HTML canvas and then added some CSS animation. I then played it as a “browser source” in OBS and recorded it. I then fed it into shotcut, tidied it up and created the 2 videos. N.B. The flatlining at the end is my invention, the patient being monitored did not die. Feel free to use them in your projects.
I created an HTML/CSS file to show how easy it is to produce very acceptable 3-D animations using this technology. Here is the result:
The HTML file was run as a browser source in OBS studio, which recorded the animation. This video was then tidied up within Shotcut. It required 3 images:
The code itself is:
CSS animations lead themselves quite well to creating reasonably sophisticated "low-third" effects, such as are shown in the sample video above. There are some who are not confident at creating the HTML files needed to do this, so I have created a simple utility that people can use to do this. Initially the utility will only create the type of effect shown above, but I may extend it to other animations. The utility enables the user to tailor the various parameters needed to create the effect in a simple way. It creates the HTML/CSS text needed to create the effect which the user can then copy-paste into a file and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut, or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it.
The icon that is used in the animation can be chosen from a set of over 1,600 free icons provided by those great people over at The licence for these free icons is very liberal and allows the icon set to be used for commercial projects, open source projects, or really almost whatever you want. If you want to use something else you can do that also e.g. you could use an emoji character.
My web application can be accessed by pressing here:
HTML/CSS/Javascript can easily be used to create a "typewriter" effect. For those who are not confident at creating the HTML files needed to do this I have created a simple utility that people can use instead. The utility enables the user to tailor the various parameters needed to create the effect in a simple way. It creates the HTML/CSS text needed to produce the effect which the user can then copy-paste into a file and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut. Or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it. Or you could use a previous version of Shotcut e.g. version 20.07.11 that supports the "Text:HTML" filter. If you do use this filter do not forget to select the option "Use WebVfx Javascript Extension".
If you want to create an effect that is overlaid on top of another video clip then be aware that, because of the way the effect is created, you cannot have a transparent background, so you will have to use a "green screen" technique. e.g. if your text is white (#ffffff), choose a black (#000000) background (or vice versa) and use the "chroma key" filter to turn the background transparent.
The animation itself relies on the free GSAP javascript animation library, see here https://greensock.com/standard-license/ to check out the licence, which is very liberal. The HTML file produced loads this file from the internet, so it should go without saying that you need an internet connection when you run that HTML file.
N.B. For the animation to work you need to be connected to the internet and must also have downloaded the following
two Javascript files and saved them in the same directory/folder as the HTML file you create. These files are:
The web application can be accessed by pressing here:
I have created a simple utility that enables the user to tailor the various parameters needed to create a "Title Reveal" effect in a simple way. It creates the HTML/CSS text needed to produce the effect which the user can then copy-paste into a file and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut. Or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it. Or you could use a previous version of Shotcut e.g. version 20.07.11 that supports the "Text:HTML" filter. If you do use this filter do not forget to select the option "Use WebVfx Javascript Extension".
The animation itself relies on the free GSAP javascript animation library, see here https://greensock.com/standard-license/ to check out the licence, which is very liberal. The HTML file produced loads this file from the internet, so it should go without saying that you need an internet connection when you run that HTML file.
N.B. For the animation to work you need to be connected to the internet and must also have downloaded the following
two Javascript files and saved them in the same directory/folder as the HTML file you create. These files are:
The web application can be accessed by pressing here:
I have created a simple utility that enables the user to tailor the various parameters needed to create a "Pseudo-Morphing" effect in a simple way. It creates the HTML/CSS text needed to produce the effect which the user can then copy-paste into a file and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut. Or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it. Or you could use a previous version of Shotcut e.g. version 20.07.11 that supports the "Text:HTML" filter. If you do use this filter do not forget to select the option "Use WebVfx Javascript Extension".
The animation itself relies on the free GSAP javascript animation library, see here https://greensock.com/standard-license/ to check out the licence, which is very liberal. The HTML file produced loads this file from the internet, so it should go without saying that you need an internet connection when you run that HTML file.
N.B. For the animation to work you need to be connected to the internet and must also have downloaded the following
two Javascript files and saved them in the same directory/folder as the HTML file you create. These files are:
The web application can be accessed by pressing here:
A simple utility that analyses a Shotcut project file (.mlt). It tabulates:
Please note that if you have media specified in a Playlist, then they too will be listed as "Producers", even if you do not use them on the timeline. To only see media that has been used in the project you will need to make a copy of the project file (.mlt) and editthis to delete all the entries in the Playlist. Ten feed this edited file into the analyzer.
The web application can be accessed by pressing here:
There is also a version that you can download and use offline. This version will download if you right-click on the following button and choose to download/save the link:
I have created a simple utility that enables the user to tailor various parameters needed to morph SVs in a simple way. It creates the HTML/CSS text needed to produce the effect which the user can then copy-paste into a file and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut. Or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it. You cannot use a previous version of Shotcut e.g. version 20.07.11 that supports the "Text:HTML" filter. This is because the interpolation library used to morph the SVG paths is not compatible with the webkit-browser used by the old versions of Shotcut.
There are some restrictions on the 2 SVGs, the SVG you are morphing from and the one you are morphing to. Firstly they each can only contain a single path (<path>) containing a singe description (d="...."). Secondly, to get a reasonable morph the two SVGs should have identical viewBoxes. If e.g. you were trying to morph the text "I ❤️" into "NY" using the Inkscape SVG editor you would:
You would perform the same actions for the text "NY". These SVGs are the ones you would select in the app.
The animation itself relies on the free GSAP javascript animation library, see here https://greensock.com/standard-license/ to check out the licence, which is very liberal. The HTML file produced loads this file from the internet, so it should go without saying that you need an internet connection when you run that HTML file.
N.B. For the animation to work you need to be connected to the internet and must also have downloaded the following
two Javascript files and saved them in the same directory/folder as the HTML file you create. These files are:
The web application can be accessed by pressing here:
GPS trackers, either dedicated hardware or software ones, such as the BasicAirData Android app, create a file with various data in it recording the route taken. If this is in GPX XML format and contains <speed> elements, then the HTML file that you can obtain by clicking this button can be edited to contain the GPX data and run in a browser. For the HTML file to work, the data must be in GPX XML format. If your data is in another format try using gpsvisualizer.com to convert it, but the resulting data file must contain speed information as <speed> elements. To get a copy of the HTML just right-click it in the browser window and choose "View Page Source", then select all the text and copy it into a text editor.
The HTML file uses a javascript library, which can be downloaded here: canvas-gauges.com/download/ (click on the link saying "All-in-one"). It also uses jQuery, which it loads automatically from the web (or you could download it). You have to edit the HTML to replace the GPX XML data that is there by your own GPX data. There are various options you can change such as the background-color (it is "black", but can be changed e.e. to "white" or an HTMl colour such as "#7799BB").
If you use function key F12 to open (and later close) a console window while running the HTML in a browser you will see some useful information printed. This shows the minimum and maximum values for speed and elevation, which will help you to configure the speedomiter and altimeter to your liking.
If you want to use this animation in Shotcut, e.g. as an overlay on top of a video shot while running/cycling/driving the route, one way would be to record the animation e.g. as a browser-source in OBS Studio and create a video from it. You would then put it on a track and either have it as a small "picture-in-picture" (using the Size-Position-Rotate filter), or make the background transparent by using the Chroma-Key filter. Another way would be to use an earlier version of Shotcut such as v20.07.11 and run it as a Text:HTML filter. However to do this you would have to use the a different HTML file, notably , along with this javascript file you will also need to select the option in the filter for using the WebVfx framework.
Subrip (.srt) files are the most widely-used files for holding video subtitles. They can be stored in various video containers (such as MP4), or can be separate files that are read by video players. I have provided a utility that can help users to create subtitles here: . I have also provided a fairly simple HTML file that users can download and tailor to their needs to display in a browser the subtitles that are in the subrip file. To access it see the end of this section.
Besides displaying the subtitles in a browser window the HTML can also be used as a "browser source" in OBS Studio, which then enbles you to record the subtitles to a video file. Another possibility, if you have a version of Shotcut that is 20.07.11 or earlier, which supports the Text:HTML filter, you can use this HTML file as such a filter (selecting the option to "Use Webvfx Framework"). By changing the CSS code for the <body>element to have "background-color: transparent", you can "burn" the subtitles directly onto your video. You need to apply the filter to a transparent clip that is exactly the length og the "end" time for the last cue. In the example below this is 30.000 seconds.
As I mentioned, the HTML file is fairly simple and it has a few options that can be changed. These are:
OBS Stdio does not support the alpha channel (opacity) when creating a video so you will have to use a "green screen" background colour, the default is #00ff00 (i.e. Green), and remove this in Shotcut using the Chroma-Key filter.
You need to copy the contents of your subrip file to the HTML file, replacing the dummy version that is already there saying: Beware, the code does very little error checking, so if your subrip file has errors, such as the start times not incementing monotonically, the results can be unpredictable. You may be able to correct the file using the utilities here: subtitletools.com/
Finally: Only create the subrip file as the last action in creating the video. If you create the subtitle file and then alter the video then the timings are liable to change and the subtitle file will not reflect what is on the screen.
The HTML file can be downloaded by right-clicking this button: , along and saving the HTML link to a file.
I have created a simple web utility that enables the user to create a Shotcut .mlt file that consists of a transparent background and "Text:Simple" filters that display a set of subtitles at the relevant times. The subtitles are read from a Subrip (.srt) subtitle file that is fed into the generator along with the Shotcut project file of the video to which the subtitles refer. The resulting .mlt file can be opened in the Shotcut project as a clip and placed on a new topmost track. N.B. Unless you know what you are doing, the project should not be edited afterwards as any changes to the timings will mean that the subtitles will probably appear at the wrong times. If you do edit the project afterwards, you may well need to modify/re-create the Subrip file and then generate a new subtitle .mlt file. The subtitle MLT file is downloaded by pressing the "Output File (MLT)" button.
The web application can be accessed by pressing here:
If you would like to run the generator locally, rather than over the internet, you can download the source (e.g. Right-click in the generator window and select "View page source" and copy it to a file with a ".html" extension) then just run that in a modern browser, no internet connection is then needed.
The steps to take are (usually):
Don't forget, if you are uploading your video to YouTube, or Vimeo, you don't have to burn subtitles into the video frames, these platforms allow you to upload subtitle files and their players enable users optionally to request these subtitles be displayed.
I have created a simple utility that enables the user to tailor the various parameters needed to create a "Progress Circle" effect in a simple way. It creates the HTML/CSS/Javascript text needed to produce the effect which the user can then download and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut. Or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it. A future plan is to enable you use a previous version of Shotcut e.g. version 20.07.11 that supports the "Text:HTML" filter. If you do use this filter do not forget to select the option "Use WebVfx Javascript Extension". See the following website for examples: https://tigrr.github.io/circle-progress/examples.html.
Currently the utility itself relies on a free javascript library created by "Tigran", see here https://github.com/tigrr/circle-progress. You do not need to download this library as an inline copy is in the HTML file created.
The web application can be accessed by pressing here:
I have created a simple utility that enables the user to get a quick impression of what an image looks like after applying one or more 3D LUTs (Look-Up Tables). 3D-LUTs have a file extension of ".cube". It is not easy to decide which LUT to use on a particulay image (or video) and rather than try each one out one at a time this utility lets you see what effect many LUTs would have, all in one go.
The web application can be accessed by pressing here:
An HTML-based utility that creates SubRip SRT subtitles. These can be hardcode/burned into the video itself e,g, by using the Subtitle MLT Generator described in Section 14.
Detailed information can be accessed by pressing here:
This utility enables you to visualise graphically any keypresses that you make in the area at the top of the page. The visualisation is in the form of "keys" as you would see on a keyboard. As you press a key it is remembered and once you lift your finger from the key (or a set of keys such as Control Alt x) these keys are displayed. Optionally, a PNG image with a transparent background is also downloaded at this point. The image is useful if e.g. you are making a tutorial video with a video editor such as Shotcut and want edit in the keypresses so they appear on the screen.
Please be aware that the keys displayed may not be exactly what you expect. For example: on my keyboard the asterix "*" is on the same key as the number "8" character - If I press Shift 8, what will appear in this utility will be Shift *, NOT *, nor Shift 8. This is because as soon as you press Shift, the system passes that to the utility and as soon as you press 8 the system passes whatever is produced when the number"8" key is pressed in conjuction with "Shift", which is "*". Some keyboards use the Alt and Control keys as well as the Shift key to modify what character is produced. e.g. Alt Control m typed on a Canadian French keyboard with "Canadian French" defined as the current keyboard in the operating system will be shown in this utility as Alt Control μ, not Alt Control m; on this keyboard to get the utility to produce Alt Control m you will have to define the keyboard as English in the operating system.
There are various parameters that you can set to tailor how the keys appear e.g. if you want the keys to appear 30 pixels from the right-hand edge of the image you would set "keys-align = right" and "keys-offset = 30". Click on the "Settings" tab at the left to set the parameters. You can also change the name that appears on the button by providing the conversion in the table e.g "Backspace" becomes "Bksp".
This utitlity was originally written as a simple webpage that you could use from a modern browser (Chrome, Edge, Firefox etc...). However there was no way to intercept browser shortcuts (like Control-n) so it was decided to convert it to a NW.js utility instead. Unfortunately this means that there are separate versions for the different operating systems. The utility can be downloaded for 64-bit versions of the different operating systems from the table below. To install the utility just unzip the ZIP file. The utility can be found in the directory/folder as indicated in the table.
64-bit System | Zip file | MD5 Checksum | Utility Location |
---|---|---|---|
Windows | Zip file | D8585F0BF39BA6BDBA176502FD1D9A4F | Keypresses/keypresses.exe |
Linux | AEA2B46910D31A546FD7D4AAB4B41E06 | Not available (yet) | |
Mac OS X | 824795816881908A877689CA6BAEA8A0 | Not available (yet) |
Please note that only the Windows version has been tested. Without a Linux and MacOS X system I have been unable to test these versions. I'd be grateful to anyone who could test the Linux and MacOS X versions and leave their findings here: Shotcut Forum
Greyscale Luminosity Masks are black and white (and various shades of grey) images. One of their uses is as masks for transitions. When a transition is created in Shotcut by dragging one clip to partially obscure another one next to it it is possible to assign one of these masks to that transition using the Custom option.
I have produced HTML "generators" to create fairly complex masks. They can be accessed by pressing here: