Hi folks
! I discovered a new way of creating “typewriter effect” text.
This is an alternative to using @elusien’s brilliant “typewriter text generator”.
This method uses Shotcut in conjunction with Auto HotKey and Share X.
I’ve made a tutorial video showing how I did it.
That is pretty ingenious.
There is another way with no need for Auto HotKey, or OpenOffice or even Office.
Below, a very simple html file that you open in your browser (no need for webvfx).
It will create the typewriter effect and there is full control of font size, family, colour, background colour
and typing speed.
Simply double click on the html file, it will open in your web browser and automatically run.
You can make the web browser run full screen (normally F11) and do a screen recording.
Because the background colour can be set to anything (green in this case), all that is required
is to bring that recording into shotcut and do a chroma key.
Below an example screen recording.
I have also attached a screen grab of the code and a zipped file of the code.
Best use a decent text editor to modify it, something like Notepad++ for Windows or
Editra or Sublime Text for the Mac and Geany for Linux.
Normal Notepad (or anything in the “office” suite is just useless).
Jstypewritter.html.zip (1.0 KB)
Hi @Paul2 - thank you, that’s enlightening, and fascinating 
A relative term!! For me that looks a complex set of code!!! (I have little experience/understanding of JS).
For me, that’s why I love the @elusien method, because the JS is hidden to the user.
I will study your code and try to figure out how it works.
I do know a bit about CSS though and I reckon I could add a few lines to your code to be able to control the position and/or centering of the text a little more.
I’ll try to do this when I can next grab a few minutes.
I appreciate you posting this and also your helpful notes about how to use and edit the file. I think people can (rightly so) get daunted by the practicalities of HTML but it’s actually not that hard when you get into it.
One more point -
I’m sure you know this but you can make the background transparent in the HTML code and apply it to a transparent clip in Shotcut, negating the need for chroma keying or making a screen capture. I’m just clarifying this for other users who may not know this.
@paul2 (and @elusien) - Just as an aside - do you happen to know any really good JS tutorial sites on Youtube? I mean a tutorial that explains the basics of JS (relating to text typing and manipulation) in a very user-friendly way which is quite fast paced (not waffly!) and explains things methodically and concisely?
I’m quite keen to extend my (very limited) knowledge of this. Unfortunately a lot of tutorials I’ve looked at are very difficult to follow for me - either too slow or too fast , or the difficulty level from one concept to another jumps about too rapidly…
All the typewriter methods have their merit, but I really like the HTML file you presented here. It’s fast, simple, contained, virtually no dependencies, and highly flexible. I haven’t needed a typewriter effect yet, but I’ve thought about what I would do if I did, and an HTML file similar to what you provided is the route I would have gone. Thanks for saving me the effort of writing it myself!
I tried this, but the text edges were extremely ragged. The nice anti-aliasing was gone. Did I do something wrong?
That is a very neat approach.
Since I used Elusien’s method two days ago for four sentences, I find it not that more difficult than yours. To include the WebVfx script is not a downside in my opinion, but there is one significant disadvantage: The lacking option to vary the speed. I circumvented this problem by changing the screen capture’s speed property in Shotcut.
I do not see in your html file how to change the CSS within a sentence, like for example a bold word or change the colour of a punctuation mark. My knowledge is very limited, so forgive me if it is obvious to you.
To illustrate what I mean:
Just add the necessary HTML/CSS markup. For example to get a BOLD “How” and ITALIC “Well done” and the BLUE and ORANGE colours, you could use:
<body data-control='5:30'>
<div id='st1' class='webvfx' data-typewriter='{start: 0.1, end: 0.9, stx: 0, etx: 1}'>
<b>How</b> are <span style='color:blue'>you</span>?<br>
<i>Well done</i><span style='color:orange'>!!!</span>
</div>
</body>
'<b> for BOLD, <i> for italic and <span> with a “style” attribute to colour in your letters.
Also, the data-control attribute is used to vary the speed in the browser. 5:30 means 5secs at 30fps. In shotcut the length of the clip to which the filter is applied determines the speed, but the “start” and “end” can be used to vary the speed in this case.
This example was done with your framework with following lines:
.red {color:#ff8c00;}
.blue {color:#1e90ff;}
How are <span class="blue">you</span>? <br> Well done<span class="red">!!!</span>
I asked Paul2 how to achieve this with their script because I cannot add it that simply to the CSS part.
That does not work because when I choose a too short duration, it will cut off parts of the sentence. This happens within Shotcut and a browser. I can slow down but not speed up.
In the first gif with data-control set to 7 s all sentences are complete and in the second gif with 3 s there is an incomplete one.
The HTML code that @Paul2 provided works when added to a transparent clip in Shotcut. The only problem is that the preview doesn’t work very well.
Maybe the code can be modified so it can be used as a template like the simple scroll template. Where one can select the typewriter template, add text in the HTML editor and get an instant typewriter effect.
Done with @Paul2’s HTML code on a transparent clip.
You can’t do this with Paul’s script since the code does not allow for markup ‘<b>’ etc within the ‘txt’ javascript string. In my framework I allow markup and when the code comes to splitting the text into indiidual characters it recognises the markup (starts with a ‘<’) and passes this through to the browser.
I will look into this, but I suspect it is to do with the number of characters versus the number of frames to display them in. You can get around it by increasing the fps. Instead of “3:30” change it to “3:60” and all the characters should display. Please let me know if this works for you.
Nice to see all the discussion about the “vanilla” JS+html method.
Changing colours, making text bold is also pretty straight forward to do, since javascript can create css and html “on the fly”.
Below, modified typewriter code that changes the following:
This is all done in the different “else if” code:
Modified code below:
Jstypewritter2.html.zip (1.1 KB)
Even though the “vanilla” html option requires some knowledge of coding, it’s rather flexible.
Below an example of using a background picture, no reason it can’t be a video, and some oblique text and drop shadow.
The code:
Jstypewritter3.html.zip (1.1 KB)
The background pic:
old-paper.jpg.zip (191.8 KB)
Great thread! Thanks everyone for these HTML examples. Lots to think about!
Just going back to AutoHotKey scripts (my latest obsession!!) - I just made a new AHK script from which I produced this demo video. Just shows how you can time animated text quite easily.
https://streamable.com/94oxc
My script is here (as a text file - just replace the .txt extension with .ahk).
Baroque music text animation.txt (840 Bytes)
To increase the fps worked. Thanks for the tip!
But my project has 25 fps, so I still have to use a browser. I guess I would have to set the frame rate to 60 at the creation of a new project. But I think I will stick with 25 fps and just use a screen capture.
@Paul2: If you like coding and want to do it from scratch, your approach is nice. However, I doubt many user will be interested in that. I will rather use Elusien’s method with CSS <span> elements. Nice work anyway 
!
@samth
Very true, most users will prefer Elusien’s method as the one I use does involve coding.
Both systems have their pros and conns.
The Elusien method is much simpler, I do agree, but one is limited by what webvfx can currently handle.
The plain js+html is no doubt more complicated but does not suffer from the same limitation.
