Animated video backgrounds via a Web Component and ColorThief / / No Comments Earlier this year, the epic ColorThief library had a pretty significant update. I blogged about a simple demo I built with it but I was fascinated by one particular demo on their site. The "observe" function in ColorThief lets you monitor a video source and grab the colors at a particular frame. Their demo uses this to create a lovely shadow background of the video. I believe some TVs have this feature as well, and honestly I’d worry that would get annoying, but the ColorThief demo was pretty cool, so I thought I’d try to build it with a web component. The idea would be – take any basic video element and wrap it like so: <video-bgshadow> <video controls width="250">... more → Posted in: JavaScript Tagged with: Animated, backgrounds, ColorThief, Component, video
The Musical Animated Train Map / / No Comments Tokyo’s train stations are famous for their departure melodies – short musical jingles that play when a train leaves a station. Each station on the city’s extensive rail network has its own distinctive tune, creating a unique soundscape that signals the start of a journey. These melodies are designed to soothe passengers, catch attention, and add a touch of local character to the daily commute. Maps Mania… more → Posted in: Interactive Maps Tagged with: Animated, Musical, train
How to Reverse an Animated GIF / / No Comments Modifying visual media via code has always been a fascination of mine. Probably because I’m not a designer and I tend to stick to what I’m good at. One visual effect I love is seeing video reversed — it provides a sometimes hilarious perspective on a given event. Take this reversed water effect for example: To reverse an animated GIF or video, you can use the ImageMagick library: convert water-forward.gif -coalesce -reverse -quiet -layers OptimizePlus -loop 0 water-reversed.gif If you’re interested in media engineering, check out my previous ImageMagick tutorials. These awesome media libraries are as close to an artist I will ever get! The post How to Reverse an... more → Posted in: JavaScript Tagged with: Animated, Reverse