Shotcut - Elusien's Contributions


Elusien's Shotcut WebVfx Framework for Overlay HTML Filters (Text: HTML) Animation


Shotcut GL-Transition Overlay HTML Filter Generator

Video Credits

Shotcut Video Credits Overlay HTML Filter Generator

CSS3 Animations

Shotcut CSS Animations Overlay HTML Filter Generator

SubRip Subtitles

SubRip Subtitle Generator


Elusien's Shotcut Video Filters

OBS Animation

Animation using OBS instead of WebVfx


These are Elusien's contributions to the open-source Shotcut Video Editor


Most of the technologies described here use Shotcut-MLT's WebVfx javascript framework. This is based on QtWebkit, a technology that has not been supported in Qt for some years. In the near future an upgrade of Shotcut-MLT to use a more up-to-date (supported) version of Qt will probably mean that WebVfx will have to be discontinued, at which point these technologies will no longer work. Apart from "Animation using OBS", which is a woekaround to compensate somewhat for the demise of WebVfx.
At present they supported up to and including Shotcut release 20.6.


Shotcut is a free and open-source cross-platform video editing application for FreeBSD, Linux, OS X and Windows. Started in 2011 by Dan Dennedy, it is developed on the MLT Multimedia Framework, in development since 2004 by the same author. WebVfx, GL-Transitions and Video-Credits are frameworks I have put together to simplify creating various effects. Click on their links above for instruction on using them.

Shotcut's Overlay HTML Filter

One of the filters provided in Shotcut is the Overlay HTML filter. Such a filter is simply an HTML webpage and its associated javascript and CSS code. What appears on the webpage overlays the video clip to which the filter is applied. Of special interest is that any part of the webpage that is transparent will also be transparent on the video rendering and the underlying clip will show through, which is particularly useful for video titles and credits. It can be used in two modes:


Although the Javascript interface to Shotcut's webvfx is not difficult it may be a bit daunting to users who have no, or rudimentary experience in Javascript. To make it more accessible to users I have created a framwork (also, confusingly I'm afraid called Elusien's WebVfx Framework) that hides the Javascript behind a more simple HTML inferface. This enables the user to create an animated webpage without needing to know any Javascript, develop this using a modern browser (preferably Google Chrome) with its various development tools, then use exactly the HTML and CSS code as an Overlay HTML filter in Shotcut. The webkit engine used by Shotcut to render the webpage is somewhat out of date. Dan is working on updating this in a future release of the product. This means that some of the newer HTML5 3D transforms are not available and those that are have to be prefixed in the CSS by the string '-webkit-' (e.g. transform: scale(0, 0) rotate(-180deg); becomes -webkit-transform: scale(0, 0) rotate(-180deg);).

CSS3 Animation

The webpage on this site provides a means of converting CSS3 animations into Javascript animations that uses this polyfill and provides a way of interfacing with Shotcut-MLT's WebVfx library to produce animations that are in sync with the generation of the video frames.

Video Credits

The webpage on this site provides a simple way of creating reasonable looking video credits. You tailor the credits to your liking, using various fonts, font-sizes, colours and styling, then you press a button to create an HTML file that you feed into Shotcut's Overlay HTML (Text: HTML) filter to generate the relevant clip for your movie - simple!


A transition is a technique used in video editing by which scenes or clips are combined. There is an open-source initiative at to provide GLSL shader programs to effect various different types of transition. GLSL is an OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline, which is usually a Graphics Processing Unit (GPU). These shader programs (or Fragment Shaders as they are termed) effectively operate on pixels that come from two sources (usually two clips) and create a target that is some mathematical operation involving these pixels.

WebGL is an implementation of OpenGL ES 2.0 for the Web and is supported by Shotcut's webkit engine. It is a JavaScript API providing tools to build rich interactive animations onto a <canvas> HTML element. Shotcut's development plan has within it enhancements to incorporate all of these shader programs into the transitions section of the product. But this is not so simple to do and is probably going to take a while to be released. Iterfacing these shader programs to Shotcut is not for the faint-hearted, so in the meantime, until they are in the product, I have created a system to hide the complexity from Shotcut users, by creating a simple Overlay HTML filter, like I do with my (Elusien's) WebVfx Framework. Unfortunately it is only possible for my system to get the pixels from one source, not two and consequently it cannot produce exactly the transitions shown on the gl-transitions website. However, by applying the Overlay HTML filter to a Shotcut transition, rather than to a clip, it is possible for some of them (e.g. 'swirl' and 'pixelise') to produce a good result and others (such as 'cube' and 'InvertedPageCurl') to produce a reasonable effect, while others (such as the 'BowTie' effects) produce no result at all.


My system makes it possible to input parameters to modify the various aspects of the transition. Be very careful to get the changes right. The filter uses the GPU, which is not very good at recovering from bad coding and it is possible to crash/hang Shotcut if bad values are entered for the parameters. Before applying one of these Overlay HTML filters it is a good idea to save your project, just in case.


Thanks to:


The Overlay HTML Filter lends itself well to producing reasonably professional-looking video credits, both scrolling and static. It can however be a bit daunting for users with little or no experience of HTML, CSS and Javascript. I have therefore put together a webpage that allows a user to easily specify the raw data for the credits as well as being able to tailor the way that these credits are manipulated. The output is an HTML page that can then be used in Shotcut as an Overlay HTML filter.

CSS3 Animation Overlay HTML Filters

CSS3 Animations do not "play" well with Shotcut, due to the lack of synchronisation between CSS and Shotcut's processing of frames. There is a new web technology proposed called Web Animations API and a javascript polyfill for this has been produced to enable it to be used in old browsers (such as the one Shotcut uses), see

Animation in OBS

Because WebVfx will disappear from Shotcut after version 20.06, this workaround has been developed to enable HTML/CSS3 animations to be applied to video clips.