HAUSE

Transformation

Comparison's cinematic sibling — identical props, performed.

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

A STUDY IN TRANSFORMATION

Let the rearrangement make the argument.

Four pieces move from an overlapping pile into a connected sequence. Watch the same objects acquire a different reading.

01LOOK
02ASK
03TEST
04SAY

A sequence: the connections can be read.

THE COMPLETE SEQUENCE / TEXT RECORD
  1. A pile: the same pieces overlap.
  2. Reorganisation: identities travel, nothing is replaced.
  3. A sequence: the connections can be read.

Identity is conserved. This is the performed counterpart of Comparison's reader-controlled arrangement.

INSPECT THE REUSABLE LIBRARY COMPONENT

ONE DESIGN SYSTEM — TWO INTERPRETATIONS

the same four commitments, either way

A STYLE GUIDEA SPECIMEN BOOK
  • Rendered by the real forms
  • Cannot drift — it is the code
  • Visited, and operated

the same four commitments, either way — as a style guide: described in prose, drifts from the code, read once, then trusted. As a specimen book: rendered by the real forms, cannot drift — it is the code, visited, and operated.

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING SOMETHING HAPPENING

Performing a change between two states of one thing.

Is it a staged swap rather than a crossfade? Two physical forms of one object never dissolve into each other.

EXPLORE THE SELECTION GRAMMAR ↗
WHEN THE ACT CHANGES

Comparison

Use Comparison instead when the pace belongs to the reader.

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

The Transformation form is a HAUSE performance — comparison's cinematic sibling — identical props, performed. Once in view the first interpretation holds for a beat, then the blocks travel to the second at --motion-cinematic with the hause stagger, connector lines arriving after the blocks settle. Plays once; REPLAY runs it again. The same pieces move continuously between arrangements — reorganisation, not conversion, which is why this one transition may travel rather than swap.

origin — vindex3

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/Transformation.tsx

Once in view the first interpretation holds for a beat, then the blocks travel to the second at --motion-cinematic with the hause stagger, connector lines arriving after the blocks settle. Plays once; REPLAY runs it again. The same pieces move continuously between arrangements — reorganisation, not conversion, which is why this one transition may travel rather than swap.

prefers-reduced-motion (and no-JS) lands on the finished second interpretation, fully labelled — a designed resting state, not a paused animation.

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

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

type Side = { label: string; properties: string[] };

export type TransformationProps = {
	kicker: string;
	objectLabel: string;
	blockLabels: string[];
	from: Side;
	to: Side;
};

export function Transformation({ kicker, objectLabel, blockLabels, from, to }: TransformationProps)

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.

Used in hause.design. These exhibitions share an author; this is evidence of reuse, not independent adoption.

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/Transformation.tsx · origin vindex3 · site build 3ee5339 · built 2026-09-09

CITE THIS

Web page · 0.1.0

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

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