YouTube “Broken TV” Effect


Shamelessly captured the canvas using FSCapture, I’ve later-
– trimmed the wmv video (to have just “one cycle”, where the rectangle-blur goes from top to bottom),
– exported the video frames to low-res GIFs, and joined them together with some color fixing with convert from imagemagick.org using convert -background black -alpha remove -layers OptimizePlus -delay 5 *.gif -loop 0 animated.gif.

the result was looking as nice as the original, but optimising it using
convert animated.gif -deconstruct -layers optimizePlus -colors 8 -transparent black -fuzz "20%" -fill none -background none animated_opt.gif
helped to reduce the overall size from 3MB to about 1.5MB.

since the background colors are not really black (“r0g0b0”) the fuzz will help to consider close-colors as equal..

the overall process of covert is very order-specific,
so by switching around the command-arguments to:
convert animated.gif -deconstruct -fuzz "5%" -colors 8 -transparent black -layers optimizePlus -fill none -background none animated_opt.gif
and applying a a stronger optimisation, but with a more tolerant color comparison algorithm, I’ve ended up with about 1.30MB result, with most of the dark background removed.

this allows to use a CSS3 background-color along with the gif, set as background-image,
with few additions to center the gif, and stretch it the result will fit most containers nicely (and perfectly for 16:9 containers.. since that is the original ratio)

here is a usage example:

.container{
    background:  blue url(http://localhost/animated_opt.gif) no-repeat center center;
    background-attachment: fixed;
    background-origin:     border-box;
    background-clip:       border-box;
    background-size:       cover;
}

Download the frames, animated gif and optimised version in here:
http://icompile.eladkarako.com/wp-content/uploads/2017/07/frames_animatedgif_optimisedgif.7z