Free resource - a set of Black and White (Matte) overlay videos for a revealing block effect

Hi folks - I’ve created a set of black and white (matte) OVERLAY videos so users can easily create this type of effect:

Download the overlay videos for free HERE:


  1. Put any photo or video on track V1.
  2. Select one of the overlay videos and place on V2.
  3. Apply a BLEND MODE filter to the overlay video and select MULTIPLY from the drop-dowm menu.
  4. Adjust the speed you want the boxes to reveal by adjusting the speed of the overlay video. (properties > speed).
  5. If you want the middle part of the effect (when all boxes have been revealed) to be longer, cut out (split in two places) the middle section of the overlay video then shove the last section along the timeline and copy/paste the middle section as many times as you require for the duration you want.

That’s it - enjoy!


Waiting for your access authorization…

1 Like

Hi @MusicalBox, it should be available for anyone with the link. Try it again now…

Yep, I’m in. Thanks!

I took them all mouhahaha

1 Like

LOL what a thief!! (You are welcome!!) :grinning_face_with_smiling_eyes:

1 Like

Folks - I should have mentioned - these are designed for use in projects with a video mode of 1920 x 1080 (HD).

They are very nice, thanks for shareing,

How did you make them ?


Hi @TimLau - short answer - lots of blood, sweat and tears!
Long answer:
Stage 1 : made this 40px border png (black background on V1, white rectangle on V2, export as frame:

and these two pngs:

Stage 2: Got out calculator and stacked the above images precisely using blend mode: multiply on multiple tracks, exported frame to get this:

Imported this grid into new project, then covered up squares then exported as frames one by one to get 15 images thus:

Stage 3: 15 SC tracks, stacked pngs on top of each other (Blend mode: multiply) and made them appear one after the other in an artistic way. Exported as an Mp4. For the outro I imported the Mp4 and selected “Reverse”, then exported.
Finally reimported and placed the reverse video after the original.

Stage 4: Lie down and enjoy a cup of tea. Bliss.
cuppa tea

Hope this helps!


Comment fait-on pour passer directement de l’étape 1 à l’étape 4 ?

How do I go directly from step 1 to step 4? :beach_umbrella: :sunglasses:

1 Like

Facile! Téléchargez simplement mes fichiers gratuits!

Easy! Just download my free files! :rofl: :rofl:


Pretty cool @jonray I’m looking forward to seeing what I can do with this type of effect.

Thank you for the continued free resources!

It’s great. I’m going to use them! I hope I get it right!
Thank you very much! @jonray

1 Like


1 Like

Wow! Ben Spectacular! :grinning_face_with_smiling_eyes: How are you?

1 Like

I’m good! Just super busy. How are you?

1 Like


@jonray I have created a (fairly) simple HTML file to produce an animation of squares (similar to yours, like opening and shutting panes in a window). I call it “Window Panes” or a “Jonray Grid”.

It is parameterized. By default white panes appear with black surrounds. You can change the color(s) e.g. to create a green-screen animation. You can record this animation (e.g. using the HTML as a browser-source in OBS Studio, or by using a screen recording app like Sharex) and then use the resulting video as a black and white overlay in a video editor such as Shotcut, using the “Multiply” blend mode.

The parameters are:

    let opening_order = [12, 9, 2, 15, 6, 11, 10, 1, 7, 14, 3, 5, 13, 4, 8]; /* THERE SHOULD BE (cols x rows) VALUES AND NO DUPLICATES */
	--width                : 1920px;
	--height               : 1080px;
	--scale                : 0.5;			/* Scale factor that alters the size of the animation to (width x scale) : (height x scale) */
	--cols                 : 5;				/* Number of columns across */
	--rows                 : 3;				/* Number of rows down */
	--total_duration       : 3;				/* Number of seconds to open the panes, then no. of secs to stay open, then no. of ses to close the panes */ 
	--border_outside       : 40px;			/* Width of the border outside (the actual width is the sum of this value and "border_inside")*/
	--border_inside        : 10px;			/* Width of the borders inside (the struts are actually 2 times this wide) */
	--border_color         : #000000;		/* Color of the border */
	--pane_color_shut      : #000000;		/* Color of the window pane when shut */
	--pane_color_open      : #FFFFFF;		/* Color of the window pane when open (for a green-screen video use something like #00FF00)*/

The “scale factor” enables you to produce smaller videos, still in the same aspect ratio and when you open them as a clip in a full-size project Shotcut will resize the clip for you.

Just click on the HTML file link below then right-click and choose “View Page Source” and copy-paste it. - Enjoy


Super :+1:
Merci pour le partage.
Que faudrait-il ajouter ou modifier dans ce fichier pour pouvoir l’utiliser directement avec le filtre “Superposition Html” des versions V20 de SC?

Great :+1:
Thanks for sharing.
What would need to be added or changed in this file to be able to use it directly with the “Html Overlay” filter in the V20 versions of SC?

1 Like

That’s just fantastic, @elusien!! Wow. I haven’t had a chance to test it yet, but a question: would it be possible to allow the white panes to fade in from black, and also be able to control the speed of fade? That would be cool! Apologies if you’ve already made that available. I only just read your post and responded without examining your code.