WARNING

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.
At present they supported up to and including Shotcut release 20.4.

Elusien's Shotcut WebVfx Framework

THIS FRAMEWRORK IS NOT A REPLACEMENT FOR MLT-SHOTCUT's WebVfx JAVASCRIPT EXTENSION in fact it uses that extension to synchronise the animation with the frames generated by Shotcut.
YOU MUST SELECT THE OPTION use WebVfx javascript extension OR YOUR ANIMATIONS MAY NOT SYNCHRONISE PROPERLY, OR MAY NOT EVEN APPEAR AT ALL.

Downloads - click on the relevant Javascript symbol
VersionDateDownloadDescription
1.132020-04-20
Latest modification to remove debugging info and increase performance of Browser version by using Animation Frames instead of Timeouts.
1.122020-04-20
Latest modification to fix HTML entity (e.g. &) in TextFlow and Explosion.
1.112019-03-21
Latest modification to implement the new utility Video-Credits.
1.102019-03-10
Update to textflow. This is to accomodate changes for a new utility Video-Credits.
1.92019-02-06
Add a new feature: textflow. This enables a user to create text that flows onto the page in one of 11 different ways.
1.82018-06-29
Fix a slight juddering when a cursor is used. Basically change form hiding the cursor by making it zero width to hiding it by making its color transparent.
1.72018-06-26
Updated to include a new feature: typewriter. This enables the user to output text that is staggered temporally, as if it were being produced by a typewriter.
1.62018-06-24
Fix to hide the <pre></pre> that contains the .srt file cues.
1.52018-06-22
Updated to include a new feature: subtitles. This enables the user to supply subtitles in "SubRip" format and specify how they appear in the video
1.42018-05-08
Updated to include a new feature: data-center. This facilitates centering HTML elements horizontally, vertically or in both dimensions, within their parent element, or within the screen (if the parent fills the screen).
1.32018-05-07
Updated to include a new feature: Fragmentation
1.22018-05-04
Updated to include a new slideshow type: 'splitting'
1.12018-04-29
Updated to include new features: Slideshow and Explosion
1.02018-03-03
Original version

Introduction

Shotcut is a free and open-source cross-platform video editing application for FreeBSD, Linux, OS X and Windows. It is based on the MLT Multimedia Framework. One of the filters that is available in Shotcut is the "Overlay HTML" filter. This enables the user to overlay a clip with an HTML page. This HTML page can be a static one, or it can be animated e.g. using the latest animation features of CSS, or via javascript.

To allow fine control of the HTML animation the "Overlay HTML" filter has an option to allow the user to specify that the WebVfx javascript framework of MLT be used. This anables the user to specify a routine that is called for each and every frame in the clip. The routine that is supplied by the user has a single parameter (time) which is the "normalised time" for that clip. The first frame in the clip has time 0.0 and the last frame in the clip has time 1.0 (actually it is 1.0 minus the normalised timelength of a frame, it never fully reaches 1.0).

Developing a WebVfx overlay HTML filter using Shotcut alone is not easy, as most errors result in a blank screen, with no indication of what caused the error, or even what the actual error is. This is where the Shotcut WebVfx Framework that I have developed comes in useful. It enables the development to be done using a modern browser, such as Chrome, or Edge, that has a comprehensive set of development tools (accessible using function key F12). See the following webpages for more details: Google Chrome Dev Tools Microsoft Edge Dev Tools

Basically, using the framework the user can use the browser to test an HTML page that will eventually be used as an (WebVfx-enabled) animated Overlay HTML filter which will use WebVfx to have perfect synchronicity with the frames in the clip. Then, once the filter is complete it can be used without modification in Shotcut. The framework uses the javascript "setTimeout" function to emulate WebVfx, but this is hidden from the user. When you use the HTML Overlay Filter in Shotcut itself, do not forget to check the box to say it uses WebVfx, and confirm that you know what you are doing.

Tip: If you save the project to a '.mlt' file and later on reload that project you may find that the filters appear to be missing from the clips. Don't worry, just click on the olive-coloured TRACK HEADER on the timeline [the far left-hand side], then when you click back on the clip you'll find the filter is there after all.

Frames_to_Time Utility

When creating some animations it helps to know what "normalised time" corresponds to a certain frame in the clip. A webpage has been created to enable users to input the frames in the format "HH:MM:SS;FF" (where "FF" is the number of the frame). This "framestamp" can be observed between the timeline and the preview screen. It is particularly useful for example if you are creating a "subtitle" Overlay HTML filter, so you can synchronise the subtitles precisely with the video. This utlity can be found at Frames_to_Time.

Centering HTML Elements

Frequently it is important that HTML elements are centered on the screen, either horizontally, vertically or in both dimensions. This can be done easily by using the 'data-center' attribute on the element that needs to be centered. (NOTE the American spelling 'er', not the British spelling 're'). This attribute can take the value of:

e.g.


<body style="{height: 100vh; width: 100vw; padding: 0; margin: 0; overflow: hidden;}">
	<div data-center="v" class='webvfx' data-animate='{0%: {opacity: 1;}, 100%: {opacity: 0%;}}'>
		I am fading
	</div>
</body>
<script src='webvfx'></script>		


While this will center the DIV vertically, the text will not be centered horizontally. This is because the DIV extends across the whole of the screen left to right, but by default text-align="left". To center the text itself you need to put text-align="center" as an attribute to the DIV element. If the width of the DIV were 50vw (half the width of the screen) then it would normally occupy the left-half of the screen. Using data-center="vh" the DIV would be centred precisely in the center of the screen. Actually, the element is always centered within its parent, but in this case the parent <body>occupies the whole of the screen, hence the DIV is centered on the screen.

Disclaimer & License (CC BY-SA 4.0)

Version 1.x Copyright © 2018 - Elusien Entertainment (www.elusien.co.uk)

Creative Commons Licence This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

The following is a summary of the license. For the actual wording of the license see: https://creativecommons.org/licenses/by-sa/4.0/legalcode

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.

No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.

Notices

Features

Animation

For animations that consist of manipulating CSS properties of HTML elements, such as colour, opacity, position on the page, height, width etc., all this can be done without the user having to resort to using javascript. The framework is designed to enable this to be done using attributes on the elements' HTML tags. e.g. to fadeout a <div> element you could write:


<div class='webvfx' data-animate='{0%: {opacity: 1;}, 100%: {opacity: 0%;}}'>
	I am fading
</div>		

Which says that at the beginning of the animation (keyframe 0%) the opacity is set to 1 (fully opaque), while at the end of the animation (keyframe 100%) the opacity is 0 (fully transparent). Additional keyframes can be added in between to fine-tune the fading, e.g. 50%: {opacity: 0.8;} would cause it to have faded to 0.8 opacity by the time the clip was halfway through and it would then fade more quickly in the second half of the clip. Another way to fine-tune is to use an "easing" function which varies the strength of the effect as a function of time. The default easing function is "linearTween", which is linear, but there are 24 others (such as easeInSine and easeInOutBounce) to choose from.

Stopwatch

Sometimes it is useful to show the frame-numbers as the video clip progresses, or show the time. This "Stopwatch" facility is also a feature of the framework, again specified solely in the HTML e.g.


<div class='webvfx' data-stopwatch=''>
	Frame <span>0</span> => <span></span><span>00</span>:<span>00</span><span></span>
</div>

This will show a "stopwatch" that has the frame-number followed by the time as MM:SS. It is possible to display the hour and the number of milliseconds as well. It is also possible, by the use of keyframes, to pause the stopwatch and resume or reset it. Obviously the stopwatch elements can all be styled using CSS as usual, so the size, colour, background, borders, border-radiuses etc. can all be tailored to the user's requirements.
e.g. the following HTML and CSS code produce the "stopwatch" below:


<div class='stopwatch webvfx' data-stopwatch=''>
	<span>0</span> &#9654; <span></span><span>00</span> : <span>00</span> . <span>000</span>
<div>

.stopwatch>span	{
	display         : inline-block;
	font-family     : Iceland, monospaced;
	font-weight     : bold;
	text-align      : center;
	color           : #fff;
	background-color: #333;
	width           : 2em;
	height          : 2em;
	line-height     : 2em;
	margin          : 0.5em;
	border          : 1px;
	border-radius   : 50%;
}
000 : 00 . 000

User-Supplied Animation

The framework also enables the user to develop his/her own features in javascript, again without having to know the intricacies of MLT's WebVfx and without having to alter the script depending on whether it is being run in a browser or in Shotcut.

Slideshow

There is a slideshow facility, where the user can specify a set of images and parameters, such as the type of transition between slides. The main problem is that it takes time to load an image and the slideshow should only be started once all the images have been loaded. The framework checks to see that all images have been loaded, if some have yet to be loaded it will ask what to do. It has been tested with 100 slides and although the slideshow with this number of slides is a bit jerky in the browser, it is fine in the video that is exported by Shotcut. A large number of slides may cause prolems due to lack of memory. Example:


	<div id='slides' data-control='60:30' class='webvfx' data-slideshow='{
		duration: 33%, type: splitting, magnify: 25%
	}'>
		<img src='../mhcommittee.elusien.co.uk/images/home.jpg'>
		<img src='../mhcommittee.elusien.co.uk/images/home_1.jpg'>
		<img src='../mhcommittee.elusien.co.uk/images/Melamine-wood-002.png'>
		<img src='../mhcommittee.elusien.co.uk/images/Melamine-wood-003.png'>
		<img src='../mhcommittee.elusien.co.uk/images/home_2.jpg'>
		<img src='../mhcommittee.elusien.co.uk/images/home.jpg'>
	</div>		

Which says that each slide will show for 10 seconds (60 divided by the number of slides (6)), each slide will be split in two horizontally and these two splits will take 33% of this 10 seconds to slide into place from the sides of the slideshow and will then grow by 25% for the other 67% of the time.

Explosion

This causes text to explode into the individual characters without the user having to resort to using javascript. The framework is designed to enable this to be done using attributes on the elements' HTML tags. e.g. to explode text in a <div> element you could write:


<div class='webvfx' data-explosion='{10%: explode, 50%: wait, 60%: implode, 90%: wait}'>
	<h1>BOOM</h2>
	<p>Watch me explode</p>
</div>		

Which says that just after the beginning of the animation (keyframe 10%) the text will explode, the explosion will cease halfway into the animation (50%), and a little while after that (60%) the characters will implode and remain stable, on the screen for a short while (90%) before the end of the animation.

Fragment

This causes an HTML to fragment into several pieces and then these peices appear to fly into and out of the screen. e.g. to fragment a <div> element you could write:


<div class='webvfx' data-fragment='{10%: fragment, 50%: wait, 60%: defragment, 90%: wait}'>
	<h1>Split and Flyaway/h2>
	<img src='myphoto.jpg'>
</div>		

Which says that just after the beginning of the animation (keyframe 10%) the div will fragment, the fragmentation will cease halfway into the animation (50%), and a little while after that (60%) the div will defragment and remain stable, on the screen for a short while (90%) before the end of the animation.

Subtitle

This causes an subtitles (in "subrip" file format - see en.wikipedia.org/wiki/SubRip) to appear according to the timings given. e.g. to display the timings in a <div> element you would copy the data in the '.srt' file into a <pre></pre> element such as:


<div class='webvfx' data-subtitles='SRT_subtitles'>
<pre id='SRT_subtitles'>
1
00:00:10,000 --> 00:00:15,400
This is the 1st subtitle 10sec to 15.4sec
Mary had a little lamb,
its <i>fleece</i> was white as snow
and everywhere that Mary went
that <b>lamb</b> was sure to go!</b>

2
00:00:16,600 --> 00:00:25,800
This is the 2nd subtitle 16.6sec to 25.8sec

3
00:00:20,600 --> 00:00:23,800
This is the 3rd subtitle 20.6sec to 23.8sec

</pre>		

Please note that it is imperative that clip length and frame-rate are specified correctly (see below) for the video being subtitled as both of these values are needed to create the correct timings for showing and deleting the subtitles at the correct frames within the video.

Typewriter

This causes text to appear, but staggered temporally, as if produced on a typewriter.


<div class='webvfx' data-typewriter='{start: 0.1, end: 0.9, stx: 10, etx: 10}'>
	Mary had a little lamb,<br>
	its <i>fleece</i> was white as snow<br>
	and everywhere that Mary went<br>
	that <b>lamb</b> was sure to go!
</div>		

The idividual characters in the text get wrapped inside <span><\span> tags which have a CSS classname of '_typewriter_'. The user may style these tags. If the CSS specifies a border for these elements e.g. ._typewriter_ {border: solid #f00 3px;} then a curser will appear to preceed the individual characters as they are "typed".

Textflow

This causes text to flow or roll into place.


<div class='webvfx' data-textflow='{start: 0.1, end: 0.9, begin: hidden, finish: visible,
			ease: easeInOutSine, type: 5, 0%: flow, 100%: wait}'>
	Mary had a little lamb,<br>
	its <i>fleece</i> was white as snow<br>
	and everywhere that Mary went<br>
	that <b>lamb</b> was sure to go!
</div>		

The idividual characters in the text get wrapped inside <span><\span> tags which have a CSS classname of 'f_l_o_w'. The user may style these tags e.g. to specify a border for these elements e.g. .f_l_o_w {border: solid #f00 3px;}

Details

Clip Length and Frame-Rate

The length of the clip and the frame-rate are known by Shotcut, but not by the browser, so we need to tell the framework what these are so that when the animation runs in the browser it runs for the same amount of time and uses the same number of frames. This makes the run in the browser as similar as possible as that in the video file exported from Shotcut. I say the exported file rather than the Shotcut viewing area since viewing animations in real-time depends on the complexity of the animation and the underlying clip and the processing power of the computer on which Shotcut is running. Animations and videos may look juddery and choppy in the real-time viewing area, where frames may be dropped, while they are more than likely to be smooth in the final exported version.

To provide the browser/framework with the information you need to include a 'data-control' attribute on one of the HTML elements giving the clip-length in seconds (default: 8) and the frame-rate in fps (default: 30). It does not matter which HTML element has this attribute, it does not have to be an animated one e.g.


<body data-control='15:24'>		<!-- 15 seconds clip at 24 fps -->

Documentation

Animation

Animation on an HTML element is requested by giving it the classname 'webvfx' and the attribute 'data-animate', which supplies the parameters for the animation. The 'webvfx' classname says it is to be operated on by the framework. The 'data-animate' attribute says it is an animation and has the options shown below. The framework now allows two animations to be run on an element. To reques a second animation use a 'data-animate2' attribute. See the 'text' example later on.


<element class='webvfx' data-animate='{
		start : normalised start time of the animation (default = 0.0) e.g.
				0.0  starts at the very beginning of the clip
				0.5  starts halfway through the clip
				0.75 starts three-quarters the way into the clip
				
		end	  : normalised  end  time of the animation (default = 1.0) e.g.
				1.0   ends  at the very end of the clip
				0.5   ends  halfway through the clip
				0.75  ends  three-quarters the way into the clip
				
		ease  : the easing function to use, which can be "linearTween" (default) or one of the following strings:
				"easeInQuad"		t^2         acceleration from zero velocity
                "easeOutQuad"		t^2         deceleration  to  zero velocity
                "easeInOutQuad"		t^2         acceleration until halfway, then deceleration
                "easeInCubic"		t^3         acceleration from zero velocity
                "easeOutCubic"		t^3         deceleration  to  zero velocity
                "easeInOutCubic"	t^3         acceleration until halfway, then deceleration
                "easeInQuartic"		t^4         acceleration from zero velocity
                "easeOutQuartic"	t^4         deceleration  to  zero velocity
                "easeInOutQuartic"	t^4         acceleration until halfway, then deceleration
                "easeInQuintic"		t^5         acceleration from zero velocity
                "easeOutQuintic"	t^5         deceleration  to  zero velocity
                "easeInOutQuintic"	t^5         acceleration until halfway, then deceleration
				"easeInSine"		sinusoidal  acceleration from zero velocity
				"easeOutSine"		sinusoidal  deceleration  to  zero velocity
                "easeInOutSine"		sinusoidal  acceleration until halfway, then deceleration
				"easeInExpo"		exponential acceleration from zero velocity
                "easeOutExpo"		exponential deceleration  to  zero velocity
                "easeInOutExpo"		exponential acceleration until halfway, then deceleration
                "easeInCirc"		circular    acceleration from zero velocity
                "easeOutCirc"		circular    deceleration  to  zero velocity
                "easeInOutCirc"		circular    acceleration until halfway, then deceleration
                "easeInBounce"		elastic     bounce, then acceleration from zero velocity
                "easeOutBounce"		elastic     deceleration  to  zero velocity, then bounce
                "easeInOutBounce"	elastic     bounce, then acceleration until halfway, then deceleration, then bounce
				Please be aware that these strings are CASE-SENSITIVE e.g. "easeInBounce", NOT "easeinbounce".
				
		  0%  : The keyframe at the start of the animation (REQUIRED - NO DEFAULT)
		100%  : The keyframe at the  end  of the animation (REQUIRED - NO DEFAULT)
		        Other keyframes (like 50%, 75%, 83.67% are optional)
				The keyframe specifies the CSS property/properties at the time represented by the percentage
				in a form very similar to CSS animation keyframes. The main differences being:
					- Unlike CSS keyframes, these ones (in the framework) must be separated by a comma (,).
					- Hyphenated CSS properties (e.g. background-color) are NOT ALLOWED, they have to be
					  "camelCased" (e.g. backgroundColor), the way the javascript "style" properties are.
					- a CSS property cannot be used more than once in a keyframe e.g. webTranform below:
					  0% : {webTransform: rotateX(180deg); webTransform: rotateY(180deg);}
					- The percentage is separated from the properties by a colon (:).
					- You cannot use "from" and "to", you have to use "0%" and "100%" instead.
					- For each property in the 0% keyframe there must be a corresponding property in
					  all the other keyframes.
					- Colors cannot be specified by name (e.g. "red"), they have to be specified either:
					- by their "#" value e.g. #F00 or ff0000
					  or by their "rgb" value e.g. eg: rgb(255,0,0) [you cannot mix these either]
				Please note that Shotcut WebVfx has some deficiences.
				It does not recognise some of the newer CSS properties, such as:
					transformStyle: preserve-3d;
				Also, some properties have to be presented with the "webkit" prefix, e.g.:
					{transform : rotateY(180deg);}  does not work, use  (webkitTransform : rotateY(180deg);}
		}'></element>

e.g.


<div class='webvfx' data-animate='{
	start : 0.0 ,
	 end  : 1.0 ,
	ease  : "easeInOutBounce" ,
      0%  : {top:   0px; left:   0px; backgroundColor: #f00;}    ,
     25%  : {top:   0px; left: 200px; backgroundColor: #00f;}    ,
     50%  : {top: 200px; left: 200px; backgroundColor: #f8f800;} ,
     75%  : {top: 200px; left:   0px; backgroundColor: #0f0;}    ,
    100%  : {top:   0px; left:   0px; backgroundColor: #f00;}
}'>
	Bouncing Colour-Changing Div
</div>	 

For more on CSS keyframes see: W3schools Keyframes.

Stopwatch

This enables you to have 1 or more stopwatches in the HTML Overlay filter. It also enables the use of "keyframes" for fine control of the stopwatches.

A stopwatch consists of 4 elements specified using HTML '<span></span>' tags.


Normally you would initialise each of the <span> elements by placing a zero (0) in it.
Placing any other number will initialise it to that value.
Leaving the <span> empty will hide it (see examples).

A Stopwatch is requested by giving it the classname 'webvfx' and the attribute 'data-stopwatch', which supplies the parameters for the animation. The 'webvfx' classname says it is to be operated on by the framework. The 'data-stopwatch' attribute has the following options:


<element class='webvfx' data-stopwatch='{
		start : normalised start time of the animation (default = 0.0) e.g.
				0.0  starts at the very beginning of the clip
				0.5  starts halfway through the clip
				0.75 starts three-quarters the way into the clip
				
		end	  : normalised  end  time of the animation (default = 1.0) e.g.
				1.0   ends  at the very end of the clip
				0.5   ends  halfway through the clip
				0.75  ends  three-quarters the way into the clip
				
				Keyframes may be provided to pause/resume/reset the stopwatch at certain points in the clip e.g.:
		 20%  : {pause;}			The stopwatch will pause one-fifth into the clip
		 40%  : {resume;}			The stopwatch will resume and the times will start up where they left off;
		 50%  : {pause;}
		 60%  : {resume: skip;}		The stopwatch will resume and the times will skip to the value they would
									have shown had not the stopwatch been paused.
		 70%  : {pause;}
		 80%  : {resume: <nnn>;}	The stopwatch will resume and the times will be reset to the time represented
		                            by the number <nnn> in milliseconds e.g.:
										resume: 0     will resume the stopwatch times from the beginning,
										resume: 50000 will resume the stopwatch times from 50 seconds.
										
		None of these parameters needs to be specified, the element could just state  data-stopwatch = ""
		}'></element>

User Supplied

The javascript needs to be in the form of a function that will be called for each and every frame in the clip and takes 4 arguments:

  1. the normalised time of the frame
  2. a logical value representing whether or we are running in a browser (true), or actually running in the Shotcut editor (false)
  3. the frame-number
  4. the frame-rate (in fps)
The user then puts this (and any other functions they have similarly developed and want to include) in a certain GLOBAL scope javascript array called "webvfx_add_to_frame" thus:


function flash(time, browser, frame_number, frame_rate) {
	bulb               = document.getElementById("bulb");
	bulb.style.opacity = ((frame_number % 10) < 5) ? 0.1 : 1.0;
}
webvfx_add_to_frame = [flash]; // Ensure "flash" is called once for every frame of the clip.

Slideshow

This creates a slideshow of a set of images. There are various parameters that enable the type of slideshow and transition between slides to be specified (see below). PLEASE NOTE you can have only 1 slideshow on the HTML web-page.

The code checks that all images have been loaded. If some have not been loaded yet it asks you to confirm whether or not you wish to carry on. If you "CANCEL", indicating that you don't want to carry on, it aborts, otherwise it then asks you to confirm whether or not you want to wait for the missing images. If you "CONFIRM" it will check again if all the images have been loaded. However if you ask it to "carry on"CANCEL" it will carry on with the slideshow. If there are still images not loaded it will print a list of these images on the javascript console in the browser, or in the "Application Log" in Shotcut, that you can view to see which have not been loaded. It could be that you made a mistake with the filename(s).

PLEASE NOTE if images have been rotated by manipulating the EXIF X-Y data the slideshow will not show that slide in the correct orientation. This is very complicated to do in javascript and is likely to be a permanent deficiency. If you have such an image you can use photo manipulation software to rotate it to the correct orientation if necessary, then save the file using an option to NOT save the EXIF data.

A Slideshow is requested by giving it the classname 'webvfx' and the attribute 'data-slideshow', which supplies the parameters for the animation. The 'webvfx' classname says it is to be operated on by the framework. The 'data-slideshow' attribute has the following options:


<element class='webvfx' data-slideshow='{
		type	   : the type of slideshow, which can be:
					 sliding    - the slides slide in from the left, right, top or bottom; (DEFAULT)
					 shuffling  - the slides slide in then out from alternate directions (left then right, or top then bottom);
					 appearing  - the slides just appear, they do not slide;
					 expanding  - the slides start out at zero size then expand to fill the slideshow window;
					 stretching - the slides stretch out (horizontally or vertically);
					 splitting  - the slides will be split in 2 (horizontally or vertically) and slide into place.
								  (This "splitting" option can be quite CPU-intensive)
					 
		from 	   : the side from which the slides appear when sliding/shuffling/stretching/splitting, which can be:
					 top;
					 bottom;
					 left;
					 right. (DEFAULT)
					 
		duration   : the (percentage) duration of the transition. DEFAULT = 25%
		
		magnify    : the percentage by which the slide will grow once the end of
					 the trnsition has been reached. DEFAULT = 25%
					 
		blur	   : the amount of Gaussian blur (25 = 25 pixels radius) to apply to the image while transitioning.
		             Be aware that large values for "blur" (say > 50) take a lot of processing power. DEFAULT = 0
				
		ease  : the easing function to use, which can be "linearTween" (DEFAULT) or one of the following strings:
				"easeInQuad"		t^2         acceleration from zero velocity
                "easeOutQuad"		t^2         deceleration  to  zero velocity
                "easeInOutQuad"		t^2         acceleration until halfway, then deceleration
                "easeInCubic"		t^3         acceleration from zero velocity
                "easeOutCubic"		t^3         deceleration  to  zero velocity
                "easeInOutCubic"	t^3         acceleration until halfway, then deceleration
                "easeInQuartic"		t^4         acceleration from zero velocity
                "easeOutQuartic"	t^4         deceleration  to  zero velocity
                "easeInOutQuartic"	t^4         acceleration until halfway, then deceleration
                "easeInQuintic"		t^5         acceleration from zero velocity
                "easeOutQuintic"	t^5         deceleration  to  zero velocity
                "easeInOutQuintic"	t^5         acceleration until halfway, then deceleration
				"easeInSine"		sinusoidal  acceleration from zero velocity
				"easeOutSine"		sinusoidal  deceleration  to  zero velocity
                "easeInOutSine"		sinusoidal  acceleration until halfway, then deceleration  (DEFAULT)
				"easeInExpo"		exponential acceleration from zero velocity
                "easeOutExpo"		exponential deceleration  to  zero velocity
                "easeInOutExpo"		exponential acceleration until halfway, then deceleration
                "easeInCirc"		circular    acceleration from zero velocity
                "easeOutCirc"		circular    deceleration  to  zero velocity
                "easeInOutCirc"		circular    acceleration until halfway, then deceleration
                "easeInBounce"		elastic     bounce, then acceleration from zero velocity
                "easeOutBounce"		elastic     deceleration  to  zero velocity, then bounce
                "easeInOutBounce"	elastic     bounce, then acceleration until halfway, then deceleration, then bounce
				Please be aware that these strings are CASE-SENSITIVE e.g. "easeInBounce", NOT "easeinbounce".
										
		None of these parameters needs to be specified, the element could just state data-slideshow = ""
		}'></element>

Explosion

This takes some text, breaks it down into the individual characters then simulates an explosion by animating these characters, making them fly over, into and out of the screen. There are various parameters that enable the timing and type of explosion (outwards or inwards) to be specified (see below).

An explosion is requested by giving it the classname 'webvfx' and the attribute 'data-explosion', which supplies the parameters for the animation. The 'webvfx' classname says it is to be operated on by the framework. The 'data-explosion' attribute has the following options:


<element class='webvfx' data-explosion='{
		start : normalised start time of the animation (default = 0.0) e.g.
				0.0  starts at the very beginning of the clip
				0.5  starts halfway through the clip
				0.75 starts three-quarters the way into the clip
				
		end	  : normalised  end  time of the animation (default = 1.0) e.g.
				1.0   ends  at the very end of the clip
				0.5   ends  halfway through the clip
				0.75  ends  three-quarters the way into the clip
				
		ease  : the easing function to use, which can be "linearTween" or one of the following strings:
				"easeInQuad"		t^2         acceleration from zero velocity
                "easeOutQuad"		t^2         deceleration  to  zero velocity
                "easeInOutQuad"		t^2         acceleration until halfway, then deceleration
                "easeInCubic"		t^3         acceleration from zero velocity
                "easeOutCubic"		t^3         deceleration  to  zero velocity
                "easeInOutCubic"	t^3         acceleration until halfway, then deceleration
                "easeInQuartic"		t^4         acceleration from zero velocity
                "easeOutQuartic"	t^4         deceleration  to  zero velocity
                "easeInOutQuartic"	t^4         acceleration until halfway, then deceleration
                "easeInQuintic"		t^5         acceleration from zero velocity
                "easeOutQuintic"	t^5         deceleration  to  zero velocity
                "easeInOutQuintic"	t^5         acceleration until halfway, then deceleration
				"easeInSine"		sinusoidal  acceleration from zero velocity
				"easeOutSine"		sinusoidal  deceleration  to  zero velocity
                "easeInOutSine"		sinusoidal  acceleration until halfway, then deceleration  (DEFAULT)
				"easeInExpo"		exponential acceleration from zero velocity
                "easeOutExpo"		exponential deceleration  to  zero velocity
                "easeInOutExpo"		exponential acceleration until halfway, then deceleration
                "easeInCirc"		circular    acceleration from zero velocity
                "easeOutCirc"		circular    deceleration  to  zero velocity
                "easeInOutCirc"		circular    acceleration until halfway, then deceleration
                "easeInBounce"		elastic     bounce, then acceleration from zero velocity
                "easeOutBounce"		elastic     deceleration  to  zero velocity, then bounce
                "easeInOutBounce"	elastic     bounce, then acceleration until halfway, then deceleration, then bounce
				Please be aware that these strings are CASE-SENSITIVE e.g. "easeInBounce", NOT "easeinbounce".
				
		begin : hidden			when the clip begins the text will be hidden. Use this if you intend to
						`		implode the text and don't want the intact text to show before it implodes.
								Also, if you want to explode text but don't want the text to be visible
								before the start of the clip.
								(DEFAULT = visible)
				
		finish : hidden			at the start of the clip the text will be hidden. Use this if you intend to
						`		implode the text and don't want the intact text to show after it implodes.
								e.g. if this text should vanish so a different text can be animated.
								(DEFAULT = visible)
		
		target: text			The individual characters will explode/implode (DEFAULT)
				element(nw,nh)	The whole HTML element will be divided into individual cells "nw" columns wide
								and "nh" columns high (i.e. nw x nw cells) and these cells will be the parts
								that explode/implode across the screen.
								
				Keyframes may be provided to specify when parts should implode, explode or remain static e.g.:
		  5%  : implode			The text/parts will implode onto the screen starting 5% of the way into the clip
		 20%  : wait			The implosion will last until one-fifth the way into the clip
		 75%  : explode			The text/parts will be static until three-quarters into the clip, when it will
								then explode. (DEFAULT)
										
		None of these parameters needs to be specified, the element could just state  data-explosion = ""
		}'></element>

Fragment

This takes an HTML element (such as a div), slices it into (nh x nv) peices then either causes these peices to fly apart (fragment) or fly together (defragment). There are various parameters that enable the timing and type of fragmentation (outwards or inwards) to be specified (see below).
PLEASE NOTE The elemnt being fragmented must have the CSS property "position: absolute;".

A fragmentation is requested by giving it the classname 'webvfx' and the attribute 'data-fragment', which supplies the parameters for the animation. The 'webvfx' classname says it is to be operated on by the framework. The 'data-fragment' attribute has the following options:


<element class='webvfx' data-fragment='{
		start : normalised start time of the animation (default = 0.0) e.g.
				0.0  starts at the very beginning of the clip
				0.5  starts halfway through the clip
				0.75 starts three-quarters the way into the clip
				
		end	  : normalised  end  time of the animation (default = 1.0) e.g.
				1.0   ends  at the very end of the clip
				0.5   ends  halfway through the clip
				0.75  ends  three-quarters the way into the clip
				
		ease  : the easing function to use, which can be "linearTween" or one of the following strings:
				"easeInQuad"		t^2         acceleration from zero velocity
                "easeOutQuad"		t^2         deceleration  to  zero velocity
                "easeInOutQuad"		t^2         acceleration until halfway, then deceleration
                "easeInCubic"		t^3         acceleration from zero velocity
                "easeOutCubic"		t^3         deceleration  to  zero velocity
                "easeInOutCubic"	t^3         acceleration until halfway, then deceleration
                "easeInQuartic"		t^4         acceleration from zero velocity
                "easeOutQuartic"	t^4         deceleration  to  zero velocity
                "easeInOutQuartic"	t^4         acceleration until halfway, then deceleration
                "easeInQuintic"		t^5         acceleration from zero velocity
                "easeOutQuintic"	t^5         deceleration  to  zero velocity
                "easeInOutQuintic"	t^5         acceleration until halfway, then deceleration
				"easeInSine"		sinusoidal  acceleration from zero velocity
				"easeOutSine"		sinusoidal  deceleration  to  zero velocity
                "easeInOutSine"		sinusoidal  acceleration until halfway, then deceleration  (DEFAULT)
				"easeInExpo"		exponential acceleration from zero velocity
                "easeOutExpo"		exponential deceleration  to  zero velocity
                "easeInOutExpo"		exponential acceleration until halfway, then deceleration
                "easeInCirc"		circular    acceleration from zero velocity
                "easeOutCirc"		circular    deceleration  to  zero velocity
                "easeInOutCirc"		circular    acceleration until halfway, then deceleration
                "easeInBounce"		elastic     bounce, then acceleration from zero velocity
                "easeOutBounce"		elastic     deceleration  to  zero velocity, then bounce
                "easeInOutBounce"	elastic     bounce, then acceleration until halfway, then deceleration, then bounce
				Please be aware that these strings are CASE-SENSITIVE e.g. "easeInBounce", NOT "easeinbounce".
				
		begin : hidden			when the clip begins the HTML element will be hidden. Use this if you intend to
						`		defragment the element and don't want the intact element to show before it defragments.
								Also, if you want to fragment an element but don't want it to be visible
								before the start of the clip.
								(DEFAULT = visible)
				
		finish : hidden			at the start of the clip the HTML element will be hidden. Use this if you intend to
						`		defragment the text and don't want the intact element to show after it defragments.
								e.g. if this element should vanish so a different element can be animated.
								(DEFAULT = visible)
		
		nh	   : <rows>			The whole HTML element will be divided horizontally into "nh" rows;
		nv	   : <cols>			The whole HTML element will be divided horizontally into "nh" rows;
								(i.e. there will be nh x nv cells to be (de)fragmented.
								
				Keyframes may be provided to specify when parts should implode, explode or remain static e.g.:
		  5%  : defragment		The cells will defragment onto the screen starting 5% of the way into the clip
		 20%  : wait			The defragmentation will last until one-fifth the way into the clip
		 75%  : fragment		The element will be static until three-quarters into the clip, when it will
								then fragment. (DEFAULT)
										
		None of these parameters needs to be specified, the element could just state  data-explosion = ""
		}'></element>

Subtitles

This takes an HTML element (such as a div) and SRT subtitles specified within a <pre></pre> element and displays those subtitles in the correct time sequence in that div. Normally you would apply the subtitles to the video they refer to, either on the video track or on a second composite track, but if you edit the video track (e.g. delete a slice fromit) it will not edit the subtitles. all the subtitle cues will stay but they will have new timings and will not be synchronised to the edited video.

One way of getting round this is to create a blank video of just the subtitles, crop it to the correct size and save it, then import this video as the second track and make the same changes to this track as you do to the original video track.

Another way is to create new subtitle timings, either by using the "subrip" utitlity on the edited video, or by using a subtitle editor. For more information see: en.wikipedia.org/wiki/SubRip


<element class='webvfx' data-subtitle='
		pre-element-id	: The id of the '<pre></pre>' element that holds the subtitles cues (see example).
'></element>

Typewriter

This takes the characters in an HTML element (such as a div) and outputs those characters staggered temporally as if they were being printed on a typewrite. The text can contain HTML tags, such as <b></b> for bold or <i></i> for italics, or even more complicated tags.

The characters are wrapped in <span class='_typewriter_'></span> tags. If the user uses CSS to style these tags and creates a border e.g. ._typewriter_ {border: solid #f00 3px;} then a curser will appear to preceed the individual characters as they are "typed". The parameters stx (start of text) and etx (end of text) specify how long the curser appears before typing starts and after it ends (see the example below).


<element class='webvfx' data-typewriter='{
		start : normalised start time of the "typing" (default = 0.0) e.g.
				0.0  starts at the very beginning of the clip
				0.5  starts halfway through the clip
				0.75 starts three-quarters the way into the clip
				
		end	  : normalised  end  time of the "typing" (default = 1.0) e.g.
				1.0   ends  at the very end of the clip
				0.5   ends  halfway through the clip
				0.75  ends  three-quarters the way into the clip
				
		stx   : the amount of time (in characters) for the cursor to appear
				before "typing" starts (default = 0) e.g.
				0     the cursor does not appear before typing starts
				10    the curser appears for the space of time taken to output
				      10 characters before typing starts. Assuming of course
					  that the user has specified CSS of a border on class "_typewriter_".
				
		etx   : the amount of time (in characters) for the cursor to appear
				after "typing" ends (default = 0) e.g.
				0     the cursor does not appear after typing ends
				10    the curser appears for the space of time taken to output
				      10 characters after typing ends. Assuming of course
					  that the user has specified CSS of a border on class "_typewriter_".				
'></element>

Textflow

This takes some text, breaks it down into the individual characters then causes these characters to flow or roll onto the page. There are various parameters that enable the timing and type of flow to be specified (see below). The idea for this came from a codepen from Mamun Kahandaker for pure CSS text animation.

Textflow is requested by giving it the classname 'webvfx' and the attribute 'data-textflow', which supplies the parameters for the animation. The 'webvfx' classname says it is to be operated on by the framework. The 'data-textflow' attribute has the following options:


<element class='webvfx' data-textflow='{
		start : normalised start time of the animation (default = 0.0) e.g.
				0.0  starts at the very beginning of the clip
				0.5  starts halfway through the clip
				0.75 starts three-quarters the way into the clip
				
		end	  : normalised  end  time of the animation (default = 1.0) e.g.
				1.0   ends  at the very end of the clip
				0.5   ends  halfway through the clip
				0.75  ends  three-quarters the way into the clip
				
		ease  : the easing function to use, which can be "linearTween" or one of the following strings:
				"easeInQuad"		t^2         acceleration from zero velocity
                "easeOutQuad"		t^2         deceleration  to  zero velocity
                "easeInOutQuad"		t^2         acceleration until halfway, then deceleration
                "easeInCubic"		t^3         acceleration from zero velocity
                "easeOutCubic"		t^3         deceleration  to  zero velocity
                "easeInOutCubic"	t^3         acceleration until halfway, then deceleration
                "easeInQuartic"		t^4         acceleration from zero velocity
                "easeOutQuartic"	t^4         deceleration  to  zero velocity
                "easeInOutQuartic"	t^4         acceleration until halfway, then deceleration
                "easeInQuintic"		t^5         acceleration from zero velocity
                "easeOutQuintic"	t^5         deceleration  to  zero velocity
                "easeInOutQuintic"	t^5         acceleration until halfway, then deceleration
				"easeInSine"		sinusoidal  acceleration from zero velocity
				"easeOutSine"		sinusoidal  deceleration  to  zero velocity
                "easeInOutSine"		sinusoidal  acceleration until halfway, then deceleration  (DEFAULT)
				"easeInExpo"		exponential acceleration from zero velocity
                "easeOutExpo"		exponential deceleration  to  zero velocity
                "easeInOutExpo"		exponential acceleration until halfway, then deceleration
                "easeInCirc"		circular    acceleration from zero velocity
                "easeOutCirc"		circular    deceleration  to  zero velocity
                "easeInOutCirc"		circular    acceleration until halfway, then deceleration
                "easeInBounce"		elastic     bounce, then acceleration from zero velocity
                "easeOutBounce"		elastic     deceleration  to  zero velocity, then bounce
                "easeInOutBounce"	elastic     bounce, then acceleration until halfway, then deceleration, then bounce
				Please be aware that these strings are CASE-SENSITIVE e.g. "easeInBounce", NOT "easeinbounce".
				
		begin : hidden			when the clip begins the text will be hidden. Use this if you
						`						don't want the intact text to show before it flows.
												(DEFAULT = hidden)
				
		finish : hidden			at the end of the clip the text will be hidden. Use this if you 
						`		        don't want the intact text to show after it has flowed onto the page.
												(DEFAULT = visible)
		
		type:         			The type of the flow, which is a value from 0 to 11 inclusive.
												(DEFAULT = 0)
												
		Keyframes may be provided to specify when parts should implode, explode or remain static e.g.:
		  5%  : flow			The text starts to flow onto the screen starting 5% of the way into the clip
		 20%  : wait			The flow will last until one-fifth the way into the clip
		 75%  : flow			The text will be static until three-quarters into the clip, when it will
											repeat the flow.
										
		None of these parameters needs to be specified, the element could just state:
		data-textflow = ""
}'></element>

Overlay HTML Examples

All of these examples can be fairly easily tailored by modifying the CSS and if necessary the HTML. They are written to demonstrate the features of Elusien's WebVfx Framework and to show how quick and easy it is to use the framework to produce an overlay HTML filter that can be reasonably sophisticated.

Intro

This overlay produces the intro at the beginning of a movie/video. It demonstrates changes of opacity and color as well as rotation and expansion of text. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Audiowide|Iceland" rel="stylesheet">
<!-- WebVfx does not recognise Google web fonts in "<link>", so make sure you also have the font downloaded on your computer. -->
<title>Intro</title>
<style>
    html, body	{margin:0; padding:0; width: 100%; height: 100%; overflow: hidden;}
	table		{
/*				 width: 640px; height: 480px;	/*for a screen resolution of 640 x 480 */
				 width: 100% ; height: 100% ;
				 overflow        : 	hidden; border: solid 1px #ffffff;
				 background-color:	#222222;
				 background      :	repeating-linear-gradient(45deg, #303030 0%, #303030 10%, #202020 0%, #202020 50%) 0 / 15px 15px;
				}
	td			{text-align	: center; vertical-align: middle;}
	#elent		{
				 width		:	100%;
				 font-size	:	100px;
				 font-family:	'Iceland', cursive;
				 font-weight: 	bolder;
				 color		:	#228DFF;
				 text-shadow:	0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
				 opacity	:	0;
	}
	#presents	{
				 width			  :	100%;
				 font-size		  :	35px;
				 color			  :	#aaa;
				 font-family	  :	Helvetica, Arial, sans-serif;
				 -webkit-transform: scale(0, 0) rotate(-180deg);
				    -moz-transform: scale(0, 0) rotate(-180deg);
				         transform: scale(0, 0) rotate(-180deg);
	}
	#title		{
				 width		:	100%;
				 font-size	:	50px;
				 font-family:	'Audiowide', cursive;
				 color		:   #00f;
				 opacity	:	0;
*/				 text-shadow:	1px 1px 0 #aaaaaa;
	}
	
</style>
</head>
<body data-control='10:30'>
	
<!--
	================================================
	        A SHOTCUT Overlay HTML Filter
			-----------------------------
	The "presentation" title screen for home movies.
	================================================
-->

	<table><tr><td>
		<p	class='webvfx' id='elent'
			data-animate='{ease: "easeInSine",
							  0%: {opacity:  0.15;},
						    100%: {opacity:  1   ;}
						  }'
		 >
			Elusien Entertainment
		</p>
		<p class='webvfx' id='presents'
		    data-animate='{start: 0.3, end: 0.5, ease: "easeInOutCirc",
							  0%: {webkitTransform: scale(0  , 0  ) rotate(-180deg);},
						     50%: {webkitTransform: scale(0.5, 0.5) rotate( -90deg);},
						    100%: {webkitTransform: scale(1  , 1  ) rotate(   0deg);}
						  }'
		 >
			Presents
		</p>
		<p class='webvfx' id='title'
			data-animate='{start: 0.6, end: 1.0, ease: "linearTween",
							  0%: {color:  #0000ff; opacity:  0.15;},
							 50%: {color:  #ff9966; opacity:  1   ;},
							100%: {color:  #99ff99; opacity:  1   ;}
						  }'
		 >
			An intro produced using<br>
			Elusien's WebVfx framework for<br>
			<b><u>MLT-SHOTCUT</u></b>
		</p>
	</td></tr></table>
</body>
<script src="WebVfx.js"></script>
</html>

Scrolling Credits

This overlay produces the scrolling credits at the end of a movie/video. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<!-- WebVfx does not recognise Google web fonts in "<link>", so make sure you also have the font downloaded on your computer. -->
<title>Credits 1</title>
<style>
    html, body    {margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000;}
    #credits      {position: absolute; top: 100%; width: 100%; padding: 25px 0; margin:0; text-align: center;}
    	/****************************************/
    	/* You may change any styles below here */
    	/****************************************/
    #credits * {font: 25px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
  	            text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
	} /* Alter the color especially according to your background, as well as the font */
    #credits h1	     {font-size: 3em;}                                             /* Alter the size especially according to your requirement */
    #credits .legal	 {font-size: 0.9em; width: 50%; margin: auto; color: #ddd;}    /* Alter the color especially according to your background */
	/********************************************************/
             /* Change CSS below only if you know what you are doing */
	/********************************************************/
    #credits table, #credits tr {width: 100%; font-size: 1em;}
    #credits td:first-child	{width: 45%; padding: 8px 0.5%; font-size: 1.0em; text-align: right;}
    #credits td:last-child	{width: 45%; padding: 8px 0.5%; font-size: 2.0em; text-align: left;}
</style>

</head>
<body>
	<div id="credits" data-control="15:30"> <!-- Do not change the ID of this div, anything in it will appear on the scrolling credits -->
		<h1>THE TERMINATOR</h1>
        <h1>Cast</h1>
        <table>			
            <tr><td>The Terminator</td><td>Arnold Schwarzenegger</td></tr>
            <tr><td>Kyle Reese</td><td>Michael Biehn</td></tr>
            <tr><td>Sarah Connor</td><td>Linda Hamilton</td></tr>
        </table>
        <h1>Credits</h1>
        <table>			
            <tr><td>Director</td><td>James Cameron</td></tr>
            <tr><td>Writer</td><td>James Cameron</td></tr>
            <tr><td>Writer</td><td>Gayle Anne Hurd</td></tr>
        </table>
        <h1>Locations</h1>
        <p>Elephant Rocks, New Zealand</p>
        <p>The Cotswolds, UK</p>
        <p>New York, USA</p>
        <p class="legal">
            No animals were harmed during the making of this film.<br>
            &copy;2018 - Elusien Entertainment.
            Except where otherwise noted, content is licensed under a
            Creative Commons Attribution 4.0 International Licence.
        </p>
		<hr>
		<p>
			<!-- Now display the shotcut logo -->
			Produced using the free, open source, cross-platform video editor:<br><br>
		    <img alt="shotcut logo" src="data:image/png;base64,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"><br>
            https://shotcut.org
		</p>
    </div>
</body>
<script src="webvfx.js"></script>
<script>
	
	webvfx_add_to_frame = [scroll];	// Tells Elusien's WebVfx framework to run the "scroll" routine for each frame.

	SC = {					// SC (Scrolling Cedits) has to be of GLOBAL scope
		credits       : {},
		style		  : {},
		initial_top   : 0,   
		total_height  : 0  
	};
	
	function scroll(time, browser, frame_number, frame_rate) {		
		if (time === 0.0) {
			SC.credits       = document.getElementById('credits');
			SC.style         = SC.credits.style;
			SC.initial_top   = SC.credits.offsetTop;       
			SC.total_height  = SC.credits.offsetHeight + SC.initial_top;
		} else {
			SC.style.top     = (SC.initial_top - SC.total_height * time) + "px"; // Scrolls up an increment
		}
	}
</script>
</html>

Logo

This overlay produces an animation involving the Shotcut logo. It has to use a small amount of user-supplied javascript to work around the fact that MLT-Shotcut does not recognise the "backface-visibility" CSS property. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<html lang="en">
<head>
<meta charset="utf-8">
<title>Logo</title>
<style>
    html, body {margin:0; padding:0; width: 100%; height: 100%; background-color: #000; overflow: hidden;}
    #flip-container, #flipper, #front, #back {width: 75%; height: 100%; margin: auto;}
    #flipper {
		position          : relative;
		transform-style   : preserve-3d;	/* ignored by MLT-Shotcut */		
	} 
    #front, #back {
       	color           : #ddd;
    	background-color: transparent;
    	font            : 77px Liberation Sans, Arial, sans-serif;
		text-shadow     : -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    	text-align      : center;
    	vertical-align  : middle;
    	width           : 100%;
    	height          : 100%;
    	position        : absolute;
    	top             : 0px;
    	left            : 0px;
    }
	#l1 {color: violet;}
	#l2 {color: indigo;}
	#l3 {color: blue;}
	#l4 {color: green;}
	#l5 {color: yellow;}
	#l6 {color: orange;}
	#l7 {color: red;}
    #front	{
					        transform  : rotateX(  0deg) rotateY(  0deg);		/* ignored by MLT-Shotcut */
					-webkit-transform  : rotateX(  0deg) rotateY(  0deg);		/* fix using -webkit- prefix */
					backface-visibility: hidden;			/* ignored by MLT-Shotcut - fix by javascript */
			-webkit-backface-visibility: hidden;			/* also ignored by MLT-Shotcut - fix by javascript */
    }
    #back	{
							transform  : rotateX(180deg) rotateY(180deg);	/* ignored by MLT-Shotcut */
					-webkit-transform  : rotateX(180deg) rotateY(180deg);	/* fix using -webkit- prefix */
					backface-visibility: hidden;			/* ignored by MLT-Shotcut - fix by javascript */
			-webkit-backface-visibility: hidden;			/* also ignored by MLT-Shotcut - fix by javascript */
    }
</style>
<script src='./webvfx.js'></script>
<script>
	function fix_backface_visibility(time, browser, framen_number, frame_rate) {
/*
	To work around the fact that MLT-Shotcut does not recognize the "backface-visibility" CSS property.
	We make the back hidden for the first half of the filter.
	Then for the second half we make the back visible and the front hidden.
	The variables 'front_style' and 'back_style' have to be GLOBAL in scope.
*/
		if (time === 0.0) {
			front_style            = document.getElementById('front').style;
			back_style             = document.getElementById('back' ).style;
			front_style.visibility = 'visible';
			back_style.visibility  = 'hidden';
		} else if (time > 0.5){
			front_style.visibility = 'hidden';
			back_style.visibility  = 'visible';	
		}
	}
	webvfx_add_to_frame = [fix_backface_visibility];
</script>

</head>
<body>
<div id="flip-container">
	<div id='flipper' class='webvfx' data-animate='{
		ease : "easeInOutBounce" ,
		  0% : {webkitTransform: rotateX(  0deg) rotateY(  0deg);} ,
		100% : {webkitTransform: rotateX(180deg) rotateY(180deg);}
	}'>
		<!-- Use tables as other constructs give problems with WebVfx -->
		
		<table id='front'>
			<tr><td>
			    <span id="l1">S</span><span id="l2">H</span><span id="l3">O</span><span id="l4">T</span><span id="l5">C</span><span id="l6">U</span><span id="l7">T</span>
			</td></tr>
		</table>
		<table id='back'>
			<!--the img below is the base64 encoded Shotcut logo -->
		    <tr><td><img alt="shotcut logo"
			    src="data:image/png;base64,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">
			</td></tr>
		</table>
	</div>
</div>
</body>
</html>

Credits 2

This overlay produces another set of credits, but instead of scrolling they zoom in from one side of the screen and zoom out of the other, with skewing to add to the realism. All this is done without any user-supplied javascript. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<!-- WebVfx does not recognise Google web fonts in "<link>", so make sure you also have the font downloaded on your computer. -->
<title>Credits 2</title>
<style>
    html, body	{margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000;}
    section		{font: 25px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
				 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
				 position: absolute; top:0; left: 0; width: 100%; height:100%;
	} 
	table		{width: 100%; position: absolute; left: 100%; top:50%;
				         transform: perspective(1px) translateY(-50%); /* perspective stops blurring of text */
				 -webkit-transform: perspective(1px) translateY(-50%);
				}
    th	    	{font-size: 3em;} 
    td			{font-size: 0.9em; width: 50%; margin: auto; color: #ddd;}
	tr			{width: 100%; font-size: 1em;}
    td:last-child	{width: 45%; padding: 8px 0.5%; font-size: 2.0em; text-align: left;}
    td:first-child	{width: 45%; padding: 8px 0.5%; font-size: 1.0em; text-align: center;}
	#cast td:first-child, #credits td:first-child{text-align: right;}
</style>

</head>
<body data-control="30:30">
	<section id='title' class='webvfx'  data-animate='{start: 0.0, end: 0.125,
		ease : "easeOutBounce" ,
		  0% : {webkitTransform: translateX(-200%) skewX( 60deg);} ,
		 80% : {webkitTransform: translateX(-100%) skewX(  0deg);} ,
		100% : {webkitTransform: translateX(   0%) skewX( 60deg);}
	}'>
        <table>			
			<tr><th>THE TERMINATOR</th></tr>
		</table>
	</section>
	<section id='cast' class='webvfx'  data-animate='{start: 0.1, end: 0.35,
		ease : "easeOutBounce" ,
		  0% : {webkitTransform: translateX(   0%) skewX(-50deg);} ,
		 80% : {webkitTransform: translateX(-100%) skewX(  0deg);} ,
		100% : {webkitTransform: translateX(-200%) skewX(-50deg);}
	}'>
        <table>			
			<tr><th colspan='2'>Cast</th></tr>
            <tr><td>The Terminator</td><td>Arnold Schwarzenegger</td></tr>
            <tr><td>Kyle Reese</td><td>Michael Biehn</td></tr>
            <tr><td>Sarah Connor</td><td>Linda Hamilton</td></tr>
        </table>
	</section>
	<section id='credits' class='webvfx' data-animate='{start: 0.3, end: 0.6,
		ease : "easeOutBounce" ,
		  0% : {webkitTransform: translateX(   0%) skewX(-50deg);} ,
		 80% : {webkitTransform: translateX(-100%) skewX(  0deg);} ,
		100% : {webkitTransform: translateX(-200%) skewX(-50deg);}
	}'>
        <table>			
			<tr><th colspan='2'>Credits</th></tr>
            <tr><td>Director</td><td>James Cameron</td></tr>
            <tr><td>Writer</td><td>James Cameron</td></tr>
            <tr><td>Writer</td><td>Gayle Anne Hurd</td></tr>
        </table>
	</section>
	<section id='locations' class='webvfx' data-animate='{start: 0.55, end: 0.7,
		ease : "easeOutBounce" ,
		  0% : {webkitTransform: translateX(   0%) skewX(-50deg);} ,
		 80% : {webkitTransform: translateX(-100%) skewX(  0deg);} ,
		100% : {webkitTransform: translateX(-200%) skewX(-50deg);}
	}'>
		<table>
			<tr><th>Locations</th></tr>
        	<tr><td>Elephant Rocks, New Zealand</td></tr>
        	<tr><td>The Cotswolds, UK</td></tr>
			<tr><td>New York, USA</td></tr>
		</table>
	</section>
	<section id='legal' class='webvfx' data-animate='{start: 0.7, end: 0.8,
		ease : "easeOutBounce" ,
		  0% : {webkitTransform: translateX(   0%) skewX(-50deg);} ,
		 80% : {webkitTransform: translateX(-100%) skewX(  0deg);} ,
		100% : {webkitTransform: translateX(-200%) skewX(-50deg);}
	}'>
 		<table>
			<tr><th>Legal</th></tr>
			<tr><td>No animals were harmed during the making of this film.</td></tr>
            <tr><td>&copy;2018 - Elusien Entertainment.<br>
					Except where otherwise noted, content is licensed under a
					Creative Commons Attribution 4.0 International Licence.</td></tr>
		</table>
	</section>
	<section id='shotcut' class='webvfx' data-animate='{start: 0.8, end: 1.0,
		ease : "easeOutBounce" ,
		  0% : {webkitTransform: translateX(-200%) skewX( 50deg);} ,
		 80% : {webkitTransform: translateX(-100%) skewX(  0deg);} ,
		100% : {webkitTransform: translateX(   0%) skewX( 50deg);}
	}'>
 		<table><tr><td>			
			<!-- Now display the shotcut logo -->
			Produced using the free, open source, cross-platform video editor:<br><br>
		    <img alt="shotcut logo" src="data:image/png;base64,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"><br>
            https://shotcut.org
		</td></tr></table>
	</section>
</body>
<script src="webvfx.js"></script>
</html>

Stopwatch

This overlay is a bit of a mish-mash. It contains a wandering <div></div> element that morphs from a square to a circle and vice versa. It also contains several stopwatches of various precision, with different initialisation values, one of which pauses and resumes. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Audiowide|Iceland" rel="stylesheet">
<!-- WebVfx does not recognise Google web fonts in "<link>", so make sure you also have the font downloaded on your computer. -->
<title>Stopwatch</title>
<style>
	body {margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000;}
	body * {
		color:#fff;	font-family: 'Iceland', monospace; font-size: 30px;
	}
	#wanderer {
	    width: 150px; height: 150px;
	    background-color: #f00;
	    position: relative;
		z-index: -1;
		display: table-cell; 
		vertical-align: middle;
	}
	#wanderer>p	{text-align: center;}
/*		position: absolute; left: 50%; top:50%; font-size: 0.8em; text-align: center;
				         transform: perspective(1px) translate(-50%, -50%);
				 -webkit-transform: perspective(1px) translate(-50%, -50%);
	}*/
	[data-stopwatch]>span {
		display: inline-block;
		border: solid 1px #f00;
		padding: 2px; margin: 2px 0;
	}
	#middle {
		position: absolute;
		top:      50%; left:     50%;
				transform: perspective(1px) translate(-50%, -50%);
		-webkit-transform: perspective(1px) translate(-50%, -50%);
	}
</style>
</head>

<body data-control='20:30'>
	<div id='wanderer' class='webvfx'
		 data-animate='{start: 0.1, end: 1.0, ease: "easeInOutBounce",
					       0%: {backgroundColor: #f00; left:  0px; top:  0px; borderRadius:  0%;},
					      25%: {backgroundColor: #00f; left:100px; top:  0px; borderRadius: 50%;},
						  50%: {backgroundColor: #0f0; left:200px; top:200px; borderRadius:  0%;},
						  75%: {backgroundColor: #f0f; left:  0px; top:200px; borderRadius: 50%;},
						 100%: {backgroundColor: #ff0; left:100px; top:  0px; borderRadius:  0%;}
					   }'>
		<p>WANDERER</p>
	</div>
	
	<div class='webvfx'
		 data-stopwatch='{start: 0.2, end: 0.8,
							10%: {pause;},
							20%: {resume;},
							40%: {pause;},
							60%: {resume: skip;},
							80%: {pause;},
							90%: {resume: 100000;}
						 }'>
		Frame <span>0</span> => </span><span>00</span>h <span>00</span>m <span>00</span>s <span>000</span>ms
	</div>
	
	<div class='webvfx' data-stopwatch=''>
	   <span>0</span> => <span></span><span>00</span>:<span>00</span>.<span>000</span>
	</div>
	
	<div id='middle' class="webvfx" data-stopwatch=''>						
	   <span>9000</span> => <span></span><span>08</span>:<span>10</span><span></span>
	</div>
	
	<p>	Assuming a framerate of 30fps. </p>
</body>

<script src="WebVfx.js"></script>
</html>

Gauge

This overlay is a simulation of a radiation gauge with some LEDs thrown in for good measure. It uses the excellent canvas gauge framework of Mykhailo Stadnyk. (see canvas-gauges.com)

We actually do different things depending on whether we are running in a browser or in Shotcut. Updating the canvas takes quite a bit of CPU time and the Canvas Gauge library does this for various points between the current position of the needle and the new one. If we are in the browser it can take longer than the setTimeout value, so we only update the gauge value every 50 frames or so (more frequently than that can cause problems). The browser will still show smooth motion of the needle between values since the gauge library interpolates values in between. If we are in Shotcut it is a different matter. We will only see the end value of the needle, not the interpolations in-between. But CPU time isn't a problem as we have lots to spare when rendering, so we can update the gauge value for every frame if we want to get smooth motion of the needle (hence the "if" test at the beginning of the code). I may look into modifying the Canvas Gauge library itself to introduce into the Shotcut filter the same smooth needle movement that is seen in the browser.

To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Audiowide|Iceland" rel="stylesheet">
<!-- WebVfx does not recognise Google web fonts in "<link>", so make sure you also have the font downloaded on your computer. -->
<title>Gauge</title>
<style>
/* LEDs */
.led_box	{height: 30px; width: 75px; margin: 10px 0; float: left;}
.led		{margin: 0 auto; width: 24px; height: 24px; background-color: #F00; border-radius: 50%;}
#led_red.led_red_on			{background-color: #F00;    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;}
#led_yellow.led_yellow_on	{background-color: #FF0;    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0                 0 2px 12px;}
#led_blue.led_blue_on		{background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006    0 -1px 9px, #3F8CFF              0 2px 14px;}	
#led_green.led_green_on		{background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00              0 2px 12px;}

#led_red 					{background-color: #800;    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
#led_yellow 				{background-color: #880;    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0                 0 2px 0;}
#led_blue					{background-color: #007088; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006    0 -1px 9px, #3F8CFF              0 2px 0;}	
#led_green					{background-color: #378800; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00              0 2px 0;}
</style>
<body data-control="20:30">
	<h2>https://canvas-gauges.com/</h1>
	<canvas id="gauge"></canvas>
	<div>
		<div class="led_box"><div id="led_green"  class="led led_green_on"	></div></div>
		<div class="led_box"><div id="led_blue"   class="led"  				></div></div>
		<div class="led_box"><div id="led_yellow" class="led"				></div></div>
		<div class="led_box"><div id="led_red"    class="led"				></div></div>
	</div>
</body>

<script>
/*
	The "repeat" String method is used in the Gauge javascript. However, it was
	only defined in the ECMA-262 6th Edition (June 2015) specification. The
	version of ECMAScript used by MLT-Shotcut does not have this method, so we
	create one.
*/
	if (typeof String.prototype.repeat == 'undefined') {
		String.prototype.repeat = function(n){
			var x = this;
			return Array(n+1).join(x);
		};
	}
//	alert("+".repeat(4));
</script>

<!-- <script src="http://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.4/all/gauge.min.js"></script> NOT WITH MLT-SHOTCUT -->
<script src="gauge.min.js"></script>
<script src="WebVfx.js"></script>
<script>

//	Create the gauge on the canvas

		old_colour = "green";
		leds = {
			green  : document.getElementById("led_green" ).classList ,
			blue   : document.getElementById("led_blue"  ).classList ,
			yellow : document.getElementById("led_yellow").classList ,
			red    : document.getElementById("led_red"   ).classList 
		};
		gauge = new RadialGauge({
			renderTo         : 'gauge',
			width            : 300,
			height           : 300,
			units            : "Radiation (Bq)",
			value            : 0,
			minValue         : 0,
			startAngle       : 90,
			ticksAngle       : 180,
			valueBox         : true,
			valueInt         : 2,
			valueDec         : 1,
			maxValue         : 100,
			majorTicks       : ["0", "20", "40", "60", "80", "100"],
			minorTicks       : 2,
			strokeTicks      : true,
			highlights       : [
				{"from":  0, "to":  15, "color": "rgba(100, 255, 100, .20)"},
				{"from": 15, "to":  60, "color": "rgba(100, 100, 255, .20)"},
				{"from": 60, "to":  80, "color": "rgba(220, 200,   0, .75)"},
				{"from": 80, "to": 100, "color": "rgba(200,  50,  50, .75)"}
			],
			colorPlate       : "#ddd",
			borderShadowWidth: 3,
			borders          : false,
			needleType       : "arrow",
			needleWidth      : 5,
			needleCircleSize : 2,
			needleCircleOuter: true,
			needleCircleInner: false,
			animationDuration: 1500,
			animationRule    : "linear"
		}).draw();

//	Create the animation function called by Elusien's WebVfx Framework

function animate_gauge(time, browser, frame_number, frame_rate){
// Update every 50th frame in the browser and every frame in Shotcut.
	if (!browser || ((frame_number % 50) === 0)){
		var value  = (Math.abs(Math.sin(time*Math.PI*2.3)) * 99).toFixed(1);
		gauge.value = value;	// update the canvas (needle and value)

//	Now decide which LEDs to update.

		var colour  = "red";
		if (value < 80) { colour = "yellow";}
		if (value < 60) { colour = "blue"  ;}
		if (value < 15) { colour = "green" ;}
		if (colour == old_colour) {return;}
		leds[old_colour].remove("led_" + old_colour + "_on");
		old_colour = colour;
		leds[old_colour].add   ("led_" + old_colour + "_on");
  
// Update the declarative chart...
//		document.getElementById("gauge").setAttribute("data-value", value);		
	}
}

	webvfx_add_to_frame = [animate_gauge];	// Tell the framework to call the animation function.

</script>
</html>

Text

This overlay is based on an example CSS animation provided by "Jonray". The CSS version can be seen here (https://codepen.io/jonray1/pen/QQoNWg). There is a slight modification in the text-shadow to workaround what appears to be an MLT/Shotcut bug. Basically, text-shadows work in all situation but one: when the shadow is offset and the blur is non zero. I have left the original CSS keyframes in the HTML for comparison, but have obviously not called CSS animation. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<html lang="en">
<head>
<meta charset="utf-8">
<title>Bounville</title>
<style>
body {
background-color: powderblue;
}
div {overflow: visible; font-family: arial; opacity: 0; position: absolute;
/*				 text-shadow: 0 0 12px #222; */
				 text-shadow:	0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
	}
		
		#letter01 {
		font-size:200px;
		color:blue;
/*		animation: fadeindrop01 1.5s ease forwards 1s,
		moveright01 2s ease forwards 2.6s ;*/
		}
		
		
		@keyframes fadeindrop01 {
0%   { opacity:0; left:370px; top:-100px;}
100% {opacity:1; left:370px; top:210px; }
}

		@keyframes moveright01 {
0%   {left:370px; top:210px;}
100% {left:410px; top:210px; }
		}

#letter02 {
		font-size:150px;
		color:green;
/*		animation: fadeinup02 1s ease forwards 1.1s,
		moveright02 1s ease forwards 2.2s ; */
		}
		
		@keyframes fadeinup02 {
0%   {opacity:0; left:580px; top:500px;}
100% {opacity:1; left:580px; top:250px;}
}

		@keyframes moveright02 {
0%   {left:580px; top:250px;}
100% {left:540px; top:250px;}
}

#letter03 {
		font-size:150px;
		color:orange;
/*		animation: fadeindown03 1s ease forwards 1.3s,
		moveright03 1s ease forwards 2.4s ; */
		}
		
		@keyframes fadeindown03 {
0%   {opacity:0; left:700px; top:50px;}
100% {opacity:1; left:700px; top:250px;}
}

		@keyframes moveright03 {
0%   {left:700px; top:250px;}
100% {left:620px; top:250px;}
}

#letter04 {
		font-size:150px;
		color:grey;
/*		animation: fadeindown04 1.3s ease forwards 2.6s,
		moveright04 1.6s ease forwards 4s ; */
		}
		
		@keyframes fadeindown04 {
0%   {opacity:0; left:680px; top:230px;}
100% {opacity:1; left:700px; top:250px;}
}

		@keyframes moveright04 {
0%   {left:700px; top:250px;}
100% {left:700px; top:250px;}
}

#letter05 {
		font-size:150px;
		color:red;
		z-index: 2;
/*		animation: fadeindown05 2s ease forwards 2.8s,
		moveright05 1.5s ease forwards 4.9s ; */
		}
		
		@keyframes fadeindown05 {
0%   {opacity:0; left:750px; top:300px;}
100% {opacity:1; left:750px; top:250px;}
}

		@keyframes moveright05 {
0%   {left:750px; top:250px;}
100% {left:750px; top:250px;}
}

#letter06 {
		font-size:400px;
		color:#b3b3ff;
		z-index:1;
/*		animation: fadeindown06 1s ease forwards 3.5s; */
		
		}
		
		@keyframes fadeindown06 {
0%   {opacity:0; left:770px; top:60px;}
100% {opacity:1; left:770px; top:80px;}
}

#letter07 {
		font-size:150px;
		color:blue;
		z-index:2;
/*		animation: fadeindown07 2s ease forwards 4s,
		moveright07 1s ease forwards 8s ; */
		}
		
		@keyframes fadeindown07 {
0%   {opacity:0; left:900px; top:250px;}
100% {opacity:1; left:900px; top:250px;}
}

		@keyframes moveright07 {
0%   {left:900px; top:250px;}
100% {left:900px; top:250px;}
}

#letter08 {
		font-size:150px;
		color:green;
		z-index:2;
/*		animation: fadeindown08 2s ease forwards 4.2s,
		moveright08 1s ease forwards 8s ; */
		}
		
		@keyframes fadeindown08 {
0%   {opacity:0; left:930px; top:250px;}
100% {opacity:1; left:930px; top:250px;}
}

		@keyframes moveright08 {
0%   {left:930px; top:250px;}
100% {left:930px; top:250px;}
}


#letter09 {
		font-size:150px;
		color:grey;
		z-index:2;
/*		animation: fadeindown09 2s ease forwards 4.4s;
		moveright09 1s ease forwards 8s ;*/
		}
		
		@keyframes fadeindown09 {
0%   {opacity:0; left:960px; top:250px;}
100% {opacity:1; left:960px; top:250px;}
}

		@keyframes moveright09 {
0%   {left:960px; top:250px;}
100% {left:960px; top:250px;}
}

#letter10 {
		font-size:150px;
		color:red;
		z-index:2;
/*		animation: fadeindown10 2s ease forwards 4.6s; */
}
		
		@keyframes fadeindown10 {
0%   {opacity:0; left:990px; top:250px;}
100% {opacity:1; left:990px; top:250px;}
}

#line01 {
        width:390px;
		height:4px;
		background-color: grey;
		top:410px;
		left:430px;
/*		animation: justfade01 2s ease forwards 5s; */
}
		
		@keyframes justfade01 {
0%   {opacity:0; }
100% {opacity:1;}
}

#line02 {
		width:130px;
		height:4px;
		background-color: grey;
		top:410px;
		left:920px;
/*		animation: justfade02 2s ease forwards 5.1s; */
}

		@keyframes fadeindrop01 {
0%   { opacity:0; left:370px; top:-100px;}
100% {opacity:1; left:370px; top:210px; }
}

		@keyframes moveright01 {
0%   {left:370px; top:210px;}
100% {left:410px; top:210px; }


</style>
</head>
<body>
<div id="letter01" class='webvfx' data-animate='{start: 0.1, end: 0.25, ease: "easeInOutBounce",
	  0% : {opacity:0; left:370px; top:-100px;},
	100% : {opacity:1; left:370px; top:210px;}
}'
		data-animate2='{start: 0.26, end: 0.46, ease: "easeInOutBounce",
	  0% : {left:370px; top:210px;},
	100% : {left:410px; top:210px;}
}'>B</div>
<div id="letter02" class='webvfx' data-animate='{start: 0.11, end: 0.21, ease: "easeInOutBounce",
	  0% : {opacity:0; left:580px; top:500px;},
	100% : {opacity:1; left:580px; top:250px;}
}'
		data-animate2='{start: 0.22, end: 0.32, ease: "easeInOutBounce",
	  0% : {left:580px; top:250px;},
	100% : {left:540px; top:250px;}
}'>o</div>
<div id="letter03" class='webvfx' data-animate='{start: 0.13, end: 0.23, ease: "easeInOutBounce",
	  0% : {opacity:0; left:700px; top:50px;},
	100% : {opacity:1; left:700px; top:250px;}
}'
		data-animate2='{start: 0.24, end: 0.34, ease: "easeInOutBounce",
	  0% : {left:700px; top:250px;},
	100% : {left:620px; top:250px;}
}'>u</div>
<div id="letter04" class='webvfx' data-animate='{start: 0.26, end: 0.39, ease: "easeInOutBounce",
	  0% : {opacity:0; left:680px; top:230px;},
	100% : {opacity:1; left:700px; top:250px;}
}'
		data-animate2='{start: 0.4, end: 0.56, ease: "easeInOutBounce",
	  0% : {left:700px; top:250px;},
	100% : {left:700px; top:250px;}
}'>r</div>
<div id="letter05" class='webvfx' data-animate='{start: 0.28, end: 0.48, ease: "easeInOutBounce",
	  0% : {opacity:0; left:750px; top:300px;},
	100% : {opacity:1; left:750px; top:250px;}
}'
		data-animate2='{start: 0.49, end: 0.64, ease: "easeInOutBounce",
	  0% : {left:750px; top:250px;},
	100% : {left:750px; top:250px;}
}'>n</div>
<div id="letter06" class='webvfx' data-animate='{start: 0.25, end: 0.45, ease: "easeInOutBounce",
	  0% : {opacity:0; left:770px; top:60px;},
	100% : {opacity:1; left:770px; top:80px;}
}'>v</div>
<div id="letter07" class='webvfx' data-animate='{start: 0.4, end: 0.6, ease: "easeInOutBounce",
	  0% : {opacity:0; left:900px; top:250px;},
	100% : {opacity:1; left:900px; top:250px;}
}'
		data-animate2='{start: 0.1, end: 0.9, ease: "easeInOutBounce",
	  0% : {left:900px; top:250px;},
	100% : {left:900px; top:250px;}
}'>i</div>
<div id="letter08" class='webvfx' data-animate='{start: 0.46, end: 0.66, ease: "easeInOutBounce",
	  0% : {opacity:0; left:930px; top:250px;},
	100% : {opacity:1; left:930px; top:250px;}
}'
		data-animate2='{start: 0.1, end: 0.9, ease: "easeInOutBounce",
	  0% : {left:930px; top:250px;},
	100% : {left:930px; top:250px;}
}'>l</div>
<div id="letter09" class='webvfx' data-animate ='{start: 0.44, end: 0.64, ease: "easeInOutBounce",
      0% : {opacity:0; left:960px; top:250px;},
    100% : {opacity:1; left:960px; top:250px;}
}'
		data-animate2='{start: 0.8, end: 0.9, ease: "easeInOutBounce",
	  0% : {left:960px; top:250px;},
	100% : {left:960px; top:250px;}
}'>l</div>
<div id="letter10" class='webvfx' data-animate ='{start: 0.56, end: 0.76, ease: "easeInOutBounce",
      0% : {opacity:0; left:990px; top:250px;},
    100% : {opacity:1; left:990px; top:250px;}
}'>e</div>
<div id="line01" class='webvfx' data-animate='{start: 0.5, end: 0.7, ease: "easeInOutBounce",
	  0% : {opacity:0;},
	100% : {opacity:1;}
}'></div>
<div id="line02" class='webvfx' data-animate='{start: 0.51, end: 0.71, ease: "easeInOutBounce",
	  0% : {opacity:0;},
	100% : {opacity:1;}
}'></div>

</body>
<script src="WebVfx.js"></script>
</html>

Slideshow

This overlay is used to create a reasonably simple slideshow. It works best with a few slides, but has been tested on a 4GB RAM system using 100 slides. It provides for various transitions between slides and all of it is parameterised from the HTML and CSS. No knowledge of Javascript is required.

Please read the documentation as there are some deficiencies in MLT (used by Shotcut) that can only be worked-around by using CSS units based on the viewport (i.e. 'vw' and 'vh'), rather than the normal length units ('px' or '%'). To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Slideshow</title>
	<style>
/*
	The body background pattern (a sort of black metallic mesh) is courtesy of:
		https://www.toptal.com/designers/subtlepatterns/thumbnail-view/
*/
	    html, body	{margin:0; padding:0; width: 100vw; height: 100vh; overflow: hidden;}	/* Set Body = Viewport */
		      body  {background: center repeat url('./bo_play_pattern.png');}				/* (optionally) set a body background */
/*
	IMPORTANT:	Centre the <section> by using viewport units only ('vw' and 'vh')
				and make sure that both 'width' plus 2 x right-margin and
				'height' plus 2 x bottom-margin = 100
*/
		section		{position: relative; top: 0; left: 0; overflow: hidden;
					 width: 90vw; height: 90vh; margin: 5vh 5vw; padding: 0;}
					 
/*	IMPORTANT:	Make the #slides <div> the same size as the <section> */

		#slides		{top: 0; left: 0; height: 90vh; width: 90vw;
					 background:  url('./pull_focus_bg.jpg') center #666;}
/*
	IMPORTANT:	You can add a border (e.g. white to make it look like a printed photo)
				and a margin, if you like, but:
				MAKE SURE THE UNITS ARE ONLY 'px', NOT 'vw/vh' or '%'.
				(This is due to an MLT deficiency)
*/				
		img         {display: none; border: solid 10px #fff; margin: 2px;}
	</style>
</head>
<body>
	
<!--
	============================================================================
	        A SHOTCUT Overlay HTML Filter using Elusien's WebVfx framework
			--------------------------------------------------------------
					                  Slideshow
	============================================================================
-->
	<section>
		<div id='slides' data-control='60:30' class='webvfx' data-slideshow='{
			duration: 25% , type: splitting, from: "left", magnify: 25%, blur: 50, ease: easeInOutSine}'>
			<img src='http://mhcommittee.elusien.co.uk/images/home.jpg'                                  >
			<img src='http://mhcommittee.elusien.co.uk/images/home_1.jpg'                                >
			<img src='http://mhcommittee.elusien.co.uk/images/Melamine-wood-002.png'                     >
			<img src='http://mhcommittee.elusien.co.uk/images/Melamine-wood-003.png'                     >
			<img src='http://mhcommittee.elusien.co.uk/images/home_2.jpg'                                >
			<img src='http://mhcommittee.elusien.co.uk/images/home.jpg'                                  >
		    <img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10a+Gannet_Colony.JPG'      >                                              
		    <img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10b+Gannets.JPG'            >
		    <img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10d+Bethells_Beach_Cave.JPG'>
		    <img src='http://trips.elusien.co.uk/2017c-New_Zealand/images/Day10e+Karakare_Falls.JPG'     >
		</div>
	</section>
</body>
<script src="WebVfx.js"></script> <!-- Use Elusien's WebVfx framework (www.elusien.co.uk/shotcut) -->
</html>

Explosion

This overlay takes some text, in the form of movie credits, breaks it down into the individual characters then simulates an implosion followed by an explosion by animating these characters, making them fly over, into and out of the screen. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
	<!-- WebVfx does not recognise Google web fonts in "<link>", so make sure you also have the font downloaded on your computer. -->
	<title>Explosion</title>
	<style>
		html, body	{margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000;}
		section		{font: 25px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
					 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
					 position: absolute; top:0; left: 0; width: 100%; height:100%;
					} 
		table		{width: 100%; position: absolute; left: 0; top:50%;
							 transform: perspective(1px) translateY(-50%); /* perspective reduces blurring of text */
					 -webkit-transform: perspective(1px) translateY(-50%);
					}
		th	    	{font-size:   3em;} 
		td			{font-size: 0.9em; width: 50%; margin: auto; color: #ddd;}
		tr			{font-size:   1em; width: 100%;}
		td:last-child	{width: 45%; padding: 8px 0.5%; font-size: 2.0em; text-align: left;}
		td:first-child	{width: 45%; padding: 8px 0.5%; font-size: 1.0em; text-align: center;}
		#cast td:first-child, #credits td:first-child					 {text-align: right;}
	</style>
</head>
<body data-control='45:30''>
	<section id='title' class='webvfx' data-explosion='{start: 0.1 , end: 0.2, finish: hidden, ease: easeInOutSine, 0%: explode}'>
        <table>			
			<tr><th>THE TERMINATOR</th></tr>
		</table>
	</section>
	<section id='cast' class='webvfx'  data-explosion='{start: 0.15, end: 0.3, begin:  hidden, ease: easeInOutSine, 0%: implode, 40%: wait, 60%: explode}'>
        <table>			
			<tr><th colspan='2'>Cast</th></tr>
            <tr><td>The Terminator</td><td>Arnold Schwarzenegger</td></tr>
            <tr><td>Kyle Reese</td><td>Michael Biehn</td></tr>
            <tr><td>Sarah Connor</td><td>Linda Hamilton</td></tr>
        </table>
	</section>
	<section id='credits' class='webvfx' data-explosion='{start: 0.3 , end: 0.6, begin:  hidden, ease: easeInOutSine, 0%: implode, 40%: wait, 60%: explode}'>
        <table>			
			<tr><th colspan='2'>Credits</th></tr>
            <tr><td>Director</td><td>James Cameron</td></tr>
            <tr><td>Writer</td><td>James Cameron</td></tr>
            <tr><td>Writer</td><td>Gayle Anne Hurd</td></tr>
        </table>
	</section>
	<section id='locations' class='webvfx' data-explosion='{start: 0.6 , end: 0.8, begin:  hidden, ease: easeInOutSine, 0%: implode, 40%: wait, 60%: explode}'>
		<table>
			<tr><th>Locations</th></tr>
        	<tr><td>Elephant Rocks, New Zealand</td></tr>
        	<tr><td>The Cotswolds, UK</td></tr>
			<tr><td>New York, USA</td></tr>
		</table>
	</section>
	<section id='legal' class='webvfx' data-explosion='{start: 0.8 , end: 1.0, begin:  hidden, ease: easeInOutSine, 0%: implode, 50%: wait}'>
 		<table>
			<tr><th>Legal</th></tr>
			<tr><td>No animals were harmed during the making of this film.</td></tr>
            <tr><td>&copy;2018 - Elusien Entertainment.<br>
					Except where otherwise noted, content is licensed under a 
					Creative Commons Attribution 4.0 International Licence.</td></tr>
		</table>
	</section>
</body>
<script src="webvfx.js"></script>
</html>

(De)Fragmentation

This overlay uses the "explosion" feature to animate a header, while at the same time defragmenting and then fragmenting the Shotcut logo. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<html lang="en">
<head>
<meta charset="utf-8">
<title>Fragmentation</title>
<style>
    html, body {margin:0; padding:0; width: 100vw; height: 100vh; background-color: #000; overflow: hidden; color: #fff;}
	h1	{color: #eee; text-align: center; padding: 10vh 0 0 0;}
</style>

</head>
<body data-control='15:30'>
	<h1  class='webvfx' data-explosion='{start: 0.05, end: 1.0, begin: hidden, ease: easeInOutSine,
		0%: implode, 40%: wait, 60%: explode}'>
		Fragmenting The Shotgun Logo (https://vimeo.com/268484362)
	</h1>
	<div class='webvfx' data-center='vh'
		 data-fragment='{start: 0.05, end: 1.0, nh: 5, nv: 20, begin: hidden, ease: easeInOutSine,
		0%: defragment, 40%: wait, 60%: fragment}'>
		<img alt="shotcut logo"
			    src="data:image/png;base64,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">
	</div>
</body>
<script src='./webvfx.js'></script>
</html>

Subtitles

This overlay uses the "subtitles" feature to display subtitles that have been copied from a Subrip file (.srt). To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Subtitles</title>
	<style>
	    html, body	{margin:0; padding:0; width: 100vw; height: 100vh; background-color: transparent; overflow: hidden; border: solid 1px #000;}
		#st1		{position: absolute;  width: 90vw; left: 0; top: 0   ; margin: 1vh 0 1vh 5vw; padding: 0.25em;
					 background-color: rgba(0, 0, 0, 0.5);
					 font: 18px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
					 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
					 text-align: center; border-radius: 0.5em;
					}
		#st2    	{position: absolute;  width: 100vw; left: 0; bottom: 0; margin: 1vh 0 1vh 5vw; padding: 0.25em;
					 background-color: transparent;
					 font: 18px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
					 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
					 text-align: center; border-radius: 0.5em; letter-spacing: 2px;
					}
	</style>
</head>
<body data-control='40:30'>
	The subtitles appear at the top (#srt1) of the screen and also at the bottom (#srt2).
	<div id='st1' class='webvfx' data-subtitles='subtitles'></div>
	<div id='st2' class='webvfx' data-subtitles='subtitles'></div>
	<pre id='subtitles'>
1
00:00:04,000 --> 00:00:15,400
This is the 1st subtitle 04sec to 15.4sec
Mary had a little lamb,
its <i>fleece</i> was white as snow
and everywhere that Mary went
that <b>lamb</b> was sure to go!

2
00:00:16,600 --> 00:00:25,800
This is the 2nd subtitle 16.6sec to 25.8sec

3
00:00:20,600 --> 00:00:23,800
This is the 3rd subtitle 20.6sec to 23.8sec

4
00:00:24,600 --> 00:00:30,800
This is the 4th subtitle 24.6sec to 30.8sec

</pre>
</body>
<script src='./webvfx.js'></script>
</html>

Typewriter

This overlay uses the "typewriter" feature to display text as if it were output on a typewriter. A cursor is displayed after each letter and at the beginning of the sequence, for the time it would take to output 10 letters and also at the end of the sequence for the time it would take to output 8 letters To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Subtitles</title>
	<style>
	    html, body	{margin:0; padding:0; width: 100vw; height: 100vh; background-color: transparent; overflow: hidden; border: solid 1px #000;}
		#st1		{position: absolute;  width: 90vw; left: 0; top:30vh   ; margin: 1vh 0 1vh 5vw; padding: 0.25em;
					 background-color: #444;
					 font: 32px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
					 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
					 text-align: center; border-radius: 0.5em;
					}
		._typewriter_ {border-right: solid #fff 2px; margin: 2px;}
	</style>
</head>
<body data-control='20:30'>
	<div id='st1' class='webvfx' data-typewriter='{start: 0.1, end: 0.9, stx: 10, etx: 20}'>
		Mary had a little lamb, <br>
		its <i>fleece</i> was white as snow <br>
		and everywhere that Mary went <br>
		that <b>lamb</b> was sure to go!
	</div>
</body>
<script src='./webvfx.js'></script>
</html>

Textflow

This overlay takes a number of lines of text, breaks it down into the individual characters then causes each of those lines in turn to flow onto the page in different ways. To see the animation click on the button below:

The source code (HTML + CSS) that produced the animation is listed below. Use "copy & paste" to copy it to your own computer for you to modify to your requirements.


<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<style>
		body, body *    {-webkit-box-sizing: border-box; box-sizing: border-box; margin: 0;}
		
		#screen	{width: 100vw; height: 100vh; position: relative; border: solid 1px #000;}
		table   {width: 98vw; height: 98vh;
                 margin: 0 auto;
				 background-color: #fff;
				 position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
				 border-collapse: collapse;
				 overflow: hidden;
				}
		td 		{border: dashed 1px #fff; /* same color '#111' as background-color above */
		   		 position: relative;
		   		 text-align: center; vertical-align: middle; font: 32px 'Arial'; color: #000;
 		   		 margin: 100px 0 0;
		   		 border-bottom: 2px solid #ccc;
		   		}
		div		{ width: 100%;}
		tr:nth-child(1)  td	{color: #24a8e6;}
		tr:nth-child(2)  td	{color: #a5cb21;}
		tr:nth-child(3)  td	{color: #b10e81;}
		tr:nth-child(4)  td {color: #8d6a00;}
		tr:nth-child(5)  td	{color: #dd3f0f;}
		tr:nth-child(6)  td	{color: #ddb40f;}
		tr:nth-child(7)  td	{color: #348c04;}
		tr:nth-child(8)  td	{color: #00ffff;}
		tr:nth-child(9)  td	{color: #ffcc00;}
		tr:nth-child(10) td	{color: #ff00cc;}
		tr:nth-child(11) td	{color: #ff0000;}
		tr:nth-child(12) td	{color: #00ff00;}
		tr:nth-child(13) td	{color: #0000ff;}
				
/*		#screen, table, tr	{border: solid 1px red;}	/* DEBUG - to show the borders */

	</style>
</head>
<body data-control='30:30'>
	<div id='screen'>
		<table>
			<tr><td class='webvfx' data-textflow ='{start: 0.0 , end: 0.08, begin: hidden, finish: visible, ease: easeInOutSine, type: 0, 0%: flow,  40%: wait, 60%: flow}'><b>Type 0<br>textflow</b></tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.08, end: 0.16, begin: hidden, finish: visible, ease: easeInOutSine, type: 1, 0%: flow, 100%: wait}'><b>Type 1</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.16, end: 0.24, begin: hidden, finish: visible, ease: easeInOutSine, type: 2, 0%: flow, 100%: wait}'><b>Type 2</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.24, end: 0.32, begin: hidden, finish: visible, ease: easeInOutSine, type: 3, 0%: flow, 100%: wait}'><b>Type 3</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.32, end: 0.40, begin: hidden, finish: visible, ease: easeInOutSine, type: 4, 0%: flow, 100%: wait}'><b>Type 4</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.40, end: 0.48, begin: hidden, finish: visible, ease: easeInOutSine, type: 5, 0%: flow, 100%: wait}'><b>Type 5</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.48, end: 0.56, begin: hidden, finish: visible, ease: easeInOutSine, type: 6, 0%: flow, 100%: wait}'><b>Type 6</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.56, end: 0.64, begin: hidden, finish: visible, ease: easeInOutSine, type: 7, 0%: flow, 100%: wait}'><b>Type 7</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.64, end: 0.72, begin: hidden, finish: visible, ease: easeInOutSine, type: 8, 0%: flow, 100%: wait}'><b>Type 8</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.72, end: 0.80, begin: hidden, finish: visible, ease: easeInOutSine, type: 9, 0%: flow, 100%: wait}'><b>Type 9</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.80, end: 0.88, begin: hidden, finish: visible, ease: easeInOutSine, type: 10, 0%: flow, 100%: wait}'><b>Type 10</b> textflow</tr>
			<tr><td class='webvfx' data-textflow ='{start: 0.88, end: 0.96, begin: hidden, finish: visible, ease: easeInOutSine, type: 11, 0%: flow, 100%: wait}'><b>Type 11</b> textflow</tr>
		</table>
	</div>
</body>
<script src='./webvfx.js'></script>
</html>