Having a video with a black background inside a container with mix-blend-mode: plus-lighter is an awesome idea! I do not know if this is a common way to have a "transparent" video, but I am definitely going to be using it a lot.
This struck me as well. Flash's video format, .flv was transparent out of the box and we used to do a lot of fun things with video floating over flash things.
When flash met it's untimely death, the advertising creatives that I worked spent 10 years asking for solutions that involved transparent video in html; we had to tell them no.
I hadn't really considered that browser blend modes have turned that party back on.
I haven't seen anyone else do it, I feel like browser blend modes in general are kind of not used as much as they ought to be.
I also, on the topic of tech details, make extensive use of the new scroll-timeline stuff which lets you tie CSS animations to the scroll position. it has only landed in chrome at the moment (as of maybe February) so I just use it as a progressive enhancement but it's very cool and performant.
This is wonderful. A shining example of how art can be tailored to its medium, and when doing so, elevates both.
On a side note: many of the pages on the site — with multiple large images, video, and sound — use 1/4th the data than of a standard article on CNN.com without an adblocker, even some with an adblocker.
I'm starting to think that the magic of the '00s Flash era was not just the tool itself, but also that it existed in an era of the web that wasn't completely deluged with platform ads and affiliate links.
idk about all those 90s buzzwords like "multimedia" hah.. but this is a really beautiful art project. Really. The sound/music overlay, various mixed media and styles as you scroll, way you did overlays and motion, storytelling, design, pastiche... like I'm also surprised how good it looks on a phone, but it's not so much the technical skill which is obvious, but the way you put it together and the choices you made about imagery and design. It's really lovely. This should be used as a teaching example to show people what can be done building their own art on the web. I guess that's a 90s idea (but oil painting is a much older idea, and people still spend years or lifetimes to become good painters whose paintings are not just skillful but meaningful and speak to people).
I scrolled through more of this than I was expecting to and listened to several of the songs. Very well done. The writing and imagery really pulled me in.
My guess was that feDisplacementMap was used for the ink-gain effect on the About page (try highlighting the text!), but I was delighted to see that it's a combination of CSS blur(), contrast(), and brightness() filters against a tiled blue-noise background.
This level of detail, especially when it's implemented in a performant way, really elevates the webcraft here. To the author: nicely done.
