Bad Apple!! but it's pure CSS Animations
I was wondering whether or not it would be possible to convert an FMV to a bunch of CSS animation statements and then use a basic HTML scaffold to play it. Turns out, you can*.
I had to add the audio after the fact, as I had no way of reliably synchronize it with the animation...
*Well... kinda. This is Bad Apple converted to CSS Animations. The video is split up into it's individual pixels at a set resolution, each pixel represented by a single CSS @keyframes tag. The HTML then plots these pixels in a grid predetermined in my script generating these files.
I limited it to a resolution of 120x80 pixels and a maximum of 20 keyframes per second. Anything more and the resulting CSS would basically bring Firefox to crash. Seems like the hard limit for CSS file sizes (at least in the case of Firefox) seems to be 400MB xD
I haven't tried Chrome much, as my first Attempt with the whole Video already made Chromium beg me to stop. It basically skipped the first 20-30 seconds of the video and instead of playing it at the intended 5 keyframes per second at 160x120 (what I tested at first), it rendered the animation at something closer to 1-2fps.
Firefox came through and even played the 20 keyframes per second here at what seems like almost (if not actually) 20-30fps.
The smeary-ness at some points of the video comes down to the browser trying to render in-between frames to make the "animations" more smooth. I can't prevent this from happening.
If you want to play around with the tool I made for this, it's on GitHub: https://github.com/Chickenbreadlp/Seq...
It can be used with basically any Image sequence, they will however be converted to Grayscale.
You can download the rendered HTML and CSS I used in this video here: https://mega.nz/file/T15gTYpD#Vi4CbvR...
I used the 15x Zoom, as that filled the screen the most on my 1440p monitor without cutting anything off.
The original PV: • 【東方】Bad Apple!! ＰＶ【影絵】