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.
Just a few points about using these, for those not au fait with using the Text:HTML filter.
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.
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.
“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.
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.
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).
If you know HTML/CSS basics, many aspects can be customised - colours, font, timings, text movement etc etc…
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. And more classical-style music - great!
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…
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:
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.
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.
And more classical-style music - great!