Black Swan
CSS animation
music video
Music video for Thom Yorke’s song “Black Swan”, composed of website elements manipulated in realtime through a mixture of style sheet animation and JavaScript. Created on spec as a birthday present of sorts.
This interactive composition for Black Swan is a tribute to—and modest birthday present for—Thom Yorke and Stanley Donwood who share my birth month of October; the best month. This is also an ode to Web browsers. It was created by myself, Stewart Smith, in Brooklyn, New York during the COVID-19 pandemic / America’s deplorable flirtation with fascism / the early years of the Anthropocene climate crisis. “Fucked up”, as it were. (As this was released a month ahead of the US 2020 election, the original text accompanying this artwork implored US citizens to please register and vote.)
Released in July 2006, The Eraser is Radiohead frontperson Thom Yorke’s debut solo album, produced by Nigel Godrich and featuring visual artwork by Stanley Donwood. Black Swan—the song featured here—is the fourth track from this record.
Rather than a pre-compiled video, this artwork is a real-time animation of DOM elements via Cascading Style Sheets and JavaScript. While the artwork’s browser window is in focus, each keyboard engagement—both the activations scripted for the animation as well as your own keystrokes and pointer interactions—are added to a running transcript. In this way you, the observer, become part of the artwork. The transcript is your personal receipt for the experience. It is unique and for your eyes only. When you close the browser window, it will vanish forever.
Origins
I originally sketched my concept for a “Black Swan” music video in 2006 as screen captures of live typographic performances using the OS X 10.4 Tiger Keyboard Viewer application. Keyboard Viewer, which replaced Apple’s old Key Caps program, highlights keys depressed by the user and displays available characters from the current keyboard palette. Sketches like the clip below were made by recording the screen while typing along to the song as it played back at half speed. Byproduct “receipts” of the live performance were created by capturing the performed typing in TextEdit. Have you ever hit a 14-year pause button on a personal project?
Early sketch using Keyboard Viewer.
Kicking the tires
Yes, each element of this animation is a real
HTMLElement.
(There is no canvas or
WebGL
within this project.) It’s entirely
HTML,
JavaScript, and
CSS. The
composition is stored as keyframes; a queue of functions to be executed
at particular time stamps. The composition summary can be found in blackswan/composition.js.
What’s the current state of the composition’s playback queue? Load up this project, open your browser’s JavaScript console, and enter the following:
console.log( ...comp.inspect() )
Want to see the composition’s entire playback queue?
console.log( ...comp.inspectAll() )
The code for this composition is © Copyright 2020, Stewart Smith. (Hey—that’s me.) It is free, open-source, and available for download and reuse from GitHub. (See license for details.) It was created on my personal computing devices during personal time and is not affiliated with any employers past or present. The audio is owned by XL Recordings and is not available as part of this free code package. Consider purchasing it from them.
███ █ ███ ███ █ █ ███ ██ ███ ██
█ █ █ █ █ █ █ █ █ █ █ █ █ █
██ █ █ █ █ ██ ███ █ █ █ █ █
█ █ █ ███ █ ██ █ █ ███ █ █
███ ███ █ █ ██ █ █ ███ ██ █ █ █ █