---
title: "BRAND Spotify 2026 · Recipe: scroll-sections"
url: https://memocore.ai/memos/6ae42ecdcb977478f04eb81d
project: "Brand Styles"
tags: "brand-spotify"
updated_at: "2026-10-30T05:56:05.655Z"
---

# BRAND Spotify 2026 · Recipe: scroll-sections

HEADER
brand: Spotify; design_date: 2026-10; kind: effect; used_in: Page: product-marketing S3-S9
captured: https://www.spotify.com/us/premium/ 2026-10-30, US via Google Translate proxy; proof: "country":"US", "market":"us", USD prices
evidence: measured on that URL unless marked; values from premium.voyager GSAP code and CSS modules

LOOK
Long marketing page where the whole background changes colour between chapters, from near-black to saturated violet and back. Large rounded colour cards pin in the center and shrink slightly as the next card slides over them, like a deck. A photo stack changes as you scroll with a caption that rises in, and a row of event photos drifts sideways.

STRUCTURE
#bg-container wraps sections that define a background colour; each section is a trigger. FeatureCard list items are stacked in flow, each pinned with no pin spacing. Stacked gallery: 36% text column, 64% image stack on the right. Scrolling gallery: full-width clip wrapper with an inner moving row.

KEY PARAMETERS
background colours seen: #121212 (default), #4100f4 (S8 and S9)
feature card: desktop base 1408x640, aspect-ratio base-width / base-height, height 640 base, graphic column 800/1408 of the width, radius --encore-spacing-looser (24 desktop, 20 mobile); mobile height 500, graphic 318 tall with a bottom gradient 116px to the card colour
card colours from data: Reserved #576dd6; DJ #0d72ea; Watch #d64000; Jam #cc2faf; Blend #088569; content cards #035341 with icons #10b28e
card gap: margin-bottom --encore-spacing-looser-2 (32)
group padding: mobile 96, tablet 128, desktop 256 unless overridden; header padding-block-end 80
stacked gallery: spacing 40; off-screen 400; heights 100%, calc(100% - 20px), calc(100% - 40px); margins 0, 10, 20; image radius 24, aspect 4/3; stack width calc(100% - 80px), margin-left 80
scrolling gallery: min-height 100vh, margin 100px auto; caption 16px, margin-top 16; photo radius 8; mobile portrait height 200, landscape 250

MOTION
background: gsap.to(backgroundColor, 0.8s, power2.out); ScrollTrigger start top center, end bottom center, on enter and enter back
feature cards: each card timeline ScrollTrigger start center center, endTrigger last card, end center center, scrub true, pin on desktop only, pinSpacing false; every card except the last goes to scale 0.92 (duration 1 in scrub space)
stacked gallery: pin, trigger center center to bottom+=500% center, scrub true. Text index changes at progress 0.14 and 0.53, images at 0.33 and 0.80. Each text change: opacity 0, y 80 -> opacity 1, y 0, 0.6s power2.inOut
scrolling gallery: GSAP horizontal loop helper, ease none, repeat, speed 1 (100 px per second base)

STATES
hover: none on the cards (est)
touch and mobile: feature cards are not pinned; the stacked gallery stacks vertically
reduced motion: all triggers skipped; the gallery becomes a native horizontal scroll with overflow-x scroll; background stays at the first colour

HOW TO BUILD
Keep one fixed colour container behind the sections and tween its colour when a section crosses the viewport center. Pin cards with scrubbed scale. Drive stacked images from scroll progress segments.

PITFALLS
The colour change is time-based (0.8s), not scrubbed. Pin spacing must stay off or the deck gets gaps. Scale goes to 0.92, not lower.

SCREENSHOTS
- file: spotify_2026_feature-card-stack_d1440_cards.jpeg
  shows: orange card pinned over the shrunk blue card at scroll 5200, viewport 1440x900
  source: live via US proxy 2026-10-30
  key values: card radius 24; colours #0d72ea, #d64000
  do not copy: illustrations and copy
- file: spotify_2026_product-marketing_d1440_s8-stacked.jpeg
  shows: end of the stacked gallery on violet background at scroll 9700
  source: live via US proxy 2026-10-30
  key values: background #4100f4
  do not copy: photos
- file: spotify_2026_product-marketing_d1440_s9-gallery.jpeg
  shows: drifting event photos at scroll 10700
  source: live via US proxy 2026-10-30
  key values: photo radius 8; caption 16px
  do not copy: photos