BRAND Vercel 2026 · Recipe: hero-capabilities

HEADER brand: Vercel; design_date: 2026-10; kind: component; used_in: BRAND Vercel 2026 · Page: home S2 (hero, right column on desktop, tagline under the H1 on mobile) evidence: read from the hero components in 0vydjv_rsrgic.js (HeroClient, capability row, ScrambleText) and the scramble module 1zm2i12rjlf2h.js (startScrambleCycle), checked on the live page at 1440 and 390, 2026-10-05 LOOK Desktop: at the right of the hero sits a quiet list of three short phrases, one per line ("For coding agents", "To ship apps and agents", "Automated by agents"). Hovering a phrase makes its row grow downward and reveals the rest of the sentence in grey right after the phrase, as one paragraph; the other rows slide down and turn grey. Mobile: the list is replaced by a single centered line in Geist Mono under the H1 that holds one phrase for a few seconds, then dissolves letter by letter into random lowercase letters and resolves into the next phrase. STRUCTURE desktop: nav (aria-label "Platform capabilities"), max width 364px, padding 32px 8px, rows 8px apart; each row: a block of inline text = title span + " " + description span; the row has overflow hidden and a fixed height mobile: a paragraph (Geist Mono, centered, max width 384px) with an invisible copy of a phrase to reserve width, an absolutely positioned animated span, and an sr-only full sentence for screen readers KEY PARAMETERS row closed: height 24px; title text-heading-16 = 16px/24px 450 -0.32px; color #171717 when no row is open, #4d4d4d when another row is open row open: height 84px (3 lines of 24px + 12px); title #171717; description 16px/24px 400 #4d4d4d, opacity 1 descriptions: "to deploy in their native language, with Vercel's API, CLI, MCP, and Skills." / "in Sandboxed VMs, with durable backends, powered by hundreds of models." / "who autonomously investigate errors, plan fixes, and open PRs." mobile tagline: Geist Mono 16px/24px 400 #4d4d4d, centered, 16px below the H1; phrases cycle "For coding agents" -> "To ship apps and agents" -> "Automated by agents" scramble alphabet: a-z lowercase MOTION desktop row open: height 24 -> 84px, 200ms cubic-bezier(0,0,0.2,1); title color 500ms ease-out; description opacity 0 -> 1, 500ms ease-out desktop row close: height 84 -> 24px 200ms ease-out; description opacity 1 -> 0, 300ms ease-out first hover delay: when no row is open, opening waits 50ms (hover intent); moving to another row while one is open switches immediately (the previous one closes at the same time); leaving the whole list closes all rows the hovered row also selects a light preset in the hero scene (Recipe hero-triangle-scene) mobile scramble cycle: hold each phrase 2600ms; then phase 1 "scramble out": from left to right every character is replaced by a random letter, progress eased with easeOutCubic (1 - (1-t)^3) over min(25ms x longest length, 350ms) = 350ms for these phrases; phase 2 "resolve": from left to right the new phrase's characters appear while the not-yet-resolved positions flicker random letters every frame, same duration and easing; total 700ms; trailing spaces trimmed every frame; the span gets data-scrambling="true" during the change (allows breaking anywhere); the cycle pauses while the element is off-screen or the tab is hidden and restarts from the current phrase keyboard: rows are not focusable (hover only, cursor default); the full sentence stays in the DOM for screen readers STATES hover: as above; focus and keyboard: no keyboard interaction (descriptions are aria-hidden until open); touch and mobile: the desktop list is hidden below 961px container width, the scramble line replaces it; reduced motion: no scramble (the first phrase stays), label transitions removed; loading fallback: server HTML shows all three titles closed HOW TO BUILD Desktop: three block rows with overflow hidden and fixed heights 24px / 84px switched on hover with a height transition of 200ms ease-out; inside each row an inline title and an inline description whose opacity transitions 500ms in / 300ms out; keep the list in a 364px column vertically centered in the hero. Mobile: a requestAnimationFrame loop that every 2.6s runs two 350ms easeOutCubic passes over the characters (scramble out, then resolve to the next phrase) on a monospace span with a reserved width. PITFALLS animating max-height or auto height (it must be a crisp fixed 24 -> 84px); fading the title instead of recoloring it; spring or bounce on the row; scrambling with symbols or uppercase (only lowercase a-z); a proportional font for the scramble (it must be monospace so the width does not jump); scrambling too slowly (the whole change is 0.7s) SCREENSHOTS - file: vercel_2026_home_d1440_hero-capability-hover.jpg (attached to Page: home) row 1 open: 3 lines, grey continuation, other rows pushed down - file: vercel_2026_home_m390_top.jpg (attached to the Overview) mobile tagline at rest ("For coding agents") - file: vercel_2026_home_m390_full.jpg (attached to Page: home) tagline caught mid-scramble ("wadcfvvzmlawbwmbtyrhsmi")