My new SQUARES grid matte overlay video for enhancing a wipe transition

Tutorial
#1

Good heavens, it works!! My latest idea!! Woo HOO (excited)…

So I took my “grid” mask idea and took it a stage further, creating this Matte (black and white) video:

I made it with an HTML/CSS file. Then I captured it an saved it as an MP4 using @elusien’s OBS method.

In Shotcut, I imported this matte video onto V2. Then, on V1 I dragged out a transition between 2 clips (the same length as the matte video) and applied a Diagonal Top Right transition, set to “Invert”, with softness cranked up to full.
Then I applied a Blend Mode (ADD) filter to the matte clip:

shotcut timeline snip
shotcut timeline snip852×425 32.3 KB

and this is the result:

I have plans to make similar variants of the matte file by tweaking the HTML, but first I’m going to use this transition for my next “flute” video. I’ll post it when finished…

If anyone would like the matte video and/or HTML file, just holler.

6 Likes
My latest "flute" music video, "Sunset Over a Distant Horizon"
#2

That looks very nice @jonray !
Will experiment with it tonight.
Thanks!

1 Like
#3

Great! Would you like the squares mp4 or can you get it from YT?

#4

Here it is anyway!

https://drive.google.com/drive/folders/1L796OsDhGYwiwHJkSbZMT3uhzMQ06ROA?usp=sharing

#5

I got it from YouTube, but I guess the original file will be better.
We’ve all heard horror stories about what atrocities YouTube does to video clips.
Thanks! (again)

1 Like
#6

Jon, could I get a copy of the HTML file please?

1 Like
#7

Hi @elusien, here it is (remove the fake .txt extension). To your expert eye you’ll notice it’s untidy code with lots of unused keyframes etc. - because I’m experimenting with other variations. Also, I’m sure I could have condensed the code a lot - or done it in a better way - I created it using my amateur coding logic!

JonRay SQUARES ( 5 x 3 grid) transition animation B+W matte 01.html.txt (8.7 KB)

I also created each square as a separate div and positioned it with absolute position. I’m sure I could have used display:grid; but I wasn’t sure how to !

Also, I decided for each square to nest each black square (div) inside a white square (div) with 100% width and height, so I can experiment with moving the black square around and applying overflow:hidden; to make different variations.

Another point - I used the “column select” feature (alt + select) in Notepad++ in conjunction with the column/multi-selection editor(alt+c) to easily input the incremental values.

I have a question - when I record this using OBS, I get scroll-bars. How do I amend the code so there are no scroll-bars? Thanks for taking a look!

#8

Thank you so much for your sharing!

1 Like
#9

Jon, thanks for the HTML file, I’ll use it in one of my videos. I did a bit of a tidy-up and converted it to use “display: grid”. It was quite easy to do this, the code being:

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;	/* 5 columns */
grid-template-rows   : 1fr 1fr 1fr;			/* 3 rows    */

I also made the CSS more concise by giving each black square an “animation position” CSS variable (–P) and then there was only need for 1 animation declaration:

animation: move2    1.5s ease calc(0s + (var(--P) * 0.1s)) 1 normal forwards,
           fade_out 1.5s ease calc(0s + (var(--P) * 0.1s)) 1 normal forwards,
		   move4    1.5s ease calc(1s + (var(--P) * 0.1s)) 1 normal forwards,
		   fade_in  1.5s ease calc(1s + (var(--P) * 0.1s)) 1 normal forwards

You can then change the order of the animated squares just by changing the positions.

I tried it in OBS And it works without showing any scrollbars, which of course is as it should be. However, I tried your original and that didn’t show scrollbars either. Are you sure you’d set the output to 1920x1080? Try my changed version - below - and let me know how you get on.

JonRay SQUARES ( 5 x 3 grid) transition animation B+W matte 02.html.txt (3.5 KB)

1 Like
#10

Brilliant as ever - thank you so much for the amendments your Royal Highness :rofl:!!!
I’ll try your amended version later today.

#11

Works perfectly! Excited! Thank you! PS still getting scroll-bars with mine (not yours).

OBS scroll bars
OBS scroll bars1276×962 54.3 KB

Settings ARE set for 1920 x 1080:

OBS settings
OBS settings1280×238 25.6 KB

#12

Just a thought: I’d set my dimensions as:

  width:385px;
  height:361px;

(which is 1 pixel more than the calculation (1920 / 5 = 384, 1080/3 = 360) because I was getting that odd 1 pixel line appearing. Could that be something to do with it?

#13

Not sure why it worked for me with OBS using your version. Mine used the the unit “1fr”, which means “1 fraction”, so 3 x 1fr means each div is 1/3 of the whole, rather than an exact pixel count.

Just a thought - try adding the following line at the front of your CSS styles:

   html, body {margin: 0; padding: 0;}

and see if that solves the problem.

1 Like
#14

Thanks @elusien - I already had:

      (asterix) {margin: 0; padding: 0;}

in the code, so it wasn’t that. However, I just got a chance to try it, and I just fixed it by, as I wondered, changing the square size to

  width:384px;
   height:360px;

(exact divisions of 1920 and 1080).
It works now! Thanks for your help. The display:grid and the variable (–P) is awesome! I learned a lot!