TextCorrection

Chris Hay

A rejected line stays legible while its consequence arrives.

WATCH THE FORM ↓

01 / THE ENCOUNTERA PERFORMANCE — IT PLAYS ITSELF

A STUDY IN TEXTCORRECTION

Keep the words that changed.

A correction has two parts: the wording that was withdrawn and the more precise account that replaces it.

~~The gallery will open on Friday.~~

Friday is planned. Opening is not confirmed.

Illustrative correction: inspection is still pending. No real opening or inspection is being reported.

In this fictional opening notice, a planned date becomes an explicit uncertainty. The crossed-out statement remains legible beside its correction.

INSPECT THE REUSABLE LIBRARY COMPONENT

~~The gallery will open on Friday.~~

Friday is planned. Opening is not confirmed.

Illustrative correction: inspection is still pending. No real opening or inspection is being reported.

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING SOMETHING HAPPENING

Showing a correction without erasing the original words.

Must the reader see both the withdrawn wording and its replacement?

EXPLORE THE SELECTION GRAMMAR ↗

WHEN THE ACT CHANGES

StagedTransition

Use StagedTransition instead when the first state should leave before the new record arrives.

What is the TextCorrection form in HAUSE, and when do you use it?

The TextCorrection form is a HAUSE performance — a rejected line stays legible while its consequence arrives. Shared motion owns playback; paused, reduced-motion and no-JS editions show the resolution. The consumer must name the actual consequence, not imply an automatic edit.

origin — chrishayuk.com · attribution notebook · 2026-09-09

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/TextCorrection.tsx

Shared motion owns playback; paused, reduced-motion and no-JS editions show the resolution. The consumer must name the actual consequence, not imply an automatic edit.

THE PERFORMANCE’S DISCIPLINE

Every performance starts in view, rests on a designed final state — which is what reduced motion and no-JS get — and never crossfades between two physical forms of one thing: staged swaps only. A scrolling reader must never find it already finished.

03 / MAKE SOMETHINGINSTALL HAUSE ↗

Give it your subject.

The opening study is an authored demonstration, not an additional component API. Expand the library specimen above to inspect the reusable form. Its props below come directly from the source.

REACT · TextCorrection

import { TextCorrection } from "@chrishayuk/hause/components/forms/TextCorrection";

export function TextCorrection({ before, after, caption, compact = false }: {
  before: string; after: string; caption: string; compact?: boolean;
})

The import and the complete props contract. For installation and composition, follow the Build guide.

NOT INVENTED IN ISOLATION

A page needed this.

2026-09-09 · Entered the library from chrishayuk.com · attribution notebook.

PUBLISHED 31 AUG 2026 · REVISED 9 SEP 2026 · VERSION 0.1.0

CITE

source components/forms/TextCorrection.tsx · origin chrishayuk.com · attribution notebook · 2026-09-09 · site build 21dff19 · built 2026-09-26

CITE THIS

Web page · 0.1.0

Hay, C. (2026). TextCorrection — a HAUSE performance. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/text-correction

The specimen, the source account and the props share one form record. Cite this page or follow its source identifier to inspect the implementation.

An act.Not a container.

StagedTransition ↗