I had a couple of hours to spare so I decided to create a 3D-animation of the Shotcut logo. I wrote and tested the HTML/CSS code in just over an hour. I fed it as a browser source into OBS studio and had a video produced in less than 5 minutes. I then spent a couple of minutes tidying it up in Shotcut.
If anyone wants a more detailed description, including the code see my webpage at:
This is nice !
I should get up to date on HTML/ CSS.
I see the cool stuff you post regularly on the forum but I didn’t imagine 3D animation like this was possible with only a few lines of styles and an even shorter list of HTML lines.
Are you sure there’s no java script of flash stuff hidden somewhere?
Nope, none whatsoever. The 3D elements of CSS have been out for quite a few years, unfortunately the WebVfx system in the old versions of Shotcut did not (fully) support this, so it had to be done in a browser or OBS.
The animation part is done by Keyframes, which were available in WebVfx.
Hi @elusien, this passed me by for a few days. Brilliant. I’m using your sample code to dissect how you did it. It’s a masterclass! I’m just about hanging in there in understanding it. Meticulously formatted, too.