HAUSE

Magnitude

A powers-of-ten zoom-out — each arrival rescales the world.

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

A STUDY IN MAGNITUDE

The world rescales around the next thing.

A square that filled the room becomes small when the next scale arrives. Watch area—not just the label.

1AREA UNITS
100AREA UNITS
10,000AREA UNITS

Magnitude 10,000: the first square is one ten-thousandth of the area.

THE COMPLETE SEQUENCE / TEXT RECORD
  1. Magnitude 1 fills its reference square.
  2. Magnitude 100: the first square is one hundredth of the area.
  3. Magnitude 10,000: the first square is one ten-thousandth of the area.

Synthetic magnitudes 1, 100 and 10,000. Square areas are proportional; the smallest remains visible without a minimum-size clamp.

INSPECT THE REUSABLE LIBRARY COMPONENT

an exhibition — ~60,000 characters

to scale by characters — the glyph is still there, two pixels wide

To one scale: a glyph (one character) · a statement (~90 characters) · a chapter (~4,000 characters) · an exhibition (~60,000 characters) — each drawn area-true to its magnitude.

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING SOMETHING HAPPENING

Showing a scale nobody can hold in their head.

Does each arrival rescale the world — powers of ten rather than a bar chart?

EXPLORE THE SELECTION GRAMMAR ↗

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

The Magnitude form is a HAUSE performance — a powers-of-ten zoom-out — each arrival rescales the world. Areas are true to magnitude; anything smaller than a few pixels is clamped to a visible tick — say so in the note, honestly. Loops gently while in view (a reader scrolling down should never find it finished), pauses off-screen, and rests on the final scale under prefers-reduced-motion.

origin — vindex3

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/Magnitude.tsx

Areas are true to magnitude; anything smaller than a few pixels is clamped to a visible tick — say so in the note, honestly. Loops gently while in view (a reader scrolling down should never find it finished), pauses off-screen, and rests on the final scale 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 · Magnitude

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

export type MagnitudeItem = {
	label: string;
	/** The measure, printed beside the label — "4 MB", "≈1.5 TB". */
	sub: string;
	/** The quantity, in any consistent unit. Items must be ascending. */
	magnitude: number;
};

export type MagnitudeProps = {
	items: MagnitudeItem[];
	/** Shown once the sequence rests on the final scale. */
	note?: string;
};

export function Magnitude({ items, note }: MagnitudeProps)

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

CITE THIS

Web page · 0.1.0

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

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