Typewriter effect

Suggestion
1

Typewriter effect is in Shotcut? I think no. Could be very useful for texts.

2

Try Natron: https://youtu.be/14kIacI3rv4

3

You can create a typewriter effect with the mask filter and the new key-frames.

https://streamable.com/238yg

2 Likes
4

@Anabel, @tin2tin1266027, @sauron, @jonray,

I have modified my WebVfx framework to enable users to create a “typewriter effect” onto videos using the Overlay HTML feature (see: WebVfx HTML Overlay Filters Update - Slideshows, Exploding Text). This is version 1.7 of the framework. (Shotcut - Elusien's Contributions).

The framework wraps every character in the relevant text inside a <span class=‘_typewriter_’></span> element. If you CSS style this to have a border e.g. ._typewriter_ : {border: solid #f00 4px;} then the text will have a cursor preceding the characters as they “type”.

The basic HTML to create the effect is:

<body data-control='20:30'>
	<div 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>
4 Likes
5

You’re the king :slight_smile:

6

COOL! Thanks, Neil. Now all I need is 26 hours every day … :joy:

… and the World Cup to finish …

7

I thought I’d do a 30 second video of film credits using my new typewriter effect. here it is:

3 Likes
8

Little defect : I just notice that when you leave a table cell, there is a little move of the lines above…

9

The problem was I was hiding the curser then making it visible at the next character location by setting its width to zero and this was moving the cells by as many pixels as the width of the cursor (border). I now keep the border width constant and hide it by making its color “transparent”.

The latest version (1.8) on the website has this fix.

The HTML/CSS for this particular filter is:`

<!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: #000; overflow: hidden;}
		#st1		{position: absolute;  width: 90vw; left: 0; top:5vh   ; margin: 1vh 0 1vh 5vw;
					 background-color: transparent;
					 font: 32px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
					 text-shadow: 0 0  3px #fff, 0 0  5px #fff, 0 0  8px #fff, 0 0 10px #0f0,
								  0 0 18px #2f4, 0 0 20px #2f4, 0 0 25px #0f0, 0 0 40px #0f0;
					}
		tr.t>td				{text-align: center; font-size: 2.5em;  padding: 0.75em 0;}
		tr.c>td:first-child	{text-align: right;  font-size: 1.75em;}
		tr.c>td:last-child	{text-align: left;   font-size: 1.75em; padding: 0.5em 2em;}
		._typewriter_	{border-right: solid #cfe 0.1em; margin: 2px;}
	</style>
</head>
<body data-control='30:30'>
	<table id='st1' class='webvfx' data-typewriter='{start: 0.02, end: 0.98, stx: 10, etx: 10}'>
		<tr class='t'><td colspan='2'>THE HUNT FOR RED OCTOBER<td><tr>
		<tr class='t'><td colspan='2'>Cast<td><tr>
		<tr class='c'><td>Marko Ramius :</td><td>Sean Connery</td></tr>
		<tr class='c'><td>Jack Ryan :</td><td>Alec Baldwin</td></tr>
		<tr class='c'><td>Captain Borodin :</td><td>Sam Neill</td></tr>
		<tr class='c'><td>Admiral Greer :</td><td>James Earl Jones </td></tr>
	</table>
</body>
<script src='./webvfx.js'></script>
</html>
10

In between watching the football :grinning: I just created this as an experiment:

https://streamable.com/w40on

Typewriter effect is working well! Thanks Neil!

The html code is below. I tweaked the original code by wrapping the divs in a “big container” transparent div which is 1920x1080, rather than using Neil’s vh and vw’s, and I used pixel measurements to position the text -simply because I’m used to this way of working in this way.
I made the text fade in/out by adding data-animate to each text div.
The font is “Another typewriter”, readily downloadable.
I used webvx .js version 1.8.

Full html code:

 <html lang="en">
<head>
</head>
<body>
<meta charset="utf-8">
<title>Piano subtitles</title>
<style>
    #big_container {
	 position: absolute;
	 width: 1920px;
	 height: 1080px;
    background-color:transparent;
	left:50%;
	top:50%;
	margin:-540px 0 0 -960px;
	opacity:1;   }

#st1, #st2, #st3, #st4	{
	position: absolute;  
	width: 1920px;
	height:100px;		
	left:50%;
	margin:0 0 0 -960px;
         background-color: transparent;
	font: 70px Another typewriter; 
	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: 20px;
			}
			
	#st1, #st3	{top:750px;}
	#st2, #st4 {top:830px;}
	
	._typewriter_ {
	border-right: solid #fff 2px; 
	margin: 2px;
	}
</style>

    <div id="big_container">

<div id="st1" class="webvfx" data-control="40:30" data-typewriter="{start: 0.0, end: 0.1, stx: 5, etx: 1}" 
data-animate="{start: 0.3, end: 0.31, ease: &quot;easeInOutSine&quot;,0% :{opacity:1;}, 100% : {opacity:0;} }">This is little Alexandra Dovgan.</div>
	
<div id="st2" class="webvfx" data-typewriter="{start: 0.15, end: 0.25, stx: 5, etx: 1 }" 
data-animate="{start: 0.3, end: 0.31, ease: &quot;easeInOutSine&quot;,0% :{opacity:1;}, 100% : {opacity:0;} }">She is ten years old.</div>

<div id="st3" class="webvfx" data-typewriter="{start: 0.32, end: 0.5, stx: 5, etx: 1 }" 
data-animate="{start: 0.72, end: 0.74, ease: &quot;easeInOutSine&quot;,0% :{opacity:1;}, 100% : {opacity:0;} }">She's just won a worldwide piano competition.</div>

<div id="st4" class="webvfx" data-typewriter="{start: 0.55, end: 0.68, stx: 5, etx: 1 }" 
data-animate="{start: 0.72, end: 0.74 , ease: &quot;easeInOutSine&quot;,0% :{opacity:1;}, 100% : {opacity:0;} }">Did I mention she was ten years old?</div>

</div>
<script src="./webvfx 1_8.js"></script>
</body>
</html>
2 Likes
11

First; Sorry for reviving this post-- Most ones on this topic are locked; so I dont know where else to ask.

Now; I know this will make me look like a total idiot, but I’d greatly appreciate some assistance as I don’t fully understand HTML; and every where I look for awnsers on this just turns up nothing.

My goal is to create something akin to Phoenix Wright; with both the typewriter text effect, and the sound effects. An example to it is see here: https://golen.nu/portal/phoenix/ (You’ll want ot click the arrow a coupple times to hear/see it)

I have the current WebCfx (1.11) and followed the latest html basic set up I can find; and could put it in a video, but my questions are more about altering and editing said HTML effects, over simply putting them in.

  1. Formatting–
    How do I format the HTML file accordingly to work in shotcut? I’m going for a sort of retro game feel seen here:
    https://cdn.discordapp.com/attachments/598750645742338079/598751459546497065/ExampleFormat.png

I want the text to fit in the box, have proper text-wrapping(I think thats what its called), so it doesn’t start typing a word on line 1; then snap it to line 2 if the word gets too long. (Opposed to simply starting the long word on line 2 to begin with-- which is the desired result.) Likewise; can I speed up/slow down the text? Especially on certain words?

  1. Sound–
    As seen in Phoenix Wright (example seen above) A small sound is played approximately when every other character appears. I’d like to implement this into the HTML somehow to make things a little more streamlined; instead of trying to time over 800 blips over a short video, and hoping they line up and don’t feel off…

  2. continuing a series of statements–
    So once the text box fills up; I want it to pause for a time, allow people to read, then continue by fully clearing everything immediately, and typing the next segment. (think of it like pressing A in a video game) Is this a thing that can be done through HTML? Would this be doable in one document; so I can just make 1 document of my video script; or will I need multiple HTML Files?

Likewise; I’ve noticed interesting effects when you use HTML in shotcut-- things like it leaving the text up on screen if you pause or move the play head. I’m unsure how this will effect the end result, or how it’d mess with a ‘new message’. All I know its a bit confusing in editing, as I’m constantly are unsure if the HTML broke because of something I did in the file or just needs to be re-loaded for the 80th time.

I should also ask-- I have “WebVfx.js” in the same folder as my HTML’s-- and those are in the same folder as my edited recording. Of course; their all working, but my question is; do ALL of those always need to be in the same folder? So if I had a folder for a new project; I need to clone webvfx for its html and put them with that new project?? or are the files not that darn picky?

I know some of these may be stupid questions, but I’m still learning shortcut, and I know NOTHING at all about HTML… All of this is really important for the projects I’m working on; So I’d greatly appreciate as much help as possible. Please explain as much as possible- and if you’re the kind of person to just make an example file; please explain/comment it up so I can learn from the file and now have to ask questions every time I wanna do something. --I’m not trying to sound “mean”- I just want to learn this.

Thank you all for your time and responses-- Sorry for sort of “necro-ing” this post-- but I didn’t know where to go where this would be seen.

Thanks again for any and all help.
-Pony_Phreak

12

If you never used it before, you will have to learn it - that does not make you stupid.

First and foremost, I suggest you watch the tutorial series of jonray (https://www.youtube.com/watch?v=AhX5p_umORM) because most of your questions will be answered, especially 1. and 3. should be clear afterwards.
I never used sound effects in a HTML file so I do not know if that is possible. @Elusien can probably state if it is.

It sometimes happens that the animation seems off but most of the times reloading is enough to mitigate the problem. I never had issues in the export it seems to be a problem in the preview. But yes the uncertainty is annoying and the repeated reloading extends the editing process. I use smaller sections to only use few effects in one HTML file hence I need more files but also need fewer reloads per file.

You could use the full path in src="" to point to the file. If you just declare src=“WebVfx.js”, it has to be in the same folder as the HTML file.

You can open a new topic, especially since you ask about sound files in a HTML files which is worth a new topic. Additionally you can ask your questions which remain after you watched the tutorial series.

13

For a great “Typewriter” effect, I really do recommend having a look at @elusien’s Shotcut pages - by using HTML and his webvfx framework you can create something like this:

https://streamable.com/6v30u

This was created by designing then importing a HTML fiIe by adding a “text:HTML” filter to a transparent clip (note: HTML on a transparent clip only works in version 19.06 and later). I attach my HTML file if anyone would like to experiment.

Alexandra Dovgan piano subtitle by JONRAY with Another typewriter font and purple background.zip (989 Bytes)
Points to note:

  1. The font I used is “Another Typewriter” and the text only comes out like this if you have it installed. Change the “font” attribute to arial or any other and it should work. Or search and download the Another Typewriter font.
  2. Background colour is purple. This is so you can see what it looks like in your browser. Add # (or any symbol) to “purple” to make the background transparent when imported into Shotcut.

Using HTML can be a bit daunting. My set of tutorials that @samth kindly gave reference to above (thanks, @samth!) came about initially because I wanted to show users that it isn’t all that difficult once you get the idea.

@elusien’s site has a wealth of cool HTML ideas.

14

It doesn’t work in Shotcut. I knocked up a simple HTML file to test it:

<!DOCTYPE html>
<html>
<head>
<script>
	function play_sound()
	{
		delta = 2;  // 2 Seconds
		audio = document.getElementsByTagName("audio")[0];	
		audio.play();
		setTimeout(play_sound, delta*1000);
console.log('souns');
}

//  ##########################################
	window.addEventListener('load', function() {
//  ##########################################

		play_sound();
	});	// #### End of window.addEventListener ####
</script>
</head>
<body>
<audio>
	<source src="beep.mp3"></source>
	Your browser does not support AUDIO.
</audio>
</body>

Shotcut starts bleeping as soon as you apply this as a (Text: HTML) filter, even when you pause the video (since there is no synchronisation going on), but the sound (bleeping) never makes it into the exported video.file. So it looks like you will have to insert any sounds you want on a separate audio track.

Looking at the example you gave, all of what you want to do is possible. But it would require a non-trivial amount of work (javascript programming) to set up a system that enabled you to do it without too much effort.