BRAND Vercel 2026 · Recipe: hero-triangle-scene

HEADER brand: Vercel; design_date: 2026-10; kind: scene; used_in: BRAND Vercel 2026 · Page: home S2 (hero) evidence: read from the hero renderer chunks (29iwemqopjsf2.js, 14e9hunew8kce.js: tunables and defaults) and the hero markup, checked on screenshots in light and dark mode at 1440 and 390, 2026-10-05; how the scene looks under each tunable is partly (inf) LOOK A large solid equilateral triangle (the Vercel mark) floats in the middle of the hero on the page color. In light mode it is pure black with a soft grey contact shadow falling away from an invisible light that slowly circles it, a thin white highlight on the lit edges, and a very faint lighter disk on the "floor" around it. In dark mode the page is black, the triangle is black too, and it is outlined by a bright white backlight glow that fades into a grainy halo. The light follows the pointer softly and shifts when one of the hero capability rows is hovered. Nothing else moves; the scene is calm, monochrome and photographic rather than graphic. STRUCTURE back to front: page background (#fafafa / #000) -> static fallback image layer (light and dark image of the lit triangle, scale 1.6 mobile / 1.3 desktop) -> live canvas (3:2) rendering floor, light and shadow -> the triangle itself (part of the render) -> "Drop to deploy" / "Loading" label (z 20, 20% below the canvas center) -> hero text (z 10, outside the canvas box) canvas box: absolutely centered in the hero, 20px below the vertical center; aspect 3:2; height = hero height capped at 720px (1080x720 at 1440x900); mobile height min(125vw, 400px), min(100vw, 650px) at >=601, max width 100vw renderer: WebGPU if navigator.gpu exists, else WebGL2 in an OffscreenCanvas worker (needs EXT_color_buffer_float), else static image; ?heroRenderer=webgpu|webgl|static forces one KEY PARAMETERS triangle: equilateral, point up; measured 192px base x 166px tall at 1440 (canvas 1080x720, about 23% of the canvas height), its center ~28px above the canvas center (x 616-808, y 337-503 in the 1440x900 frame); at 390: ~168px base x 147px tall in a 390x400 canvas (closer mobile camera) LED edge: the triangle's outline is modelled as LED segments (edge thickness 0.0236 x triangle height x 2); edge colors when lit: red top-left rgb(221,70,77) #dd464d, green bottom rgb(84,178,83) #54b253, blue top-right rgb(46,88,255) #2e58ff, overlap 0.4 (shown as color only in the active/deploy state, inf; in the idle screenshots the edges read white) floor: albedo 1 (white floor in light mode), brightness min 0.09 (dark 0.05), max 1.02 light / 1.0 dark; ambient occlusion three layers (strength 0.18 / 0.15 / 0.21) giving the soft contact shadow light rotation: -0.2 (slow counter-clockwise drift of the light around the triangle, est one turn per ~30s) pointer light: radius 28px, friction 5 (it lags behind the pointer), white, glow radius 165px, glow strength 1, smoothing 0.23, only lights faces turned towards it (90-100deg falloff) noise: noise scale 0.01, visible as fine grain in the dark-mode glow deploy pulse: amount 1, radius 173px, power 3, duration 0.5s, responds with smoothing 0.2 (used by the drop-to-deploy state) particles: exposure boost 5.2 -> 60, spawn spread 118px (sparks during deploy, inf) quality: radiance-cascade global illumination, cascade count 1-5 by canvas diagonal; render resolution = CSS size x DPR; resize debounced 150ms fallback fade: the fallback image fades out 700ms linear when the first live frame is shown MOTION idle: at any time the light drifts slowly around the triangle; shadow and highlight move with it (continuous, no loop seam) pointer: moving the pointer over the hero adds a soft local light that trails the cursor (friction 5, ~200-300ms lag est); leaving the page removes it capability hover: hovering a row in the hero list changes the active light preset (shadow direction and glow shift visibly between rows, est 300-500ms blend) drag over page: data-hero-drop-active -> hero text fades out 300ms, "Drop to deploy" fades in 300ms; drop -> data-hero-drop-staging -> "Loading" crossfades in 300ms while the deploy pulse (0.5s) plays theme switch: scene re-renders with the dark tunables (black floor, white glow) STATES hover: see capability hover and pointer; focus and keyboard: the canvas is aria-hidden, no focus; touch and mobile: no pointer light, idle drift only; mobile camera zoom; reduced motion: transitions on the labels are removed, the idle drift stays slow (est) or the static frame is used; loading fallback: static lit-triangle image in the current theme HOW TO BUILD Simplest faithful version: a 3:2 canvas centered in the hero with a black equilateral triangle; render a soft shadow with a few stacked blurred copies offset away from a light position that rotates slowly (one turn per ~30s); add a faint white highlight along the two edges facing the light and a lighter radial disk on the floor; in dark mode replace the shadow by a white blurred glow behind the triangle (blur 30-60px, opacity 0.6-0.9) plus a grain overlay (SVG noise at 5-8% opacity). Let the light lerp towards the pointer with ~0.2 smoothing. A WebGL fragment shader with an SDF triangle, soft shadow and ambient occlusion gives the closest look; a static image of the lit triangle is an acceptable fallback. PITFALLS grey or colored triangle (it is pure black in both themes); hard shadows or visible shadow copies; fast or bouncy light motion (it must feel slow and physical); colored glow in idle (the RGB edge colors are not visible at rest); missing grain in dark mode; triangle too big (192x166px in a 1080x720 canvas on desktop); centering the canvas on the viewport instead of the hero box (it sits 20px below the hero center) SCREENSHOTS - file: vercel_2026_home_d1440_top.jpg (attached to the Overview) light idle frame - file: vercel_2026_hero-triangle_d1440_pointer.jpg shows: light mode, "For coding agents" row hovered and pointer moved over the left of the triangle: shadow shifted to the lower right, highlight on the left edge source: live https://vercel.com/ 2026-10-05 key values: canvas 1080x720 centered; triangle 192x166px, solid #000; shadow soft grey; floor #fafafa do not copy: the Vercel mark; use a generic triangle - file: vercel_2026_home_d1440_top-dark.jpg (attached to the Overview) dark frame with the white backlight glow and grain