---
schema_version: 1
id: "repair-atlas"
name: "Repair Atlas"
summary: "A real segmental WebGL chair and labeled SVG fallback connect assembly, one-joint replacement and six design scenarios to a working two-to-four-stop route."
family: "expressive"
tags: ["product-led", "annotated", "high-contrast", "task-led"]
best_for: ["culture", "products", "campaign"]
avoid_for: ["data"]
density: "balanced"
image_dependency: "low"
motion_level: "expressive"
complexity: "medium"
signature: {"composition": "A sticky chair beside assembly/material narrative; B a material object ledger and route worksheet beside a compact study.", "typography": "Heavy Arial promises contrast with small museum numbers, material tags and practical route records.", "navigation": "Materials, real dual filters, personal route and actual sibling composition links.", "content_rhythm": "Whole object, materials, repair logic and catalogue versus material-led selection, route and construction context.", "imagery": "Original depth-tested segmental chair, SVG disassembly alternative and six distinct local concept illustrations.", "color_and_material": "Matte yellow scene, ultramarine route/explanation, chalk ground, black type and original wood tones.", "interaction": "Manual disassembly, repeatable one-joint replacement, six-object filtering and unique 2–4-stop reorder/remove/export.", "motion": "800ms assembly, bounded material separation, 500ms replacement and 400ms route-number landing, pause/reduced states."}
status: "ready"
prompt_path: "prompts/repair-atlas/prompt.en.md"
---

# Repair Atlas

## Intent

Repair Atlas makes an object's construction into an inspectable exhibition story. The fictional Mendaval Objects explores six original circular-design scenarios through a segmental wooden armchair, material labels and a visitor-made route. These are design concepts rather than manufactured products, verified repair instructions or environmental performance claims. The visitor can inspect a whole object, separate its parts, replace one illustrative joint and choose two to four exhibition stops to carry away as text.

## Signature

Keep five relationships: a recognisable wooden segmental armchair; contrasting visible joints; labels connected to seat, back and connectors; bold display type beside small museum annotations; and a numbered personal route. Matte yellow, ultramarine, chalk and black provide a clear exhibition palette. A follows assembly and disassembly before introducing the catalogue. B begins with the material-led object ledger and route worksheet beside a persistent chair study. Both connect the illustrated construction to a practical selection task.

## Typography

Heavy Arial display phrases create deliberate scale contrast with quiet museum labels. Headlines use short ordinary words and controlled line breaks; annotations identify numbers, materials and design themes. Body copy stays readable at an ordinary size and useful measure. The large numerals belong to actual object records and route positions, rather than decorative statistics. System Arial and explicit fallbacks support Lithuanian characters without external font files. Mobile display size contracts before labels or actions become cramped.

## Color and surfaces

A chalk ground supports black copy, blue actions and quiet gray secondary notes. The native scene sits on a matte yellow field, making wooden segments and blue connectors easy to distinguish. Blue explanation and route areas reverse to chalk text with yellow focus. The interface uses semantic tokens; original SVG and procedural mesh artwork records a coherent wood/yellow/blue drawing palette. No environmental seal, certification badge, game-like reward graphic or simulated performance meter is needed to communicate the subject.

## Layout A

A pairs a large short promise with a sticky original armchair study. The text column continues into three material records while the bounded scene remains visible on desktop. Scrolling this material section separates the seat, back and joints within a limited range; a native range provides the same inspectable states. A full blue repair-logic band changes the pace. Six illustrated concept bays then appear beside a numbered route worksheet. This is an object-to-material-to-visit sequence rather than an agency portfolio or a shop offer.

## Layout B

B makes the six-object material catalogue its first task. A long, single-column object ledger and route worksheet occupy the main working column; a compact chair study remains alongside through the material context. Each ledger record places its distinct illustration beside title, material, theme and a real add control. The route follows immediately before material records and the final repair explanation. Phones place the compact complete scene above the catalogue title, then keep every record and route action in a readable vertical sequence.

## Imagery

The required native WebGL model is built from original segment geometry: five seat slats, a separate back frame and boards, four legs, armrests and four contrasting joints. A depth-tested shaded mesh supplies actual spatial rendering; no imported model is required. One selected connector changes during the repeatable repair episode. A separate original SVG disassembly scheme preserves the same seat/back/joint relationship when WebGL is blocked or lost. Six local SVG concept illustrations depict a chair, lamp, bag, shelf, table and stitched mat. Their stories are authored scenarios, not product evidence.

## Navigation and interaction

Visible material, catalogue and route links and real sibling references support the reading route. Native material/theme selectors filter all six actual object records, with a useful empty state and reset. A route contains unique choices, requires at least two stops for export and refuses a fifth item. Up, down, remove and clear controls update actual order and count. Reordering restores useful focus. The real UTF-8 export includes current order, object numbers, material/theme labels and each scenario note. Choices remain only in this open page's memory; the interface tells visitors to download before closing.

## Motion

The chair's separated segments join over 800 milliseconds and then stop. Material scrolling changes a bounded separation amount; an explicit range works with keyboard and reduced motion. The repair button replaces one connector over 500 milliseconds and reports which illustrative color changed; repeating performs another visible replacement. Adding a stop updates the counter immediately while its number travels to the route receiver over 400 milliseconds. A bounded scheduler supports pause, relevant-region visibility, hidden documents and disposal. Reduced motion applies final states directly; no perpetual rotation, automatic sound or motion-locked content is used.

## Responsive behavior

At 1440 A keeps the scene next to the narrative and materials, then uses two-column illustrated bays beside a narrow route panel. B keeps a compact chair beside a long material ledger and worksheet. At tablet widths spacing contracts while actual controls retain complete labels. At 390 and 360 a compact scene precedes the content; material records, catalogue and route stack without sticky overlays. B retains a small distinct illustration beside each ledger record. Reorder controls wrap and all six choices remain reachable without dragging.

## Accessibility

Provide a skip link, one h1, a main landmark and literal section navigation. Native range and selectors have visible labels, and the WebGL canvas has a meaningful description paired with ordinary material text. The SVG alternative is explicitly labeled as a fallback. Actual count, capacity and repair status messages explain state changes. Button focus is blue on chalk/yellow and yellow on the blue route surface. Keyboard tests separately verify filtering, route operations and downloads; browser gates check contrast, uncovered controls, resources and overflow. These are scoped checks, not a blanket certification.

## Adaptation

Replace the fictional exhibition and six scenarios with original or licensed owner records. Preserve a complete segmental object, one explicit replaceable connection and a visitor-controlled route. Supply verified facts before claiming repairability, certified materials or environmental benefits. A real museum can replace the page-memory route with an accessible documented storage feature, but should state its boundary. Other stacks can retain native selectors, numbered route records and the same geometric relationships. The full creation brief carries project fields and A/B choice without depending on these exact fictional names.

## Avoid

Exactly three anti-patterns damage this direction: using unverified green claims or certificates as museum evidence; replacing the required native 3D with a decorative flat object while claiming WebGL; and presenting dead route controls or unrestricted counts that contradict the two-to-four-stop task. Keep all catalogue functionality working through the labeled SVG alternative.

## Closest styles

Industrial Spec uses dimensioned orthographic elevations, unit-bearing rows and revision records. Repair Atlas uses assembly/disassembly, material stories and an ordered visitor route, changing the image model, structure and practical navigation. Pop Commerce uses a product-price-choice offer and a filtered shopping shelf with bag arithmetic. Here museum numbers, scenario labels and route order replace prices, quantities and buying. Compare ready desktop and phone frames from both neighbors; strong sans type or yellow surfaces alone do not prove distinction.