{"id":8993,"date":"2022-10-29T12:44:21","date_gmt":"2022-10-29T12:44:21","guid":{"rendered":"https:\/\/showbizztoday.com\/index.php\/2022\/10\/29\/how-we-brought-2020-wrapped-to-life-in-the-mobile-app\/"},"modified":"2022-10-29T12:44:21","modified_gmt":"2022-10-29T12:44:21","slug":"how-we-brought-2020-wrapped-to-life-within-the-mobile-app","status":"publish","type":"post","link":"https:\/\/showbizztoday.com\/index.php\/2022\/10\/29\/how-we-brought-2020-wrapped-to-life-within-the-mobile-app\/","title":{"rendered":"How we Brought 2020 Wrapped to Life within the Mobile App"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div>\n<div class=\"sd-article-credits--condensed style-module--credits-condensed--2WPbn \"><span class=\"style-module--credits-title--1TUem \">Article credit<\/span><\/p>\n<div class=\"style-module--authorCondensed--2EaMH\">\n<div class=\"style-module--imageContainer--2Zh-_\">\n<div class=\"style-module--image--3NjBj gatsby-image-wrapper\" style=\"position:relative;overflow:hidden\"><noscript><picture><source type=\"image\/webp\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=60&amp;h=68&amp;q=96&amp;fm=webp 60w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=120&amp;h=136&amp;q=96&amp;fm=webp 120w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;h=271&amp;q=96&amp;fm=webp 240w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=360&amp;h=407&amp;q=96&amp;fm=webp 360w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=460&amp;h=520&amp;q=96&amp;fm=webp 460w\" sizes=\"(max-width: 240px) 100vw, 240px\"\/><source srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=60&amp;h=68&amp;q=96 60w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=120&amp;h=136&amp;q=96 120w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;h=271&amp;q=96 240w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=360&amp;h=407&amp;q=96 360w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=460&amp;h=520&amp;q=96 460w\" sizes=\"(max-width: 240px) 100vw, 240px\"\/><img decoding=\"async\" loading=\"lazy\" sizes=\"(max-width: 240px) 100vw, 240px\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=60&amp;h=68&amp;q=96 60w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=120&amp;h=136&amp;q=96 120w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;h=271&amp;q=96 240w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=360&amp;h=407&amp;q=96 360w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=460&amp;h=520&amp;q=96 460w\" src=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;q=96\" alt=\"\" style=\"position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center\"\/><\/picture><\/noscript><\/div>\n<\/div>\n<p><span class=\"t-heading-3 style-module--name--1oiRC\">Cait Charniga (they\/them\/theirs)<\/span><\/p>\n<\/div>\n<\/div>\n<p class=\"t-body-2 sd-article-introduction style-module--introduction--1RjYP\">Every December, tens of millions of Spotify customers all over the world expertise Spotify Wrapped, and replicate on their audio habits from the previous 12 months. To carry this expertise to life, many groups and capabilities inside Spotify rally across the Wrapped marketing campaign with a purpose to ship a pleasant expertise, 12 months after 12 months. In this story, you\u2019ll find out about some methods product design translated necessary items of the 2020 Wrapped model marketing campaign to make them feel and look stunning on Spotify cell apps.<\/p>\n<div class=\"sd-article-body-rich-text\">\n<h3 class=\"t-heading-1\">Brand \u2194 Product<\/h3>\n<p class=\"t-body-3 style-module--text--crr36\">A key a part of working as a product designer on Wrapped is making certain that the app expertise for cell not solely aligns with the better model marketing campaign \u2014 which is led by our Brand and Creative crew 12 months after 12 months \u2014 but in addition efficiently interprets key visible components in order that they&#8217;re <strong>scalable and buildable<\/strong>. For us, scalability means ensuring all the things seems and feels good throughout each cell machine for each single Wrapped consumer. Build-ability goes past time and sources and contains how we use our Encore design techniques, in addition to how designers pair with engineers.<\/p>\n<p class=\"t-body-3 style-module--text--crr36\"><strong>Scalable: Reflected Imagery Effects<\/strong><\/p>\n<p class=\"t-body-3 style-module--text--crr36\">When you open Wrapped in your cell machine, you\u2019re met with imagery of a few of your prime artists \u2014 mirrored and in movement to create a kaleidoscope impact. While our model crew may manually manipulate imagery, we needed to create one thing automated for the cell expertise, that will pull in photographs of <i>any<\/i> consumer\u2019s prime artists. So, we examined some photographs, and created some guidelines.\u00a0<\/p>\n<\/div>\n<div class=\"sd-article-gallery style-module--gallery--2avMJ style-module--gallery1--32RFe\">\n<figure class=\"style-module--figure--2LR11\">\n<div class=\"style-module--image-container--1cGDA\">\n<div class=\" gatsby-image-wrapper\" style=\"position:relative;overflow:hidden\"><noscript><picture><source type=\"image\/webp\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=250&amp;h=235&amp;q=96&amp;fm=webp 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=500&amp;h=470&amp;q=96&amp;fm=webp 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=1000&amp;h=941&amp;q=96&amp;fm=webp 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=1500&amp;h=1411&amp;q=96&amp;fm=webp 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=2000&amp;h=1882&amp;q=96&amp;fm=webp 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=2296&amp;h=2160&amp;q=96&amp;fm=webp 2296w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><source srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=250&amp;h=235&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=500&amp;h=470&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=1000&amp;h=941&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=1500&amp;h=1411&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=2000&amp;h=1882&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=2296&amp;h=2160&amp;q=96 2296w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><img decoding=\"async\" loading=\"lazy\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=250&amp;h=235&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=500&amp;h=470&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=1000&amp;h=941&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=1500&amp;h=1411&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=2000&amp;h=1882&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=2296&amp;h=2160&amp;q=96 2296w\" src=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/50d01N0cFmj3DPrQciennr\/621440939f0ae544f539c5984bb2a41c\/Image_Scale.png?w=1000&amp;q=96\" alt=\"Image Scale\" style=\"position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center\"\/><\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n<div class=\"sd-article-body-rich-text\">\n<p class=\"t-body-3 style-module--text--crr36\">At Spotify, we care deeply about preserving the integrity of photographs that symbolize artists, so we created a rule that when reflecting imagery, we&#8217;d use solely photographs chosen by artists themselves for his or her Spotify profile. We would exclude issues like podcast covers and album artwork as a result of, as you may see within the above instance, photographs that characteristic textual content turn into very muddy and complicated when mirrored and repeated.<\/p>\n<p class=\"t-body-3 style-module--text--crr36\">When creating the kaleidoscope impact you see in Wrapped, we needed to develop a sort of animation that will be possible for our engineering crew to construct. We had been capable of prototype an answer that&#8217;s visually dramatic, however pretty easy to implement. Here, you may see how the animation is damaged down. We use 4 picture masks, with the internal photographs initially offset in the direction of the internal nook. We then transfer the photographs in the direction of the outer nook \u2013 creating that easy kaleidoscope impact. <\/p>\n<\/div>\n<div class=\"sd-article-gallery style-module--gallery--2avMJ style-module--gallery1--32RFe\">\n<figure class=\"style-module--figure--2LR11\">\n<div class=\"style-module--image-container--1cGDA\">\n<div class=\" gatsby-image-wrapper\" style=\"position:relative;overflow:hidden\"><noscript><picture><source type=\"image\/webp\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=250&amp;h=156&amp;q=96&amp;fm=webp 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=500&amp;h=313&amp;q=96&amp;fm=webp 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=1000&amp;h=625&amp;q=96&amp;fm=webp 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=1500&amp;h=938&amp;q=96&amp;fm=webp 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=2000&amp;h=1251&amp;q=96&amp;fm=webp 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=3000&amp;h=1876&amp;q=96&amp;fm=webp 3000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><source srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=250&amp;h=156&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=500&amp;h=313&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=1000&amp;h=625&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=1500&amp;h=938&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=2000&amp;h=1251&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=3000&amp;h=1876&amp;q=96 3000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><img decoding=\"async\" loading=\"lazy\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=250&amp;h=156&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=500&amp;h=313&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=1000&amp;h=625&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=1500&amp;h=938&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=2000&amp;h=1251&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=3000&amp;h=1876&amp;q=96 3000w\" src=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7g3ucIAeVWHIDjQjCkLQyb\/71d082a676c4c9f5b330af3cf1c400e6\/kalaidescope-small.gif?w=1000&amp;q=96\" alt=\"kalaidescope-small\" style=\"position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center\"\/><\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n<div class=\"sd-article-body-rich-text\">\n<p class=\"t-body-3 style-module--text--crr36\"><strong>Scalable: 2020 Wrapped Gradient<\/strong><\/p>\n<p class=\"t-body-3 style-module--text--crr36\">\nAnother central element of 2020 Wrapped was the brand new gradient our model crew crafted, that includes a lot of our Spotify model colours in a stupendous array. The problem right here was to translate our model crew\u2019s easy, editorialized gradient for cell areas. One means we achieved this was by including a blur on prime of the gradient. The blur is added in as a share worth, which adjustments relying on how massive the gradient is (bigger gradients have an 80% blur, the place smaller gradients have a 40% blur)! This helps guarantee the colours keep brilliant when the gradient scales down on smaller gadgets.<\/p>\n<\/div>\n<div class=\"sd-article-gallery style-module--gallery--2avMJ style-module--gallery1--32RFe\">\n<figure class=\"style-module--figure--2LR11\">\n<div class=\"style-module--image-container--1cGDA\">\n<div class=\" gatsby-image-wrapper\" style=\"position:relative;overflow:hidden\"><noscript><picture><source type=\"image\/webp\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=250&amp;h=149&amp;q=96&amp;fm=webp 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=500&amp;h=298&amp;q=96&amp;fm=webp 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=1000&amp;h=596&amp;q=96&amp;fm=webp 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=1500&amp;h=894&amp;q=96&amp;fm=webp 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=2000&amp;h=1192&amp;q=96&amp;fm=webp 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=3000&amp;h=1788&amp;q=96&amp;fm=webp 3000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=3624&amp;h=2160&amp;q=96&amp;fm=webp 3624w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><source srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=250&amp;h=149&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=500&amp;h=298&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=1000&amp;h=596&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=1500&amp;h=894&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=2000&amp;h=1192&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=3000&amp;h=1788&amp;q=96 3000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=3624&amp;h=2160&amp;q=96 3624w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><img decoding=\"async\" loading=\"lazy\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=250&amp;h=149&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=500&amp;h=298&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=1000&amp;h=596&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=1500&amp;h=894&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=2000&amp;h=1192&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=3000&amp;h=1788&amp;q=96 3000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=3624&amp;h=2160&amp;q=96 3624w\" src=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/31qvqMmKm2yuXvLlPw86aw\/61d14ba48ca60c470a67832e368546ad\/Gradient_IMG.png?w=1000&amp;q=96\" alt=\"Gradient IMG\" style=\"position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center\"\/><\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<p class=\"t-body-4 style-module--caption--dSs_k\">Image caption: Notice right here that when the blur stays at 80%, the smaller gradients are much less vibrant in comparison with those the place we modify the blur share!<\/p>\n<\/div>\n<div class=\"sd-article-body-rich-text\">\n<p class=\"t-body-3 style-module--text--crr36\"><strong>Buildable: Wrapped &amp; Encore<\/strong><\/p>\n<p class=\"t-body-3 style-module--text--crr36\">An enormous a part of what makes Wrapped scale so seamlessly is our use of <a href=\"https:\/\/spotify.design\/article\/reimagining-design-systems-at-spotify\" rel=\"noopener noreferrer\" target=\"_blank\"><u>encore parts and types<\/u><\/a>. Every 12 months, Wrapped provides designers at Spotify the chance to evolve and discover our model, and take it in new instructions for the standout marketing campaign second. That being stated, now we have to be sensible about how we discover new model visualizations whereas nonetheless sustaining consistency and protecting Wrapped inside engineering capability. This 12 months, we determined to make use of textual content types and animation curves outlined by our encore cell techniques. By utilizing these established components, we weren&#8217;t solely capable of construct sooner, however we may add a contact of familiarity to how issues moved inside Wrapped.\u00a0\n<\/p>\n<p class=\"t-body-3 style-module--text--crr36\">A brand new strategy we tried out this 12 months was utilizing a Google Sheet to create movement specs for animations inside Wrapped. By adopting this technique, we had been capable of talk higher with our engineers, in addition to specify which Encore easing curves had been for use per component.\u00a0<\/p>\n<\/div>\n<div class=\"sd-article-gallery style-module--gallery--2avMJ style-module--gallery1--32RFe\">\n<figure class=\"style-module--figure--2LR11\">\n<div class=\"style-module--image-container--1cGDA\">\n<div class=\" gatsby-image-wrapper\" style=\"position:relative;overflow:hidden\"><noscript><picture><source type=\"image\/webp\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=250&amp;h=149&amp;q=96&amp;fm=webp 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=500&amp;h=298&amp;q=96&amp;fm=webp 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=1000&amp;h=596&amp;q=96&amp;fm=webp 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=1500&amp;h=894&amp;q=96&amp;fm=webp 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=2000&amp;h=1192&amp;q=96&amp;fm=webp 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=3000&amp;h=1788&amp;q=96&amp;fm=webp 3000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=3624&amp;h=2160&amp;q=96&amp;fm=webp 3624w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><source srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=250&amp;h=149&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=500&amp;h=298&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=1000&amp;h=596&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=1500&amp;h=894&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=2000&amp;h=1192&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=3000&amp;h=1788&amp;q=96 3000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=3624&amp;h=2160&amp;q=96 3624w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"\/><img decoding=\"async\" loading=\"lazy\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=250&amp;h=149&amp;q=96 250w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=500&amp;h=298&amp;q=96 500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=1000&amp;h=596&amp;q=96 1000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=1500&amp;h=894&amp;q=96 1500w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=2000&amp;h=1192&amp;q=96 2000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=3000&amp;h=1788&amp;q=96 3000w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=3624&amp;h=2160&amp;q=96 3624w\" src=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/351UY5sfaMZndcDiVBDb5X\/6e19b7f9b1d4ee802ed29298ff98bc68\/Google_Sheets.png?w=1000&amp;q=96\" alt=\"Google Sheets\" style=\"position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center\"\/><\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n<div class=\"sd-article-body-rich-text\">\n<p class=\"t-body-3 style-module--text--crr36\"><strong>Looking forward<\/strong><\/p>\n<p class=\"t-body-3 style-module--text--crr36\">As we stay up for 2021 Wrapped, we\u2019re already beginning to consider how we will improve the expertise. We wish to enhance scalability and implementation, in addition to accessibility and inclusivity. As the crew answerable for the cell Wrapped expertise, our goal is to proceed pushing towards the aim of making a Wrapped that may be loved and celebrated by each single Spotify consumer.\u00a0<\/p>\n<p class=\"t-body-3 style-module--text--crr36\"><i>To be taught extra concerning the varied groups that contributed 2020 Wrapped head to the Spotify Engineering weblog to learn <\/i><a href=\"https:\/\/engineering.atspotify.com\/2021\/03\/01\/2020-unwrapped-the-people-behind-the-numbers\/\" rel=\"noopener noreferrer\" target=\"_blank\"><i>2020 Unwrapped: The People Behind the Numbers.<\/i><\/a><i\/><\/p>\n<\/div>\n<div class=\"sd-article-credits style-module--credits--1oi8O \">\n<h2 class=\"t-heading-1 style-module--heading--e2RHu\">Credits<\/h2>\n<div class=\"style-module--author--3BdAc\">\n<div class=\"style-module--imageContainer--2Zh-_\">\n<div class=\"style-module--image--3NjBj gatsby-image-wrapper\" style=\"position:relative;overflow:hidden\"><noscript><picture><source type=\"image\/webp\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=60&amp;h=68&amp;q=96&amp;fm=webp 60w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=120&amp;h=136&amp;q=96&amp;fm=webp 120w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;h=271&amp;q=96&amp;fm=webp 240w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=360&amp;h=407&amp;q=96&amp;fm=webp 360w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=460&amp;h=520&amp;q=96&amp;fm=webp 460w\" sizes=\"(max-width: 240px) 100vw, 240px\"\/><source srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=60&amp;h=68&amp;q=96 60w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=120&amp;h=136&amp;q=96 120w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;h=271&amp;q=96 240w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=360&amp;h=407&amp;q=96 360w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=460&amp;h=520&amp;q=96 460w\" sizes=\"(max-width: 240px) 100vw, 240px\"\/><img decoding=\"async\" loading=\"lazy\" sizes=\"(max-width: 240px) 100vw, 240px\" srcset=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=60&amp;h=68&amp;q=96 60w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=120&amp;h=136&amp;q=96 120w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;h=271&amp;q=96 240w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=360&amp;h=407&amp;q=96 360w,&#10;https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=460&amp;h=520&amp;q=96 460w\" src=\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3vkohFjmcbNCUHJxMMfAly\/5ad2e95b8b92236482ab77fe929df56e\/Cait_Charniga.png?w=240&amp;q=96\" alt=\"Cait Charniga (they\/them\/theirs)\" style=\"position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center\"\/><\/picture><\/noscript><\/div>\n<\/div>\n<div class=\"style-module--content--lf_uD\">\n<h3 class=\"t-heading-2 style-module--name--1oiRC\">Cait Charniga (they\/them\/theirs)<\/h3>\n<p><span class=\"t-subhead-2 style-module--job-title--ov2cp\">Senior Product Designer<\/span><\/p>\n<p class=\"t-body-3 style-module--bio--3A7tF\">Cait is a designer by day and an individual with numerous hobbies by evening. They try to design issues which are pleasant and accessible.<\/p>\n<p><a href=\"https:\/\/www.linkedin.com\/in\/caitlincharniga\" rel=\"noopener noreferrer\" target=\"_blank\" class=\"t-ui-4 style-module--link--29Ywk\">Read More<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>[ad_2]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Article credit Cait Charniga (they\/them\/theirs) Every December, tens of millions of Spotify customers all over the world expertise Spotify Wrapped, and replicate on their audio habits from the previous 12 months. To carry this expertise to life, many groups and capabilities inside Spotify rally across the Wrapped marketing campaign with a purpose to ship [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8995,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":{"0":"post-8993","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-spotify"},"_links":{"self":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/posts\/8993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/comments?post=8993"}],"version-history":[{"count":0,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/posts\/8993\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/media\/8995"}],"wp:attachment":[{"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/media?parent=8993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/categories?post=8993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/showbizztoday.com\/index.php\/wp-json\/wp\/v2\/tags?post=8993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}