Relay

Screenshots

Signature effect

Editor + live run graph: code types itself, deploys, fails once, retries, waits for a human approval and finishes

What's in the box

Changelog

1. v1.0.02026-09-24
   • HTML edition: a dependency-free landing page that opens straight from disk, with a settings block for every effect (loader, packet grid, run demo, durable track, event stream, approval card, trace viewer, kill-the-worker demo, pricing meter).
   • React edition: Next.js 16 + React 19 + Tailwind 4 + Motion, ported 1:1 from the HTML edition. All copy lives in content/site.ts, and every effect takes the same settings as typed props.
   • Pages: home, 404, privacy.
   • Contrast: the dimmest text colour --dim is now #82828B (was #71717A, 4.1:1) so timestamps, captions, fine print, log columns and code comments pass WCAG AA on every surface. The quieter second half of big headlines keeps the original #71717A as --headline-mute, which passes for large text. The italic halves of the parcelwise and Lattice Health logos use a colour mix instead of opacity, for the same reason.
   • Readable at every moment: while the hero code is still being typed, the faint placeholder nodes in the run graph hide their labels instead of showing them at 22% opacity. The eyebrow slashes and the editor's line numbers are drawn by CSS, so they don't count as low-contrast text.
   • Works without JavaScript: the hero demo's markup is the finished run (the script resets and replays it), the code in the editor and the SDK window is plain text in the HTML and gets highlighted in the browser, the trace rows and span details are real HTML, and the kill-the-worker steps, histogram and uptime bars are in the markup. Without scripts, both SDK tabs show and the logo row sits still.
   Show all notes

   • Reduced motion: the kill-the-worker demo waits for Replay run instead of starting by itself, and the hero shows the dot grid without moving packets.
   • Keyboard: the approval and kill buttons use aria-disabled instead of disabled while they're unavailable, so focus stays where it was. The SDK code panel scrolls sideways with the keyboard on phones. The newsletter field shows a cyan focus ring.
   • Fixed a CSS collision: the copy button's check icon shared a class with the checkpoint rows and picked up their padding, border and background.
   • The backoff span's replay command now replays from summarize (the step it belongs to), not from a step called "backoff".
   • Footer: "DPA" is replaced by a Privacy link to the included privacy.html. The logo marquee is seamless with a single set of logos in the markup (the script repeats it).
   • Brand colours are tokens everywhere: the heartbeat lines, graph gradients, canvas packets and every glow are drawn from --accent, --accent-2, --ok and --err, so a rebrand is a few edits in tokens.css.

Questions

Related

• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29
• 

  Meridian Expeditions

  Travel

  A quiet, topographic-survey take on an expedition operator's site: two procedurally-drawn contour maps that redraw themselves as you switch between four real routes, an interactive elevation profile you can scrub with a pointer or the arrow keys, a pinned hour-by-hour walkthrough of a day on the ice, and a bookable 2027 departures table.

  Cormorant Garamond / ManropeFrom $29