Introducing: "Letter-Space" text effect for Video Titles using Text:HTML

Hi folks,
I designed a set of new HTML video title templates featuring animated letter-spacing (the letters of the words expand horizontally). Then I made this video presentation, which I did using 34 HTML files (!) - each one using the effect but having a variation, showcasing an example of what can be done.

https://streamable.com/9yfq2

https://streamable.com/9yfq2

Happy to share all 34 HTML files so users can use them as templates!

Letter-Space text effect by Jonray (34 HTML TEMPLATES).zip (223.8 KB)

Just a few points about using these, for those not au fait with using the Text:HTML filter.

  1. Unzip the zip file. There are 2 folders. One set of HTML files will have a purple background (so you can preview in your browser just by double-clicking (no need to open in Shotcut). The transparent background ones will not show up when previewed because there’s white text on white background, but work in Shotcut when placed on a colour (or transparent) clip on v2 when you have a colour clip (or video clip) on V1.

  2. Note that most of these HTML files are set up to use the font “Open sans”. they will work if you haven’t got that font installed but you will see the defaut Times New Roman. You can change the font by changing the CSS code in a text editor like Notepad++, to any font you have installed.

  3. “CONVERTED” means that I used @elusien’s brilliant CSS animation genereator to produce the code in the section so they work in Shotcut. IMPORTANT - you MUST have the two .js files (included in the folders) in the SAME FOLDER as the HTML file for it to work.

  4. Easy to apply in Shotcut- just apply a Text:HTML filter to a colour clip. Select “use WEBVFX”, click “open” - and select the HTML template of your choice. Make the duration of your colour clip about 8 seconds long. If you shorten the clip, the animation will run faster, and vice versa.

  5. If you like, change the text to that of your own choice. The text content to change is towards the bottom of the file, in the “DIV” section (HTML) - below the"STYLE" section (CSS).

  6. If you know HTML/CSS basics, many aspects can be customised - colours, font, timings, text movement etc etc…

10 Likes

Amazing! Thank you very much. Looking forward to use them!

1 Like

Nice one @jonray will be checking it out.
BTW certain parts of the music you used reminds me of Faulty Towers. :smile:

Brilliant and very easy to use.
Adjusting the timing, font and width and height of the box was a bit tricky,

360 plugin created by @Leo_Sutic

Tower Bridge footage.

3 Likes

@mrstordal and @Paul2 Thanks! Glad you like the idea.

I see what you mean about the music. Classical strings! (For the non- British, Fawlty Towers was a British Sit-Com starring John Cleese, first shown on TV between 1975 and 1979. Actually my favourite ever sit-com. Every episode is hilarious, worth a watch if you’d like a taste of quirky Brit humour)!

Wow, @sauron, love that demo. Thanks for trying the “Letter-Space effect” out. I see you made a
left-aligned variation. Cool. Perfect choice of font. :+1: And more classical-style music - great!

When you get a chance could you upload the unconverted HTML files for the letter space effect.

Hi @sauron, Sure thing! However, there’s a problem - for the later, more complex, HTML files I made (which have different animations apart from the “Letter_Space_IN” and “ZOOM_OUT” animations) , I found it easier to copy/paste the CONVERTED code, then adapt it.

I could “unconvert” them back to the “@ keyframes” way, but I don’t have time! However, I’ve attached the first 10 HTML files, renaming them with “old” in the filenames, which include the UNCONVERTED code for the Letter-space_In and Zoom_out animations.

Hope this helps and also hope that what I’m saying makes sense to you…

Letter-Space text effect by Jonray TEMPLATES 1-10 with AT KEYFRAMES animations.zip (19.4 KB)

Thanks.
I just want to experiment a little with unconverted files, to try and figure out timings and whatnot.

Happy experimenting … You probably know this already but @elusien’s notes here should help with understanding what’s going on:

http://www.elusien.co.uk/shotcut/animations/index.html

Plus (again you’ll realise this) - 1 second in the converted code is 1000 milliseconds - etc.

That might be exactly what I was looking for a couple of weeks ago. I wanted to replicate the text effect they use in Star Trek Picard in the opening credits. Can’t wait to test if the Letter-Space effect will work for this (combined with other effects of course). Thanks @jonray !
Extract from the opening credits:

https://streamable.com/pj9lk

Hi @MusicalBox,

Nice text effect!

I tweaked one of my Letter-Sapce HTML files and got this:

https://streamable.com/yss46

However, the letter-spacing animation is coming out very stuttery. I’ll try to figure a way of getting it smoother…

(BTW the purple background can be made transparent to overlay above a video background).

My tweaked HTML files are here, should you want to experiment. I used the font “Antonio” to replicate the example - but I’ve done a similar file using the more common “arial” font.

Star Trek PICARD text effect by Jonray TEMPLATE 01 adapted CONVERTED.zip (3.6 KB)

3 Likes

The text effect can be reasonably reproduced using text and elastic scale.


https://streamable.com/ldvbm

The show is pretty good.:smiley:

1 Like

Nice effect! Although the letter-space animation works slightly differently in that the letters remain in proportion whereas in your example the whole text, including the letters, are stretched. Glad you posted this - never thought of adding elastic scale to text.

@jonray wow! You nailed it! It looks great on my phone screen. I’ll check your Picard file as soon as I get home. Thanks!