Create a Video Text Title with "SQUIGGLY" text

Resources
1

Spice up your video titles with - SQUIGGLY TEXT!
I made a short demo:

How I did it:

  1. Visited https://codepen.io/lbebber/pen/KwGEQv
  2. Downloaded the HTML/CSS folder (zip) and unzipped.
  3. Tweaked the HTML file - copied and pasted the CSS inline, so it works with just the HTML file (no need for a separate CSS file), also added a few more lines and text sizes, and a “blank” line to give a gap between lines.

(Credit goes to Lucas Bebber who wrote the original HTML).

How to use it:

  1. Unzip the attached ZIP file.

  2. Double-click the HTML file. You see the text in your browser. You may need to resize your screen (CTRL/wheel).

  3. Open the HTML file in a text or HTML editor (Notepad, Notepad++ etc), Edit the text in the HTML file with text of your choice.
    3 Either: Run in OBS as a “browser source” and capture the screen as an Mp4 video, or do what I did: capture the screen with ShareX and save as an Mp4 video.

  4. In Shotcut, have your base video (or black colour) on V1. Put the captured Mp4 on V2. Crop off the edges of the capture, if captured with ShareX, with the “Crop:Rectangle” filter.

  5. For the overlaid effect, apply a “Blend Mode:ADD” filter (or you could use a Chroma-Key filter instead) to remove the black and make it transparent.

Here’s the zipped HTML file I used for the “Muppets” video title. Feel free to use it and amend as necessary.

Squiggly Text 02 - HTML file amended by JonRay -The Muppets.zip (1.2 KB)

3 Likes
2

Poor old Beaker. He always means well, but can never avoid disaster. :rofl:

Thanks for sharing this @jonray :+1:
Looks very nice. I will definitely use it at some point :slight_smile:

1 Like
3

You can produce something similar using Shotcut’s “Wave” filter. See below where V1 is a solid colour, V2 is a “Text: Simple” filter on a transparent background and has the “Wave” filter applied to it:

Squiggly_Text
Squiggly_Text1920×1020 88.2 KB

1 Like
4

Good heavens, so you can. Cool!
Also, flying text: :grin:

BTW @elusien, I notice the HTML file uses a “turbulence” filter. 5 in fact, set to different scales. Here’s the first:

   <filter id="squiggly-0">
       <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" 
  seed="0"/>
  <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
</filter>