StagedTransition

Chris Hay

One state exits, a held absence, then another enters.

WATCH THE FORM ↓

01 / THE ENCOUNTERA PERFORMANCE — IT PLAYS ITSELF

A STUDY IN STAGEDTRANSITION

Leave a space between the readings.

An assertion leaves before its supporting record arrives. The interval makes the change in status visible.

ILLUSTRATIVE OPENING NOTICE

01Announcement
The opening is presented as settled.
02Interval
The assertion leaves; its status is still unresolved.
03Record
No completed inspection is on record. The opening remains provisional.

A planned opening date has no completed inspection behind it. The arrival of the record changes how the announcement should be read.

A fictional gallery opening demonstrates exit, held absence and arrival. The complete score remains readable without playback.

INSPECT THE REUSABLE LIBRARY COMPONENT

ILLUSTRATIVE OPENING NOTICE

01Announcement
The opening is presented as settled.
02Interval
The assertion leaves; its status is still unresolved.
03Record
No completed inspection is on record. The opening remains provisional.

A planned opening date has no completed inspection behind it. The arrival of the record changes how the announcement should be read.

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING SOMETHING HAPPENING

Separating an assertion from the record that changes it.

Does a held absence between exit and arrival explain the change in reading?

EXPLORE THE SELECTION GRAMMAR ↗

WHEN THE ACT CHANGES

TextCorrection

Use TextCorrection instead when the original wording should remain legible beside its correction.

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

The StagedTransition form is a HAUSE performance — one state exits, a held absence, then another enters. Uses MotionProvider for visibility and pause ownership. The final state and the complete score are the still edition. Import @chrishayuk/hause/exhibition.css alongside HAUSE tokens.

origin — chrishayuk.com · exhibition notebook · 2026-09-08

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/StagedTransition.tsx

Uses MotionProvider for visibility and pause ownership. The final state and the complete score are the still edition. Import @chrishayuk/hause/exhibition.css alongside HAUSE tokens.

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 · StagedTransition

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

export type StagedTransitionProps = {
  from: string;
  to: string;
  kicker: string;
  caption: string;
  score: [{ label: string; description: string }, { label: string; description: string }, { label: string; description: string }];
};

export function StagedTransition({ from, to, kicker, caption, score }: StagedTransitionProps)

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-08 · Entered the library from chrishayuk.com · exhibition notebook.

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

CITE

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

CITE THIS

Web page · 0.1.0

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

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.

TextCorrection ↗