Playing around with the Blend Mode filter, and a cool text title animation

[jonray]

Hi folks.
I am excited to report and share how I made this rather cool animated text title (it’s part of a title sequence for an up and coming flute music video I’m making):

Animated text effect - Made in Shotcut

I did it with a custom-made HTML file. But first, my story begins with an experiment with Blend Modes and transparency… in which discovered something interesting.

So in Shotcut, using three colours - black, grey and white, I exported a frame to produce this PNG file.

Note - the grey is not just any grey - it’s called 50% grey or half-grey (hex code is (hash)808080).
Then I put a base video on V1 and this PNG clip on V2, resized it to make it smaller, then I experimented with various Blend mode settings. Here are the results:

Blend Mode: OVER or NONE - the black, grey and white stay as they are:

Blend Mode: ADD - black becomes TRANSPARENT, grey lightens the background, and white stays white:

Blend Mode: MULTIPLY - black stays black, grey darkens the background, and white becomes TRANSPARENT:

I already knew that for a black/white image, applying ADD retains the white and gets rid of the black, and likewise applying MULTIPLY retains the black and gets rid of the white, so these discoveries were no surprising to me.

However, the last one was quite interesting:
Blend Mode: HARD LIGHT - BOTH black and white stay as they are, and grey becomes TRANSPARENT:

This was very exciting to me - so I created an HTML file, played it in Chrome, and took a screen capture using ShareX:

JonRay text animation - screen capture (ShareX) - SUNSET

Then imported this MP4 into Shotcut, applied a Blend Mode:Hard Light filter, did the same for “Over a” and “Distant Horizons”, positioned carefully, and the result is the video at the top of this thread.

I also made another HTML file with “box shadow” to create this:

Which gave this result in SC after importing the sheet music png (with transparent background - exported from MuseScore):

Inter - EST - ing !! (at least to me!) So I’ve shared what I found! I hope someone also finds it useful information…

[Elusien]

Very interseting. For a good explanation of blend modes see:

Blending Modes Explained – The Complete Guide to Photoshop Blend Modes

Although it uses Photoshop names throughout, most of these are the same for Shotcut.

[MusicalBox]

Very nice looking titles!
Even after years using Photoshop, I still can’t quite remember which blend mode does what…
Oh well…

[jonray]

Hi @elusien, Thanks for the link to the Blend Mode tutorial. I’m glad you are there because I need to ask you a question…

I designed a similar text effect to the “Sunset” one in this post. I was trying to re-create the lower thirds effect in the video below. Mine is the higher effect; the lower effect is the original.

Paul Edmund Davies text effect demo 4 - original and new for comparison

Notice that in mine, the letters appear in order from left to right but in the original they appear seemingly in a random order. Here’s the effect alone (screen capture using ShareX):

Paul Edmund Davies text effect demo 4 with grey background

Question: Can I add code to mine which makes each letter appear in a random order?

I have great faith in you that you can do this easily, probably whilst swinging 4 hula hoops on your arms and balancing a carrot on your nose .... :grin:

Here’s my HTML file (delete the fake zip extension)…

JonRay animated text TEMPLATE 004 - ZOOM IN LOTS.html.zip (2.7 KB)

[Elusien]

No problem. Immediately after the line after the line that says:

     let   html       = '';

add a line saying:

     const shuffled   = (Array.from({length: characters.length}, (_, index) => index + 1)).sort((a, b) => 0.5 - Math.random());

Then change your line that says:

           html += `<span style="--i:${i}" >${characters[i]}</span>\n`;

to:

           html += `<span style="--i:${shuffled[i]}" >${characters[i]}</span>\n`;

“Et voila”.

[jonray]

Holy Moly - it works!! Easy as that, huh!! Thank you dear @elusien, you are true star! And a genius! I’ll post a demo when I get a chance…

[MusicalBox]

I just tried the HTML file. Or files, since I also tested @elusien’s version.

Very cool and easy.
I need to include this at least once in my next video!

.
.
.
.
.
.
If you don’t mind of course

[MusicalBox]

By the way.
Surely you noticed I used yellow colored text.

Using the Hard Light blend mode should have made the text translucent.
To avoid that, I duplicated the text clip and pasted it on the track above.
In other words, two identical clips are superposed, reducing the transparency a LOT.

[jonray]

@MusicalBox

If you don’t mind of course

Of course. My commission fees are very reasonable

[jonray]

@MusicalBox

To avoid that, I duplicated the text clip and pasted it on the track above.
In other words, two identical clips are superposed, reducing the transparency a LOT.

Ingenious! Thank you!

[TimLau]

Looks nice, but I think that a non-random version is looking better.

[Namna]

@MusicalBox

I need to include this at least once in my next video!

On s’éloigne un peu du sujet d’origine, mais comme vous êtes parti dans l’ambience western…

We go away a little from the original subject, but as you go in the western ambience…

[MusicalBox]

Chouette votre version
Ahhh Lucky Luke. L’homme qui tire plus vite que son ombre. Une de mes BD préférée. Avec Astérix, Tintin, Gaston Lagaffe et Spirou… pour ne nommer que celles là.

Nice variant of the animation
Lucky Luke the man who shoots faster than his shadow. One of my favorite comic books. Some of my other favorites are Asterix, Tintin, Gaston Lagaffe and Spirou, to name only a few.

[jonray]

@TimLau

Looks nice, but I think that a non-random version is looking better.

Hi Tim, looks great me. Good to have the two options, though. I’m currently designing more effects like this, with both random and left-to right actions. Watch this space …

@Namna

but as you go in the western ambience…

Cool! Did you do that with my HTML file, or with your special filter?

Frais! Avez-vous fait cela avec mon fichier HTML ou avec votre filtre spécial ?

[Namna]

@jonray

Cool! Did you do that with my HTML file, or with your special filter?

Je l’ai fait avec mon filtre spécial, auquel j’ai ajouté grâce au code de @Elusien l’option “ordre aléatoire”.
Mais c’est possible de le faire avec votre fichier html, c’est juste plus long et il faut passer par d’autres logiciels externes.

I did it with my special filter, to which I added thanks to @Elusien’s code the option “random order”.
But it’s possible to do it with your html file, it’s just more time consuming and you have to use other external software.

[jonray]

Hi @elusien, @musicalbox, @namna and other friends,

AN UPDATE - I just posted this short demo of my upcoming flute video to showcase my method in action. I’m quite excited to report this! - because creating the captions individually using text filters in Shotcut would have these disadvantages:

1. It would take a long time
2. It would slow down the timeline playback quite a lot
3. It doesn’t allow me to easily apply a drop-shadow to the text.

The video is not finished. Least of all I have to record me playing real flute! (The flute sound on the video is computer generated)…

Rise and Shine video - DRAFT - beginning - showing title and subtitle captions created with HTML/CSS

The title, subtitles and following and following animated captions were created with custom-made HTML/CSS files which have white text (with black drop-shadow) and a half-grey (#808080) background.:

Rise and shine subtitles DEMO (grey white and black)

I captured the output using OBS, imported the MP4 file into Shotcut and applied a Blend Mode:Hard Light filter on V2 as an overlay to the main video on V2.

The grey background disappears, leaving the white/black text on screen.
Its just an example of what can be done with this technique.

What do you think guys?

[MusicalBox]

I think 2 things:

1. If only there was a filter in Shotcut that would apply these cool HTML text templates directly in a project, without having to go through OBS or ShareX first
   The filter could be called something like… hmmm I don’t know… Text: HTML maybe?

2. When will you make all your templates available in one place?

Your draft of Rise and Shine looks promising. Excellent work as usual

[Namna]

Sans approfondir:
1/ Cela prendrait du temps, c’est sûr, mais pas forcément beaucoup plus que la version html si on part de zéro. (Pour les effets directement réalisables avec SC) Heureusement que notre ami @Elusien est là pour adapter et corriger les fichiers html/css/javascript.
2/ Oui, c’est vrai, bien que j’ai remarqué qu’après enregistrement et ré-ouverture du projet, la lecture est beaucoup plus fluide.
3/ Il est possible de faire des ombres portées avec text: simple, je crois que c’est @MusicalBox qui nous avait fait un tutoriel sur le sujet. (Dupliquer le filtre, décaler le texte de quelques pixels et changer la couleur)
Les effets simples fondus et déplacement de la ligne entière sont facilement réalisables avec les images-clés dans SC, par contre l’animation du texte “Rise and SHINE”, je ne pense pas que cela soit possible avec les filtres actuels.
Quoi qu’il en soit, votre prochaine vidéo est prometteuse.

Without going into detail:
1/ It would take time, for sure, but not necessarily much more than the html version if you start from zero. (For effects directly achievable with SC) Fortunately our friend @Elusien is here to adapt and correct the html/css/javascript files.
2/ Yes, it’s true, although I noticed that after saving and reopening the project, the reading is much more fluid.
3/ It’s possible to make drop shadows with text: simple, I think it’s @MusicalBox who made a tutorial on the subject. (Duplicate the filter, shift the text a few pixels and change the color)
The simple fade and shift effects are easily done with the keyframes in SC, but the animation of the text “Rise and SHINE”, I don’t think it is possible with the current filters.
Anyway, your next video looks promising.

[TimLau]

The problem with such at filter is that you need at full brower/javascript engine to do that and that can be a really bloated and hard to maintain and keep secure.

[Elusien]

Up until 2020 Shotcut supported HTML/CSS/Javascript via Qt’s Webkit feature. However, Qt discontinued this and when Shotcut upgraded to a later Qt version it had to abandon the Text:HTML (HTML Overlay) filter.

Qt abandoned Webkit in favour of a new development called Qt WebEngine and an associated widget called QWebEngineView e.g.

QWebEngineView *view = new QWebEngineView(parent);
view->load(QUrl("http://www.qt.io/"));
view->show();

I don’t know how complicated this would be to interface with Shotcut though, or how performant it would be. The latest version is based on Chromium 87.0.4280, with additional security fixes from newer versions, whereas the Chromium Embedded Framework used by OBS Studio (and another possible, though more difficult option for Shotcut and possibly a problem for Mac and Linux) uses version 95.

Running javascript is also a bit messy with Qt WebEngine.