BRAND Mailchimp 2026 · Recipe: marquees

HEADER brand: Mailchimp; design_date: 2026-10; kind: effect; used_in: BRAND Mailchimp 2026 · Page: home S4 (customer logos) and S8 (integrations) evidence: read from logo_carousel-less.6ad23932.1.css, marquee_carousel-less.e0aeba1d.1.css and the marquee chunk 9645.26179f4061eb19da.1.js (entrance delays), checked with computed styles and screenshots on https://mailchimp.com/?currency=USD at 1440 and 390, 2026-10-06 unless marked LOOK Logo strip: a white band with a single row of large black customer wordmarks gliding slowly to the left without end; it stops when hovered. Integrations: a centered serif headline, a one-line description and an arrow link, then three full-bleed rows of white rounded tiles (logo square on the left, app name and a one-line benefit on the right) floating on soft shadows. The middle row drifts left while the outer rows drift right, each at a slightly different speed and starting offset, so the tiles never line up. When the section scrolls into view the heading fades up first, then the rows appear one after another. Hovering a tile pauses all rows and deepens that tile's shadow. STRUCTURE logo strip: module (bg #ffffff, padding 64px 0); carousel wrapper inline-flex; two identical groups (min-width 100% each) side by side, each a space-around flex row of logo images integrations: module max-width 1280px centered, padding 120px 0 (56px below 768); header (H2, description, ctaArrow) centered; marquee full-bleed (width 100vw, margin-left calc(50% - 50vw), overflow-x clip, 80px below the header); 3 rows, each a track of two identical sets of tiles (gap 24px, set padding-right 24px) KEY PARAMETERS logos: image height 62px, margin-right 55px; group gap var(--gap) = size/14 (about 4.3px); monochrome black wordmarks (Spotify, BodyArmor, Gap Inc, Canva, ReMax West Realty, The Onion, World Central Kitchen, Subway at capture) integrations headline: Means 40px/45px #000000 (28px mobile), 24px below; description Graphik 20px/32px (16px/20px mobile); CTA ctaArrow "View all integrations" tile: 414 x 112px (25.875rem; 290px wide mobile), padding 16px (12px mobile), radius 16px, gap 16px, background transparent over the white page (var(--color-background-surface) is undefined), shadow 0 15.5px 44px rgba(0,0,0,.086) (measured computed) tile logo box: 80 x 80px (56px mobile), bg #f0f4f6, radius 4px, padding 16px 8px, logo contain tile text: name Graphik 16px/32px 500; descriptor 14px/20px (secondary text color) rows: vertical padding 12px each (24px between tiles); row 1 offset margin-left -228px, direction right (translateX -50% -> 0), 45s; row 2 offset -541px, direction left (0 -> -50%), 55s; row 3 offset -309px, direction right, 50s; mobile durations 90s, 110s, 100s; z-index 1/2/3 speed at 1440: about (set width)/45s, roughly 50-60 px/s (est) MOTION logo strip: @keyframes scroll-x translateX(0) -> translateX(calc(-100% - gap)), 60s linear infinite; hover on the wrapper pauses (animation-play-state paused) marquee rows: @keyframes marquee-left / marquee-right over -50% (one set width), linear infinite; :hover or :focus-within on the marquee pauses all tracks; clicking a tile also pauses (class marqueeCarousel--paused) tile hover: box-shadow -> 0 8px 51.8px rgba(0,0,0,.25), 200ms; focus-visible outline 2px #00d0e0 offset 4px entrance (IntersectionObserver threshold .1, once): header opacity 0, translateY(24px) -> 1, 0 at 0ms, 500ms ease-out; rows opacity 0 -> 1, 400ms ease-out, delays 150ms, 250ms, 350ms (150 + 100 x index) reduced motion: logo strip static; integrations become a static grid (3 columns, 2 below 1024px, 1 below 768px with only the first 2 tiles), header visible, no animation STATES hover pauses; focus within pauses; touch: rows keep moving (no hover), tap opens the integration page; off-screen: CSS animation keeps running (no JS pause) HOW TO BUILD Duplicate each row's content twice in a max-content flex track and animate translateX between 0 and -50% linearly; give each row its own duration, start offset and direction. Pause with animation-play-state on hover. Reveal the header and rows with an IntersectionObserver adding a show class with 0/150/250/350ms delays. PITFALLS all rows at the same speed or direction; tiles with borders (they are borderless, shadow only); fast scrolling (45-60s per loop); forgetting the doubled set (visible jump at the loop); colored partner logos in the customer strip (they are black wordmarks); 100vw width causes about 8px horizontal page overflow where scrollbars take space (it does on the live site at 1440 on Windows) SCREENSHOTS - see BRAND Mailchimp 2026 · Page: home full-page captures (mailchimp_2026_home_d1440_full.jpg rows at about y 4614-5419; mailchimp_2026_home_m390_full.jpg) for both strips at rest do not copy: customer and partner logos; use [LOGO] placeholders