BRAND Spotify 2026 · Recipe: card-shelf

HEADER brand: Spotify; design_date: 2026-10; kind: component; used_in: Page: home, Page: artist, Page: search-results captured: https://open.spotify.com/ 2026-10-30, Japan (market JP) by direct connection with the user's agreement; content is Japanese, the UI language is English. Through the US proxy the config says market US but the shelves are the same Japanese content, because the API is called from the browser. evidence: timings recorded live from transitionrun events and getAnimations() on that URL unless marked; (code) = read in CSS or JS, not seen live LOOK Horizontal rows of square covers on the dark main view, each with a title and a grey subtitle below. On hover a soft grey plate grows out from behind the card and a round green play button rises into the lower right corner of the cover. Round chevrons fade in at the row edges, and a dark fade covers cut-off cards. Clicking a chevron glides the row by three cards. STRUCTURE section shelf: header row (title link left, "Show all" right), carousel. Carousel: relative overflow hidden wrapper; scroller; absolute overlay with two chevrons. Card: box with ::after plate, invisible click layer, cover with shadow, play button wrapper, title link, subtitle links. KEY PARAMETERS card at 1440 with 331 sidebar: 195.5 x 252, padding 12, cover 172 x 172, radius 6 cover: background --card-color (extracted colour, default #333), padding-bottom 100%, shadow 0 8px 24px #00000080; artist cards radius 50% gap image to title 8; title body-medium 16/400 white, clamp 2; subtitle body-small 14/400 #b3b3b3, clamp 2 plate: ::after, at rest inset 12 and transparent; hover inset 0 and #1f1f1f play wrapper and button: Recipe: play-button shelf header: h2 24/700 SpotifyMixUITitle; "Show all" 14/700 #b3b3b3 edge fade: pseudo 120px wide, full height, linear-gradient(-90deg, rgba(18,18,18,.7), transparent) measured on the live page; left one mirrored chevron: 32 circle, bg #1f1f1f, hover #2a2a2a, icon opacity .7 -> 1, 8px inset from the edge on hover (code) scroll step: 587px at 1440 = 3 cards MOTION: interaction records - id: card.hover element: card plate, play wrapper trigger: pointer enter on the card open: ::after top, right, bottom, left 12px -> 0, and background-color transparent -> #1f1f1f, all 200ms, delay 0, cubic-bezier(.3,0,0,1). Play wrapper translateY(12px) -> 0 and opacity 0 -> 1, 200ms, ease-out close: same properties and durations reversed switch: an interrupted transition reverses from its current value with a shorter time: plate from 5.57px back to 12px in 107ms, wrapper opacity from .38 to 0 in 76ms keyboard: focus inside the card shows the play button (code); card outline 2px white, offset -2 (code) touch and mobile: play wrapper display none under pointer: coarse (code); the mobile web player has flat cards 152 wide, radius 4, swipe only, no plate reduced motion: play wrapper transition exists only under no-preference, so it appears without animation (code) - id: card.press element: plate trigger: pointer down on the card body open: ::after inset -> -4px, background-color -> #000000, on the same 200ms curve (code; :active cannot be held in a capture, the sheet applies these values) close: release navigates to the item - id: card.links element: title link, subtitle link, Show all trigger: hover open: underline appears instantly with no transition; title stays #fff, subtitle stays #b3b3b3, Show all goes #b3b3b3 -> #fff close: instant - id: shelf.chevrons element: chevron overlay trigger: pointer enters the carousel open: opacity 0 -> 1, 150ms, ease-out close: opacity 1 -> 0, 150ms, ease-out children: chevron hover: background #1f1f1f -> #2a2a2a, 150ms ease-out (code); icon opacity .7 -> 1 - id: shelf.scroll element: scroller trigger: click on a chevron open: native smooth scroll, moves 587px in about 530ms: scrollLeft at about 75ms steps was 17, 279, 449, 533, 565, 583, 587 (fast start, long settle) children: new covers fade opacity 0 -> 1, 250ms, ease-out, as they load; the previous chevron and left fade appear through a scroll-driven animation on timeline --carousel-scroller (opacity 0 -> 1, fallback .15s ease-out) switch: scroll-snap-type inline mandatory, cards snap to their start edge touch and mobile: swipe reduced motion: scroll-behavior smooth exists only under no-preference (code) - id: card.top-result element: larger card on the search page, 392 x 225, radius 8 trigger: hover or focus inside open: background #181818 -> #282828, 300ms, ease, no inset growth; play wrapper translateY(12px) -> 0 and opacity 0 -> 1, 300ms, ease close: reversed STATES Hover, press, focus: above. Touch: above. Loading: --card-color block before the image, then 250ms fade. Selected: n/a. HOW TO BUILD CSS only: pseudo element plate animating inset and background, a wrapper with opacity and transform for the play button, scroll snap for the row. Edge fades with scroll-driven animations, or a small script toggling a class. Keep the two curves separate: productive on the plate, ease-out on the button. PITFALLS The plate must grow from inset 12 to 0, not fade in at full size. The play button appears on the cover, not on the plate. The button is green at rest even though the rest of the card is grey. The rise is 12px at run time, though the CSS file says translateY(8px). Plate is 200ms, the button inside reacts at 50ms: the button on the cover responds faster than the card. Edge fade is 70% dark, not solid. SCREENSHOTS - file: spotify_2026_card-shelf_d1440_hover.jpeg shows: first card hovered with plate and play button, right chevron visible, 1440x900 source: live, Japan market, 2026-10-30; cookie banner hidden from script key values: plate #1f1f1f; button hover #3be477; cover 172 radius 6 do not copy: covers, artist names - file: spotify_2026_home_d1440_top.jpeg shows: the same shelf at rest source: live, Japan market, 2026-10-30; cookie banner hidden from script key values: card 196 x 252 do not copy: covers