---
title: "BRAND Stripe 2026 · Recipe: hero-wave"
url: https://memocore.ai/memos/6ab4cfa6af51aac421da8803
project: "Brand Styles"
tags: "brand-stripe"
updated_at: "2026-09-25T07:32:46.377Z"
---

# 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).