Typewriter effect


#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


#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. (www.elusien.co.uk/shotcut).

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>

#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:


#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>