HTML Filters: Titles, Scrolling Credits, Stopwatches, Gauges etc

Hi @sauron - yep, think I can reproduce this or similar with HTML/webvfx. Actually I do have a bit of time today so I’ll see what I can do. It would be a nice little project for me and give me a chance to hone my HTML skills :grinning::grinning:

Watch this space …

It’s an interesting style. I tried to reproduce it with available filters but couldn’t do it.

Hi @sauron - Hey, I did it!!! Just the one “Director of Photography” segment for now - the credits right at the beginning of your clip will take a bit more work since the letters are right-justified, which will require some more positioning. I can do it, though, just need a bit more time.

If I can grab even more time, I’d love to make a tutorial to show folks how I did this.All done with overlay HTML filter and Webvfx to control the fade-ins of each letter.
Here’s what I’ve got so far:

https://streamable.com/nrkft

What do you think? :grinning::grinning:

2 Likes

As jon has pointed out, this effect can be reproduced with my javascript library as it stands. But it is messy. Each character has to have its own set of keyframes. However, that is what I do “behind the scenes” with the “explosion” and “typewriter” effects.

I have nearly finished a new character-effect and once that has been done I can use the new code to produce fairly easily the effect you are interested in, only requiring a few keyframes.

Indeed! Here’s a screenshot of part of the code I wrote. Although it’s not really as complex to do as one may think - I did a lot of copying and pasting!

Great to hear you are working on a new text effect, @elusien. Will look forward to checking it out when finished.

Beautiful. Great work.:+1::+1::+1:

oh, wow guys! beautiful indeed!

how about starting a curated “awesome” list of stuff one can find here on the forums?

with some code samples and …

In response to @palica
firefox_2019-01-13_09-10-22 firefox_2019-01-13_09-10-41 firefox_2019-01-13_09-10-58

@palica - happy to share the code of this here. Can’t do it right now though, I’ll get to it when I can grab a moment. Thank you for your compliments for mine and @sauron 's demos.

@Hudson555x “Made with shotcut” is nice, but if you don’t have that much experience, then you really don’t know how this can be done. What I was thinking is something like a cookbook or tutorial with simple steps documented. Or a more lengthy description in “Made with Shotcut” and not just “Hey I have made this take a look at: streamable/foobar”. I hope you understand what I am trying to say.

New version of Elusien’s WebVfx framework (with ‘Textflow’ feature) released.

I have put a new release (v1.9) of my WebVfx framework into the WebVfx area of my (redesigned) www.elusien.co.uk/shotcut website. It contains a new feature called “Textflow”, where text flows or rolls onto the page. The idea for this came from a codepen from Mamun Kahandaker for pure CSS text animation (codepen.io/kh-mamun/pen/NdwZdW).

Check it out in the video below.

6 Likes

Love these textflow animations. COOL!!! An excellent addition to making animated titles.

Glad you like them. When I first found then on Codepen I thought they were cool too. They were written purely in CSS and it took me quite a while to translate them into my framework, but it was worth it.

Really cool stuff