HN Explorer

2 comments

[ 3.5 ms ] story [ 17.6 ms ] thread
stewdio
This is a fan-made music video for Thom Yorke’s “Black Swan” (2006). This birthday well-wishing is composed of #HTML #CSS #JavaScript for fellow October chaps Thom and Stanley Donwood whom I’ve never met, but have long enjoyed their work. (With a bit of Saul Bass inspiration sprinkled on.) It’s best viewed on a laptop / desktop; may melt phones.

Here’s the “video”: https://stewartsmith.io/blackswan/

Here’s the source code: https://github.com/stewdio/blackswan/

stewdio
Upon each completion of the song, a list of keyboard engagements will be displayed under “Receipt.” This includes both the activations scripted for the animation as well as your own keystrokes and pointer interactions. (You are part of the artwork.) Here is some sample output:

     .     .   .         .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .   w h a t w i l l g r o w c r o o k e d y o u c a n t m a k e s t r a i g h t i t s t h e p r i c e t h a t y o u g o t t a p a y   <OPTION>   <OPTION> .     .   .   d o y o u r s e l f a f a v o u r a n d p a c k y o u r b a g s b u y a t i c k e t a n d g e t o n t h e t r a i n   <OPTION>   <OPTION> .     .   b u y a t i c k e t a n d g e t o n t h e t a r s d f t g y h u j i k o 5 l p 6 7 8 
 9 0 t ⌫ y u i o p 5 6 7 8 9 0 ⌫ t y u i o p 5 6 7 8 9 0 t ⌫ y u i o p 5 6 7 8 9 0 ⌫ t y u i o p a s d f g h j k l 
 n   <OPTION> µ . <SHIFT>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F U C K E D P U   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F U C K E D P U   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     <SHIFT> P e o p l e g e t c r u s h e d l i k e b i s c u i t c r u m b s a n d l a i d d o w n i n t h e b i t u m e n   <OPTION>   <OPTION> .     .   .     <SHIFT> Y o u h a v e t r i e d y o u r b e s t t o p l e a s e e v e r y o n e <SHIFT> B u t i t j u s t i s n t h a p p e n i n g   <OPTION>   <OPTION> .     .   <SHIFT> N o i t j u s t i s n t h a p e n i n g   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F   U C   K . E   D   P .   .       U   .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F   U C   K . E   D   P .   .       U   .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .         .     .   .         .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     O B V I O U S   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     n o i t i s n t b u t i t i s n t b u t i t i s n t