Relay

Screenshots

Signature effect

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

Changelog

1. v1.0.12026-09-26
   • Docs: a new "Move a section into another site" section in the README and AGENTS.md of both editions: how to put the hero into a site you already have, tested on a host page with its own, clashing styles.
   • React edition: with no loader and no nav on the page, the hero's entrance and the run demo now start straight away. Before, the demo never started.
   • React edition: the hero's packet animation reads its colours from the section, so it keeps Relay's colours inside another site.
2. 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

Relay on the blog

• Oct 3, 2026

  How I built 15 website templates with an AI coding agent in a week

  How I built 15 AI-ready website templates with Claude Code in a week: the workflow, the quality bar, and why a template is only the starting point.

  10 min read

Related

• 

  Ashlar

  Real estate

  • HTML
  • React
  • Framer

  Ashlar is a website for a boutique real-estate office that sells a few exceptional houses by introduction. It has five material slabs that open into exterior photographs, a register with an index of houses beside one house sheet (photo switch, facts, and buttons to the house page and the introduction form), a page per house (facts, photographs in a lightbox, a longer story and the advisor who shows it), a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, advisor cards with live local times, and an introduction form that writes a letter as you type.

  Libre Caslon Display / FigtreeFrom $19
• 

  Aurel

  Brand

  • HTML
  • React

  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 $19
• 

  Cistern

  Product

  • HTML
  • React

  Cistern is a launch site for a residential energy-storage product, with a drawn graphite slab and its seam of light, a draggable 24-hour instrument that reads roof, house, battery and grid, a self-sufficiency calculator that suggests a model, three model cards, a FAQ and a free-survey request form.

  Jost / Inter TightFrom $19