One object, two interpretations, dragged between.
OPERATE THE FORM ↓A STUDY IN COMPARISON
Drag between a pile and a sequence. The objects keep their identity; their arrangement changes the interpretation.
4 PIECES / 4 IDENTITIES / 100% THROUGH THE REARRANGEMENT
This is reorganisation, not substitution. The same four labelled pieces survive across the entire control.
ONE DESIGN SYSTEM — TWO INTERPRETATIONS
the same four commitments, either way
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
YOU ARE SHOWING SOMETHING HAPPENING
Showing one object read two ways.
Should the reader drag between the interpretations themselves?
EXPLORE THE SELECTION GRAMMAR ↗The Comparison form is a HAUSE instrument — one object, two interpretations, dragged between. HAUSE's first Comparison-mode primitive: one object, two interpretations, the same underlying pieces reorganising as the visitor drags between them. Deliberately tests different ground than ExpertField (Simulation) — object continuity across states, a user-driven continuous control rather than discrete buttons, and an argument rather than a mechanism.
origin — the codex
THE LIBRARY’S OWN ACCOUNT
components/forms/Comparison.tsx
HAUSE's first Comparison-mode primitive: one object, two interpretations, the same underlying pieces reorganising as the visitor drags between them. Deliberately tests different ground than ExpertField (Simulation) — object continuity across states, a user-driven continuous control rather than discrete buttons, and an argument rather than a mechanism.
No transition is applied to block position: it's a direct 1:1 mapping to the range input's value, so there's nothing for prefers-reduced-motion to suppress — dragging is exactly as responsive either way.
Every instrument carries an always-present text fallback, so the point survives with the interaction removed — for reduced motion, for no-JS, for a crawler, and for anyone in a hurry. ARIA state is part of the form, because an agent browser reads aria-pressed and aria-expanded to understand what it is looking at.
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 · Comparison
import { Comparison } from "@chrishayuk/hause/components/forms/Comparison";
type Side = { label: string; properties: string[] };
export type ComparisonProps = {
kicker: string;
objectLabel: string;
blockLabels: string[];
left: Side;
right: Side;
};
export function Comparison({
kicker,
objectLabel,
blockLabels,
left,
right,
}: ComparisonProps)The import and the complete props contract. For installation and composition, follow the Build guide.
NOT INVENTED IN ISOLATION
Entered the library from the codex.
01 / THE PROBLEMEVERYTHING BECOMES A CARD ↗Ask a model for an interface and the same eight containers come back: cards, badges, accordions, tabs, chat bubbles. A comparison, a refusal, an answer and a measurement are four different acts. They arrive as the same rectangle.PUBLISHED 31 AUG 2026 · REVISED 9 SEP 2026 · VERSION 0.1.0
CITEsource components/forms/Comparison.tsx · origin the codex · site build 3ee5339 · built 2026-09-09
CITE THIS
Web page · 0.1.0
Hay, C. (2026). Comparison — a HAUSE instrument. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/comparison
The specimen, the source account and the props share one form record. Cite this page or follow its source identifier to inspect the implementation.