Typewriter-style Effect

Hi everybody,

I’m new to shotcut and haven’t done any video editing since school, but I’m trying to learn shotcut. So far I’m really impressed with how easy it is to do the basics, but I want to try something a little more advanced and after searching around I’m not sure if SC is capable.

I want to add an effect similar to a Typewriter Effect, where in the video there is a paragraph of text, but it appears word by word and like by line. It doesn’t necessary have to be letter by letter like it’s being typed as it needs to appear quite fast.

This video has a good example of what I’m trying to achieve at about 45 seconds in the box at the bottom of the video.

Is this something I can do with SC?

Thanks all!

Some nuggets here:

Cheers Brian. That option seems a little over complicated, or maybe it just needs a decent step by step tutorial to show new users how to do it. Either way it not exactly what I’m looking for.

Use the mask filter and advanced keyframes. Apply the filter and click the clock shaped keyframe icon next to the parameter you want to change (most likely width or horizontal postition) then set discrete (i.e. sudden) keyframe changes for each letter reveal on the appropriate frames. If you need more info, I’m a bit pushed for time now, but I (or someone else) can give more detail later if you need it :slight_smile:

Hi QDSOV,
If I understand that correctly, it sounds like an awful lot of work for paragraphs of text, but might be OK for short texts like a short sentence.

It seems that SC in it’s current stage of development isn’t yet capable of doing what I need. Right now I think it would probably be a lot easier to record a screen capture of a slideshow presentation from something like Powerpoint, which has text effects like this as standard, although I’m not sure if it can do it with a video background.

textone3
Yes it only shows one character at a time, but could be words.
This is created using the mask filter with Keyframes.

V2 : Open Other - Color - OK (Transparent color - appears black)
V2 : Text & Mask filters with Keyframes.
V1 : Your main video

With the transparent color, you’re able to split sections and apply different text, sizes, etc… You can have more than one track, I just used V2 as just one additional track, but it must be above your main video.

Practice Mask with keyframes before you attempt this on your project though. Just open any video, PNG, JPG to practice with. Follow along with the tutorial https://youtu.be/j9xb1Rzn2Sg .

Hi Hudson555x,
It’s still not what I’m looking for, but that tutorial vid was interesting and I learnt a few other nice little things.
Thanks for that.
Overall shotcut is really impressive and I hope that it continues to develop so it can compete with the likes of Adobe.

The text gif is set to specific points that I set, and I don’t see anyone wanting to recreate what I did, lol. The point of keyframes is the ability to manipulate filters to move/change specifically the way you want them to within a clip.
shotcut_2018-12-28_09-49-50
shotcut_2018-12-28_09-46-53
shotcut_2018-12-28_09-45-36

That image is a little too small for me to see whats going on in there.

Edit- it’s actually very readable if I use browser zoom.

Using key frames to create a typewriter effect is a lot of work unless it’s one short word. The html ovelay method works but you need to get familiar with the coding.

I’ve found it easiest to use another NLE to create something that cannot be easily done with Shotcut.

This was done with Lightworks in 5 minutes using text FX and a green background which was chroma keyed in Shotcut and exported.

Float

Steps:

  1. Download the javascript file from my website: Shotcut - Elusien's Contributions
  2. Save it (as webvfx.js) in a folder e.g. Shotcut
  3. Create an HTML file (say’ typing.html’) and save it in the same folder as
  4. Run this HTML (preferably in the Chrome browser) to check it does what you want.
  5. In Shotcut click on the ‘Overlay HTML’ filter, tick the ‘Use WebVfx’ box and select your HTML file (e.g. ‘typing.html’) et voila!

A simple HTML file for what you are looking at would be as shown below. It is set up for a 10 second clip at 30 frames per second. The first set of “typing” starts 10% (1second) into the clip and lasts until the 4th second. The next set of “typing” starts 60% (6seconds) into the clip and stops at the end.

If you want fancier fonts, drop shadows, glowing text etc, you can do this by editing the CSS in the "<style></style>" section of the HTML.

For more examples and a fuller explanation of the javascript possibilities see my website.

	<html lang='en'>
	<style>
		table     { height:100vh; width: 100vw;}
		table td { text-align: center; vertical-align: middle; font: 15px 'Arial'; color: red;}
	</style>

	<!-- This is a 10 second clip at 30 fps -->
	<!-- 1st set of text 10% (0.1) into clip till 50% -->
	<!-- 2nd set of text 60% (0.6) into clip till 100% -->

	<body data-control='10:30'>
		<table> <tr>
			<td>
				<b class='webvfx' data-typewriter='{start: 0.1, end: 0.5}'>
	THIS SERIES WAS PRODUCED IN COLLABORATION WITH THE EXPANSE TEAM
				</b>
	</br></br></br></br>
				<b class='webvfx' data-typewriter='{start: 0.6, end: 1.0}'>
	THE FOLLOWING INFORMATION CONSTITUTES OFFICIAL EXPANSE TV CANON
				</b>
			</td>
		</tr> </table>
	</body>
	<script src='./webvfx.js'></script>
	</html>

Edit : nevermind it’ ok now

This topic was automatically closed after 90 days. New replies are no longer allowed.