HAUSE

Procession

One thing passing through every stage, in order.

WATCH THE FORM ↓
01 / THE ENCOUNTERA PERFORMANCE — IT PLAYS ITSELF

A STUDY IN PROCESSION

One thing carries the journey.

Follow a single request through its stages. Each passed stage remains part of its history.

01ReceivePASSED
02InterpretPASSED
03ComposePASSED
04DeliverREQUEST 07

Deliver: the same request reaches its reader.

THE COMPLETE SEQUENCE / TEXT RECORD
  1. Receive: one request enters.
  2. Interpret: the request acquires a selected act.
  3. Compose: the selected act is given a form.
  4. Deliver: the same request reaches its reader.

The token is the same throughout. The illustration traces passage, not a measured latency or live pipeline.

INSPECT THE REUSABLE LIBRARY COMPONENT

draft → edit → typeset → stage → prove → publish — one idea — every stage, in order, every time.

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING SOMETHING HAPPENING

Showing one thing pass through every stage in order.

Is it the same object at the end, having been somewhere?

EXPLORE THE SELECTION GRAMMAR ↗

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

The Procession form is a HAUSE performance — one thing passing through every stage, in order. The stage being passed flares accent; each passed stage stays faintly lit — its contribution now aboard. Loops gently while in view (a reader scrolling down should never find it finished), pauses off-screen, and rests on the completed passage under prefers-reduced-motion.

origin — vindex3

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/Procession.tsx

The stage being passed flares accent; each passed stage stays faintly lit — its contribution now aboard. Loops gently while in view (a reader scrolling down should never find it finished), pauses off-screen, and rests on the completed passage under prefers-reduced-motion.

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

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

export type ProcessionProps = {
	/** Labels for the stages, in order — "layer 0" … "layer 5". */
	stages: string[];
	/** The line revealed under the finished descent. */
	caption: string;
};

export function Procession({ stages, caption }: ProcessionProps)

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

NOT INVENTED IN ISOLATION

A page needed this.

Entered the library from vindex3.

08 / THE PROBLEMMOTION THAT MEANS NOTHING ↗Things fade, slide and bounce because a library made it easy. None of it says anything, all of it costs time, and the reader who turned motion off gets a page that no longer explains itself.

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

CITE

source components/forms/Procession.tsx · origin vindex3 · site build 3ee5339 · built 2026-09-09

CITE THIS

Web page · 0.1.0

Hay, C. (2026). Procession — a HAUSE performance. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/procession

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