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