Redline review

You can add this component with the shadcn CLI or by hand:

npx shadcn@latest add https://brunodelorence.com/r/redline-review.json

Either way it needs React 19 and a bundler that supports CSS Modules, such as Next.js or Vite. It has a dark colour scheme: it follows your page’s color-scheme, light unless the page sets one, or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.

import { RedlineReview } from './redline-review';export function ContractReview() {  return (    <RedlineReview      title="Larkspur MSA"      draftMonths={3}      redlineMonths={12}      onDecision={(decision) => console.log(decision)}      onSend={(prompt, mode) => console.log(mode, prompt)}    />  );}

Each state below is a live instance, locked so you can study it.

The pieces it is built from, each with its measurements read live.

An agent reads a contract, checks it against a playbook and finds three clauses off. The liability cap shows where it stands in the market: a swarm of past contracts, their draft far down the left, the playbook minimum as a dashed line and the redline lit on it, with percentiles counted from the data. Accept or reject it, watch the next redline draft, and give the drafter your own instruction.

• The market is one SVG of 729 dots in columns along a months axis, one dot for two contracts: grey below the playbook minimum, violet from it, each fainter the farther it stacks from the axis. It scales with the card, while the labels around it are HTML and keep their size.
• The percentiles are worked out from the same data: the share of contracts with a lower cap, half of those with the same one. Their draft at 3 months lands at p4, the redline at 12 at p49.
• When the chart plays, every dot falls into place on a CSS animation of its own, delayed by its column and its distance from the axis. The playbook line then draws down, the draft ring pops, the arc draws itself through a mask whose dash offset runs from 1 to 0, and the redline dot pops at its end while the percentiles count up. A hidden copy of each final number holds its place, so the legend never shifts.
• Accept or Reject settles the redline: the losing side dims, the note says what stands, and Undo opens it again. The tab counts the redlines still waiting.
• The drafting line moves on by itself while on screen: a violet-to-red glow under the row stretches by scaleX, and the count moves to the next clause. Cancel stops it, and Resume picks it up again.
• While on screen and untouched, a demo plays the review from the start: the page and clause counts tick up, the chart plays, an instruction is typed, the redline is accepted and the instruction sent. Any real input hands the card to the reader.
• Every colour is a light-dark() token, so the card follows the page or the colorScheme prop. Off screen, in a hidden tab or under reduced motion nothing moves, and the card is drawn at rest.

The complete source behind this demo. Open source under the MIT license, © 2026 Bruno Delorence: copy it, change it, ship it.

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  memo,  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type CSSProperties,  type FormEvent,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import {  AXIS_Y,  COLUMNS,  DOT_R,  DOTS,  PER_DOT,  PITCH,  PX_PER_MONTH,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The market the liability cap is weighed against: 1,458 invented SaaS master agreements, one dot * for every two, stacked in columns along a 0 to 26 month axis. Each column stands for a sliver of * months (the dots' pitch over the axis' scale) and stacks above and below the axis line. * * Everything here is in the chart's own units: the drawing is VIEW_W × VIEW_H and the SVG scales * it to the card's width. *//** The drawing's size, and where its axis runs. */export const VIEW_W = 527;export const VIEW_H = 118;export const AXIS_Y = 61.75;/** Px per month along the axis (0 months sits at x = 0), and the distance between dots. */export const PX_PER_MONTH = 20.333;export const PITCH = 4.6;export const DOT_R = 1.8;/** Contracts per dot. */export const PER_DOT = 2;/** * The columns, from 0.92 to 25.56 months, each a [dots above, dots below] pair besides the one on

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. `live` is the same without the reader: what * moves by itself (a progress bar) may move then. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);

/* Redline review (redline-review.tsx): a graphite stage with the card in its middle, 582 px at   most, near-black at night and white by day; inside it a darker well for the chart and a grey   tray for the drafting line and the composer.   Colours are the tokens below, light-dark(light, dark): the component takes the color-scheme it   inherits from the page (light unless the page says otherwise), or the one its colorScheme prop   sets (data-color-scheme).   Motion is transforms and opacity: the dots fall by a translate, the arc draws through a mask's   dash offset, the markers pop by a scale and the progress line stretches by scaleX. */.root {  /* The stage, the card, the chart's well, the drafting tray and the composer. */  --stage: #ececec;  --card: #fff;  --card-ring: rgb(0 0 0 / 0.07);  --well: #fafafa;  --well-line: #ececec;  --tray: #f4f4f4;  --tray-line: #e6e6e6;  --composer-top: #fff;  --composer-bottom: #f7f7f7;  --composer-line: #e4e4e4;  --composer-edge: #d9d9d9;

• The card is an article named by the contract; the steps are an ordered list of real text, and their icons are hidden from assistive technology.
• Review and Redlines are tabs: arrow keys, Home and End move between them, and each controls the panel below.
• The chart is an image with a full description: how many contracts it shows, and where their draft, the playbook minimum and the redline stand. The hover tooltip only repeats a column’s count for a mouse or pen.
• Accept, Reject, Undo, Cancel and Send are real buttons, and Redline and Compare a radio group. The drafting line is a progressbar, and decisions, sending and drafting announce themselves in a polite live region.
• Every control shows a focus ring. Under reduced motion nothing animates or moves on its own, and the demo stays off.