{"id":1785,"date":"2021-04-29T13:35:29","date_gmt":"2021-04-29T13:35:29","guid":{"rendered":"http:\/\/donovanbrien.com\/db\/?p=1785"},"modified":"2024-05-02T06:15:29","modified_gmt":"2024-05-02T06:15:29","slug":"hskt","status":"publish","type":"post","link":"https:\/\/donovanbrien.com\/db\/hskt\/","title":{"rendered":"hskt"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>For the launch of Sylvan Esso&#8217;s new remix album (HSKT), we created an interactive music video that fans could remix themselves. The design direction focused on the concepts of refraction and augmentation \u2014 cutting the song and video up to create new visuals and melodies.<\/p>\n\n\n\n<p>Designed as a desktop experience, the site used keystrokes to control different visuals and instruments. Each instrument and video element used a carefully constructed grid that allowed for instrument combinations to form compositions that worked \u2014 no matter what instruments were played.<\/p>\n\n\n\n<p>The code also automatically snapped each audio \/ visual element to the beat of the song, ensuring users could easily remix even without a musician&#8217;s rhythm. Additionally, the website allowed users to record and share their remixes. This pushed users to create and share more, which unlocked further color schemes.<\/p>\n\n\n\n<p>Special thanks to my brother, Steven Brien, who custom coded the website, and Elias Stern who helped with the motion design.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls poster=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/04\/poster-img_00.jpg\" preload=\"auto\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/04\/Sylvan-Esso_Video-Site_Demo-Video_1080p_v01_rev2.mp4\"><\/video><\/figure>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_03.jpg\" alt=\"\" class=\"wp-image-1789\" srcset=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_03.jpg 1920w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_03-300x169.jpg 300w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_03-768x432.jpg 768w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_03-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_02.jpg\" alt=\"\" class=\"wp-image-1788\" srcset=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_02.jpg 1920w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_02-300x169.jpg 300w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_02-768x432.jpg 768w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_02-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay loop muted poster=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/poster-img_02.jpg\" preload=\"auto\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/HSKT_Samples_Condensed_02.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_06.jpg\" alt=\"\" class=\"wp-image-1792\" srcset=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_06.jpg 1920w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_06-300x169.jpg 300w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_06-768x432.jpg 768w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_06-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_01.jpg\" alt=\"\" class=\"wp-image-1787\" srcset=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_01.jpg 1920w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_01-300x169.jpg 300w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_01-768x432.jpg 768w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_01-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay loop muted poster=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/poster-img_03.jpg\" preload=\"auto\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/HSKT_Samples_Condensed_03.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_04.jpg\" alt=\"\" class=\"wp-image-1790\" srcset=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_04.jpg 1920w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_04-300x169.jpg 300w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_04-768x432.jpg 768w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_04-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_05.jpg\" alt=\"\" class=\"wp-image-1791\" srcset=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_05.jpg 1920w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_05-300x169.jpg 300w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_05-768x432.jpg 768w, https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/Sylvan-Esso_05-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay loop muted poster=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/poster-img_01.jpg\" preload=\"auto\" src=\"https:\/\/donovanbrien.com\/db\/wp-content\/uploads\/2021\/06\/HSKT_Samples_Condensed_01.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For the launch of Sylvan Esso\u2019s remix album (HSKT), we created an interactive music video that allowed fans to remix the video themselves.<\/p>\n","protected":false},"author":1,"featured_media":1786,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1785","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-work","post_format-post-format-image"],"_links":{"self":[{"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/posts\/1785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/comments?post=1785"}],"version-history":[{"count":25,"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/posts\/1785\/revisions"}],"predecessor-version":[{"id":2060,"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/posts\/1785\/revisions\/2060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/media\/1786"}],"wp:attachment":[{"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/media?parent=1785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/categories?post=1785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donovanbrien.com\/db\/wp-json\/wp\/v2\/tags?post=1785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}