HAUSE

Lens

One concept at several depths — the explanation, the object, the clause — on one URL, with the reader's depth remembered.

OPERATE THE FORM ↓
01 / THE ENCOUNTERAN INSTRUMENT — THE READER OPERATES

A STUDY IN LENS

Change depth. Keep the subject.

A reader, an implementer and a reviewer can enter the same explanation at different depths.

ONE SUBJECT / A CLAIM THAT OWES EVIDENCE

A belief is not
a receipt.

A Claim states what you believe and how firmly it is supported. Evidence is the material that earns that support.

ALL THREE DEPTHS / TEXT RECORD

Learn: Claim states a belief; Evidence supplies its support. Inspect: “Listeners prefer the quieter room” remains OPEN without a test. Contract: the caller supplies the assertion, status and explanatory detail; the component does not verify them.

Three views of one concept, on this page. These study controls do not change the page's reference anchors or saved library preferences.

INSPECT THE REUSABLE LIBRARY COMPONENT

MACHINE LEGIBILITY — THREE DEPTHS

LEGIBILITY IS PART OF THE GRAMMAR

A design system for AI cuts both ways: models compose answers from the forms, and machines — crawlers, answer engines, agent browsers — have to be able to read what the forms say. So the library carries it rather than each site bolting it on: an answer-first form with a stable anchor, structured data projected from the records a page already holds, ARIA state on every instrument, and nothing that lives only inside an animation.

The same subject at the depth you want it: what it means, the form that does it, and the doctrine in the library's own words.

Machine legibility — learn: what it means · inspect: the form that does it · spec: the doctrine, verbatim. One concept, one URL, the depth of your choosing.

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING WHAT SOMETHING IS MADE OF

Showing one subject at several depths, on one URL.

Are the explanation, the object and the clause the same subject rather than three subjects?

EXPLORE THE SELECTION GRAMMAR ↗
WHEN THE ACT CHANGES

Anatomy

Use Anatomy instead when the depths are parts of one object rather than registers of one explanation.

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

The Lens form is a HAUSE instrument — one concept at several depths — the explanation, the object, the clause — on one URL, with the reader's depth remembered. The instrument that refuses the oldest split in technical writing: the tutorial over here, the reference over there, and a reader who must guess which one holds the answer.

origin — vindex3 · representation · 2026-08-31

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/Lens.tsx

The instrument that refuses the oldest split in technical writing: the tutorial over here, the reference over there, and a reader who must guess which one holds the answer. A Lens keeps the explanation, the object itself and the normative clause as three depths of the same thing — LEARN what it means, INSPECT the real object, SPEC the words that govern it — so moving between them costs a click rather than a navigation, and never loses the reader's place in the concept.

The chosen depth is remembered (localStorage) and written into the URL fragment, so a reader who thinks in clauses stays in clauses, and can link someone straight to the depth they mean. Every panel is in the DOM at all times — the depths are disclosure, not content gating, which is also why a crawler reads the specification text whether or not the tab was clicked.

A panel is page-level, not a grid column: pass forms, which carry their own grid, and wrap bare prose in a `hause-grid` section of your own. The chrome is what lives in the twelve columns here.

THE INSTRUMENT’S DISCIPLINE

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.

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

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

export type LensDepth = {
	/** Short, stable, and used as the URL fragment — "learn", "inspect", "spec". */
	id: string;
	label: string;
	/** What this depth gives, in a few words. */
	hint: string;
	content: React.ReactNode;
};

export type LensProps = {
	kicker: string;
	/** The concept being looked at, for the accessible name. */
	concept: string;
	depths: LensDepth[];
	/** Persist the reader's chosen depth across pages. Default true. */
	remember?: boolean;
	caption?: string;
};

export function Lens({ kicker, concept, depths, remember = true, caption }: LensProps)

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

NOT INVENTED IN ISOLATION

A page needed this.

2026-08-31 · Entered the library from vindex3 · representation.

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

03 / THE PROBLEMPAGES MACHINES CANNOT READ ↗Strip a page to its text. If the answer disappears, the page never had one — it had a rendering of one.06 / THE PROBLEMTUTORIAL OR REFERENCE, NEVER BOTH ↗The explanation lives on one page and the clause that governs it on another, and every reader has to guess which half holds the answer they came for.

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

CITE

source components/forms/Lens.tsx · origin vindex3 · representation · 2026-08-31 · site build 3ee5339 · built 2026-09-09

CITE THIS

Web page · 0.1.0

Hay, C. (2026). Lens — a HAUSE instrument. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/lens

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