Is "Typewriter Text" coming soon to the text:rich filter?

In a reply to a recent post, @shotcut said, “we do hope to add some text-specific effects such as typewriter or changing the letter spacing [to the text:rich filter]”.

Can I ask if this is going to be imminent please?

My reason is that in a spare couple of hours yesterday I started making a youTube tutorial showing a couple of techniques I thought of to do this (no HTML…) - but if this feature is under development my tutorial isn’t going to have much of a shelf-life. If typewriter text is coming soon I’ll probably ditch the tutorial.


Wow, how interesting.
Regarding the obsolescence of tutorials is something that often happens.
New software versions imply changes that can affect this.

Off topic

About audio effects (filtering, equalisation, etc.), there are not many tutorials. Most of them are “specialising” in tutorials on the visual part of a video, but almost nobody addresses the sound part.
There you might have possibilities for different tutorials and not much addressed.
Recently, I had a problem with the left channel of my wedding video recording. Extremely low volume.
Several solutions:
a) Balance Filter to get the two channels level (albeit at low volume).
Gain/Volume to achieve the desired volume.
b) -Double the audio (tracks A1 and A2)
-Balance filter on A1 to achieve only the right channel
-Balance Filter on A2 to get only the left channel
-Work with each track independently to achieve noise removal or frequency isolation.
c) Using the filter to combine channels
d) Using the copy channels filter

There are so many options that we would have to see which ones are suitable and for what kind of use.

Sorry for hijacking the thread with this off-topic subject. :innocent:

1 Like

All I can say is not in the next three months. Hard to say beyond that.

1 Like

Thanks Dan. I’ll probably crack on with the tutorial then.

Not at all. Your comments about audio editing were very interesting. I’m glad you sorted out the balance on your recording. SC has some really amazing audio features.

I am still not happy with the audio and video results. I realised that I was working on material that I had previously converted years ago to mp4.
Many “commercial” videos I enhanced using a tool to apply filters to the whole video, however with my home recordings, there are many changes in lighting, focus and stability, which I found that Shotcut does a better job with keyframes.
So I’m recovering the master files (from the original digitisation) to, on the one hand, find out if the audio problem is in the original recording and on the other hand, since I’m doing colour treatment, denoising and sharpening, I want to do it on the higher quality material.
Finally, since the video work was giving me a lot of work (colour correction is a challenge) I just tried mixing the audio channels. The left channel only had noise in the material I was using.

Je suis aussi très intéressé par pareille possibilité qui serait très utile.

Question pour les transitions : y a-t-il moyen de faciliter l’usage de transitions externes au programme ou d’en ajouter à la liste prédéfinie ? Merci

Can I ask if this is going to be imminent please? :wink:

It just happens that I need to do a typewriter effect in some pseudo sci-fi project for a friend of a friend. It’s not super urgent, I have like 3 weeks to do the entire thing.

I’ve been testing myself a not-too-painful way of doing that effect with a mask filter for each line of text.


It doesn’t look too bad at all if I can say so myself, but I’d like to have the blinking cursor too if possible.

So in brief, if you tell me your tutorial will be out in a few days, I’ll wait.
But if not, it’s perfectly OK. I will use my method. I know you are busy and I’m asking just in case :slight_smile:

I have uploaded a couple of rough drafts for her (the friend of a friend) to look at, here’s the one with the text effect:

I’m pretty proud of the deep space star field I made from scratch in Photoshop :slight_smile:

1 Like

Peut-être que le gars qui tape à la machine va trop vite mais on a l’impression que les lettres sont dévoilées au fur et à mesure du déplacement du masque.
Vous avez mis des images clés “discret” pour chaque lettre?

Maybe the guy typing is going too fast but it looks like the letters are revealed as the mask moves.
Did you put “discreet” key images for each letter?

J’ai essayé, mais c’est beaucoup trop long. Dans la vidéo, chaque masque se déplace avec deux keyframes linéaires.
Le déplacement des masques sont rapides, alors ça donne le change. Je crois aussi que psychologiquement, le clip audio saccadés de transmission de données contribue un peu nous berner.

I tried, but it was way too long to do. In the video, each mask use 2 linear keyframes.
The masks move quickly. Also, I think the jerky data transfer sound effect helps to make us believe the characters come out one by one.

Hi @MusicalBox, my tutorial is nearly complete but I need to put some finishing touches to it and change some things. Hopefully in the next few days. Watch this space!

I love your typewriter effect - very effective.

Thank you! and thank you! @jonray
I can hardly wait to see it. :upside_down_face:

Here is my attempt using HTML/Javascript and the GSAPI animation library. It took me just over an hour to do. The code (86 lines) is included below. I ran it as a browser source in OBS Studio to create the video. Enjoy:

<!DOCTYPE html>
               Copyright licence: CC0 [Public Domain]
     To the extent possible under law, the creator has waived all 
     copyright and related or neighboring rights to this HTML file.
  <meta charset="UTF-8">
  <meta    name="description" content="Typewriter text on screen">
  <meta    name="keywords"    content="TTY, typewriter, text animation">
  <meta    name="viewport"    content="width=device-width, initial-scale=1.0">
  <meta    name="author"      content="Neil (">
  <link rel="preconnect" href="">
  <link href="" rel="stylesheet">
  <script src=""></script>
:root {
  --font-size  : 40px;
  --line-height: 1.0;

html, body {background-color: black; width: 100%; height: 100%;}
body * {
  margin:0; padding:0; background-color: black;
  font-family: 'VT323', monospace;
  font-size  : var(--font-size);
  line-height: var(--line-height);
  color: #fff;
  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #0f0, 0 0 4px #0f0;
table   {border-collapse: collapse;}
pre     {height: 1em; display: inline-block; position: relative; overflow: hidden; opacity: 0;}
pre>div {display: block; width: 400em; position: absolute; top: 0; left: 0; height: 1.2em;}
span    {display: inline-block; width: 1em; height: 1em;}

    <tr><td><pre id="c0"><div><span class="cursor">></span></div>- In space, no-one can hear you scream.</pre></td></tr>
    <tr><td><pre id="c1"><div><span class="cursor">></span></div>- The force is strong with this one.</pre></td></tr>
    <tr><td><pre id="c2"><div><span class="cursor">></span></div>- The needs of the many</pre></td></tr>
    <tr><td><pre id="c3"><div><span class="cursor">></span></div>  outweigh the needs of the few.</pre></td></tr>
    <tr><td><pre id="c4"><div><span class="cursor">></span></div>- Open the pod bay doors Hal.</pre></td></tr>
    <tr><td><pre id="c5"><div><span class="cursor">></span></div>- <i>I'm sorry, Dave. I'm afraid I can't do that.</i></pre></td></tr>
    <tr><td><pre id="c6"><div><span class="cursor">></span></div> </pre></td></tr>

function animate_tty(){

  var pre    = document. getElementsByTagName('PRE');
  var nchars = [];
  for (let i = 0; i < pre.length; i++) {
    nchars[i] = pre[i].innerText.length - 2; // minus 2 is to allow for the cursor plus a hidden char
  var tl_cursor_blink = gsap.timeline({repeat: -1});".cursor", {opacity: 0, duration: 0.2, ease: SteppedEase.config(1)})
                 .to(".cursor", {opacity: 1, duration: 0.2, ease: SteppedEase.config(1)});
  var tl_cover_move = gsap.timeline();
  tl_cover_move.set("#c0"    , {opacity: 1} ) 
               .to ("#c0 div", {x: pre[0].clientWidth, duration: nchars[0]*0.2, ease: SteppedEase.config(nchars[0])})
               .set("#c1"    , {opacity: 1})  
               .to ("#c1 div", {x: pre[1].clientWidth, duration: nchars[1]*0.2, ease: SteppedEase.config(nchars[1])}, '>3') 
               .set("#c2"    , {opacity: 1})  
               .to ("#c2 div", {x: pre[2].clientWidth, duration: nchars[2]*0.2, ease: SteppedEase.config(nchars[2])}, '>3') 
               .set("#c3"    , {opacity: 1})  
               .to ("#c3 div", {x: pre[3].clientWidth, duration: nchars[3]*0.2, ease: SteppedEase.config(nchars[3])}, '>1') 
               .set("#c4"    , {opacity: 1})  
               .to ("#c4 div", {x: pre[4].clientWidth, duration: nchars[4]*0.2, ease: SteppedEase.config(nchars[4])}, '>3')
               .set("#c5"    , {opacity: 1})  
               .to ("#c5 div", {x: pre[5].clientWidth, duration: nchars[5]*0.2, ease: SteppedEase.config(nchars[4])}, '>3')
               .set("#c6"    , {opacity: 1}); 

window.onload = animate_tty;


That looks really good @Elusien
Also, I’ve been searching that type of font for a while now. I have a couple that are similar but that one looks real authentic.
Also, I’ve seen those 5 lines somewhere :slight_smile:

Totally brilliant, @elusien! I wish I could get my head round that coding… I will attempt to study it :wink:

I see from the code that the font is a Google font called VT323.

I just made this demo using my Method 2 typewriter text (featured in my tutorial - coming soon…). You may like to turn down your speakers/headphones. Preferably turn them OFF!! :rofl: :rofl:

PS @MusicalBox, did you get my PM?

C’est vrai que pour la musique, vous nous aviez habitués à mieux. :sunglasses:
Impatient de voir le tutoriel avec les outils actuels.

It’s true that for the music, you had accustomed us to better. :sunglasses:
Can’t wait to see the tutorial with the current tools.

1 Like

:joy: :rofl: That was awesome ! Love the music. Reminds me of my sons first music class concert when he was in elementary school :slight_smile:

The typewriter effect looks very good ! That’s promising.

@jonray I got the PM but no notification. That’s strange.

1 Like

I often browse Google Fonts (all of which are free) for inspiration ( Another futuristic font I love is Zekton from Typodermic Font Foundry - there are lots of variants but only one of which is free although it has some restrictions on where you can use it. It isn’t a monospaced font though so I couldn’t use it for the “typewriter” demo.

1 Like