BRAND Stripe 2026 · Recipe: hero-wave

HEADER brand: Stripe; design_date: 2026-09; kind: effect; used_in: Page: home S2 (hero), Page: home S9 (developers band, second wave), Page: product-marketing S1 (behind the hero graphic) evidence: placement, sizes, fallback and layering measured from stylesheets and HTML (2026-09-25); colors from live screenshots (est); timing (est) LOOK One large, soft ribbon of color with volume and glow sweeps from the top right down across the right half of the hero, fanning out like folded silk. It shifts from pale blue and lavender through violet and hot pink to orange and warm yellow. Fine film grain covers it; its edges dissolve into the white page. It moves slowly and continuously. Hero text that overlaps it takes on its colors through a hard-light blend. STRUCTURE Back to front on home: white page; wave layer (absolute, full hero area, extends up under the 76px header); background copy of the H1; foreground copy of the H1 with mix-blend-mode hard-light (color rgba(0,14,255,0.5), lead clause #2d2564); buttons. Wave container: centered, max width 1266px (content frame); inner contents at 1264px+ start 250px from the left and are 110% wide, so the ribbon bleeds off the right edge. Canvas fills the contents box; a static image sits centered underneath until the canvas has drawn (then fades out 250ms linear). Home developers band: a second wave canvas anchored to the bottom of the "Scale with confidence" block, 460px tall (420px below 640), full width, behind the big stats; violet and pink threads on #0d1738. Billing hero: the wave is centered behind the product graphic, 1264x772 (639px wide below 640). KEY PARAMETERS static fallback image sizes: 1392x975 at 1264px+, 1248x975 at 640-1263, 624x975 below 640 colors along the ribbon, lightest to deepest (est): #c6d4ff pale blue -> #b9b9f9 lavender -> #9a9afe / #7f7dfc violet -> #f44bcc / #fb76fa pink -> #ff6118 orange -> #f9b900 warm yellow; the hottest orange sits at the top right grain: fine film grain over the ribbon (est) edges: soft, fading into white; no hard edge the wave passes behind the H1 on desktop; the hard-light foreground copy keeps the text readable mobile: the ribbon crosses the top of the screen diagonally behind the header, the menu toggle and the H1 MOTION at load: static image first; canvas fades in when drawn (static image opacity 0 over 250ms linear) idle: slow undulation and color drift, est one cycle every 10-20s; no pointer reaction (est) off-screen: canvas pauses (est) STATES hover and pointer: no reaction reduced motion: static image (inf) loading fallback: static image HOW TO BUILD WebGL fragment shader on a canvas: a noise-displaced ribbon mask with a multi-stop gradient along its length, soft edges and animated grain; time drives slow displacement. Simpler fallback: a large blurred ribbon image with a grain overlay and a slow CSS transform drift. For the headline, render the H1 twice: normal copy underneath, a second copy on top with mix-blend-mode hard-light. PITFALLS not a hard skewed band with straight edges (that is the 2020-2025 site); no neon cyan; missing grain or a flat gradient looks cheap; the ribbon must bleed off the right edge and under the header. SCREENSHOTS - file: stripe_2026_hero-wave_d1440_live.jpg shows: live wave in the hero at 1440x900, H1 48px with the hard-light overlap do not copy: the wave rendering itself Also: stripe_2026_home_d1440_top-us.jpg and stripe_2026_home_m390_top-us.jpg on the Overview (desktop and mobile), stripe_2026_home_d1440_full-us.jpg on Page: home (developers band wave).