Typewriter (TTY) Effect

I’ve had a few days off having just had my AZ vaccination jab, but I have finally got round to finishing my Typewriter Effect utility and putting it up in the “resources” section of my website:


It has lots of options, such as colours, typing speed, delays, shadow, line-height, cursor types etc… Each line can have a different speed, different cursor and different delay. One example is shown in the short video clip below, which I did using Shotcut version 20.07.11 feeding the produced HTML as input to the Text:HTML filter (remembering to select the Use WebVfx Javascript Extension option). Another example shown on the website uses different delays, typing rates and cursors to emulate a human interacting with an artificial intelligence, the script is from Stanley Kubrick’s “2001 - A Space Odyssey”.

If you want to create an effect that is overlaid on top of another video clip then be aware that, because of the way the effect is created, you cannot have a transparent background, so you will have to use a “green screen” technique. e.g. if your text is white (#ffffff), choose a black (#000000) background (or vice versa) and use the “chroma key” filter to turn the background transparent.

This is just one way producing a typewriter effect, there are other techniques using just Shotcut itself, @jonray has produced an excellent instructional video (My new YouTube tutorial - Typewriter Text) on how to do this, including how to include typewriter sound effects.

The app/utility looks like:


Thank you very much for creating these resources.
:+1: :+1: :+1:

My pleasure. It reduces the rate at which the cells in the “little grey matter” atrophy and helps me to repay my debt to those who have helped me online with various projects I have worked on in the past, including open-source authors like Dan and Brian.


Fantastic! Gives users quite a few options for typewriter text then!!! :wink: Look forward to giving this a go.

1 Like

I see lots of Shotcut users using typewriter effects on the future


:grin: :grin:


In celebration of the humble typewriter (https://en.wikipedia.org/wiki/Typewriter) I have composed what I hope will become the definitive Haiku (https://en.wikipedia.org/wiki/Haiku) on the subject:

Of course the correction fluid is needed as it was called Tipp-Ex, not Typex.


Looks awesome ! :+1: :+1: :+1:

I give a thumb down to that post
No Wikipedia link for the word typex
Are we supposed to look it up ourselves?
Like animals?
This is an outrage sacrebleu (https://en.wikipedia.org/wiki/Sacrebleu).

You won’t find it. I didn’t have any correction fluid (called Tipp-Ex https://en.wikipedia.org/wiki/Tipp-Ex) to correct my typographical mistake.

1 Like

Actually, typex is a real word (I did search for it): https://en.wikipedia.org/wiki/Typex

But now I get the humor in your video :slight_smile:
Never heard of Tipp-Ex. Here we used to call it Liquid Paper (even in French)

A vendre
Machine à écrire Remington 1924
Parfait état de fonctionnement
Révisée, graissée, ruban neuf.
Parfait pour écrivain romancier.
600 $ frais de port en sus

For Sale
Remington typewriter 1924
Perfect working condition
Overhauled, greased, new ribbon.
Perfect for a novelist writer.
600 $ plus shipping



I had some up to a few years ago. The fluid used to go hard though and the small brush just clogged up with it. It looked like this:



Yes :grin: The brush got bigger and bigger and the bottle opening smaller and smaller.


1 Like

TIPP-EX!! Yes - it was a must-have item in my school satchel. Then later there was a brand called Snowpake:

Also - I found the perfect soundtrack music for that video, @elusien. Great Haiku, by the way :grinning:


@jonray :grin: :+1:
A classic, no doubt inspired by this famous Jerry Lewis movie scene:

1 Like

That’s great! Clever stuff! :rofl:

1 Like

Hello @Elusien
I just had a real first look at your Typewriter effect generator. Very cool.

I have a suggestion: Allowing the user the possibility of adding a margin around the text. Just to make it easier to select all the text when launching a capture with ShareX.

1 Like

I think that is a very cool idea.

1 Like

Thanks for the suggested improvement.

I think padding is more appropriate than margin for the <body> element, so I have added a “Padding” option to the app (default 0.5%). I had to remove the “width” and “height” since otherwise you’d get scrollbars appearing. The changes to the generated HTML are:

html, body { color  : #ffffff; background-color: #000000; margin: 0; padding: 0; background-color: var(--screen_bg); color: var(--text_color);}
body       { padding: 0.5%; padding: var(--padding); }

The app on the website has been updated to include these changes.