--- schema_version: 1 id: obsidian-stage name: Obsidian Stage summary: A precision metal object fills a black stage, opens into scroll-driven layers and resolves into a light, exact-price configuration desk. family: spatial tags: [luxury, dimensional, product-led, metallic, cinematic, high-contrast] best_for: [products, campaign, commerce] avoid_for: [data, publishing, documentation] density: sparse image_dependency: low motion_level: expressive complexity: high signature: composition: A single tall metal object on a black stage leads A into five sticky chapters; B opens with three objects on a light comparison bench and a specification matrix. typography: Local Manrope at 400 and 600, restrained uppercase labels and a campaign heading capped at 80 pixels. navigation: Visible idea/model/selection routes, normal document scrolling and direct keyboard rotation controls. content_rhythm: One thought and one large metric per scene; a deliberate dark-to-light transition ends the narrative in a configuration receipt. imagery: Original native WebGL rounded metal recorder with microphone slots, circular glass dial, luminous waveform and recessed record key; authored SVG fallbacks. color_and_material: Black, graphite and cool near-white surfaces with one icy blue accent; the final selection area uses paper and dark ink. interaction: Scroll separates and recombines three physical layers; model, finish and storage controls calculate an exact local demonstration price. motion: A finite 1400 ms arrival, direct user-controlled rotation and scroll changes; pause, static reduced-motion image and complete resource disposal. status: ready prompt_path: prompts/obsidian-stage/prompt.en.md --- # Obsidian Stage ## Intent Obsidian Stage gives one precise object room to become understandable before asking a visitor to choose it. The fictional Veylqor recorder saves a spoken thought through one physical button. Its specifications and prices are explicitly illustrative, not manufactured-product claims. The visitor can study the shell, glass and electronics, then compare three models and build a configuration. This direction works when material, proportion and a small number of meaningful differences deserve more attention than a grid of promotional features. ## Signature Preserve five invariants: a dominant precision object against uninterrupted space; one geometric sans family with small spaced labels; a sequence of one feature and one metric per scene; a structural opening and reassembly tied to normal scrolling; and a light selection desk with a readable itemized total. The original recorder has a rounded metal enclosure, circular glass sound dial, a visible microphone grille and one recessed circular key. ## Typography Manrope is bundled locally with its complete SIL Open Font License. The 28 KB Latin and Lithuanian subset contains both cases of ĄČĘĖĮŠŲŪŽ. Body copy uses 400 and headings use 600; the variable font face declares the actual weight range, avoiding synthetic semibold. Campaign headings use clamp and stop at 80 pixels, with 42–54 pixel mobile headings. Labels are 11–13 pixels, spaced and uppercase; prices and explanations retain normal casing. ## Color and surfaces Black is the main stage and graphite supports the intermediate construction chapters. Near-white and a readable cool gray serve text. The single icy blue accent connects the luminous sound dial, action and focus indicator. Configuration switches to near-white paper and dark ink with its own readable muted tone and boundary token. UI colors consume tokens. Mesh and SVG colors describe the original object's material rather than hiding an alternative interface palette. ## Layout A The first screen pairs a compact campaign statement with a near-full-height recorder. A single primary link enters the construction sequence. Five chapters then describe form, layers, recording, endurance and reassembly. A shared scene occupies the right side of the desktop story while the left column advances one feature and one metric at a time. The object rotates, separates and closes through continuous ordinary scrolling; there is no wheel interception or forced snap. Reduced motion replaces the sticky treatment with a normal reading sequence, the construction chapter accompanied by its static layer illustration and the other chapters led by large metrics. The light configurator is the final sixth principal story section after the opening. ## Layout B The comparison page opens on light paper with a three-model lineup. Its centered title and evenly aligned model captions establish a buying-decision task immediately. The native scene renders three sizes of the same invented object; reduced mode composes three local illustrations. An accessible specification matrix follows, making weight, recording rate, endurance, memory and base price comparable across columns. Then the configuration desk places choices beside a receipt. A dark closing statement returns to the object's quieter premise. This is a horizontal comparison and decision path, structurally different from A's vertical feature narrative. ## Imagery All imagery is original code and vector geometry. Native WebGL constructs rounded extrusions, discs and toroidal rims with computed normals, depth testing and directional material lighting. There are no imported models, stock pictures or AI-generated images. The fallback SVG is an informative crafted view of the same enclosure, dial, grille and key. A second SVG explains the three construction layers. Failure never leaves an empty canvas, removes useful copy or disables the configuration form. ## Navigation and interaction The header exposes the idea, models and selection destinations. Left and right buttons rotate the object with a keyboard or touch; a horizontal pointer gesture offers the same action without capturing vertical page scrolling. Native radio groups select model, finish and memory, updating the object treatment and the itemized total. A required demonstration acknowledgment produces a visible error and focused checkbox when omitted. Submission writes a precise local summary and moves focus to it. Reset restores all default choices, price and confirmation state without reload. ## Motion The initial WebGL orientation settles in 1400 milliseconds. No perpetual rotation, shader timer or ambient animation runs afterward. Scrolling explicitly controls construction spread and angle. Pause freezes the arrival and scroll response; direct selection and rotation controls still apply intentional changes. Reduced motion uses decoded local SVGs without a requestAnimationFrame loop. Missing WebGL and context loss also display a labelled static scene. Intersection and document visibility suspend pending animation; pagehide disconnects observers, cancels animation and deletes GPU buffers and the program. ## Responsive behavior Desktop gives the object the majority of the introductory width, with a concise left statement. At 768 pixels text and geometry retain their proportions before the configuration moves to a single column. At 360 and 390, the title comes first, followed by a large uninterrupted object and reachable controls. Reduced-motion chapters stack their illustrations after the feature and metric. The comparison lineup emphasizes its middle object while keeping the outer models and all captions visible. The specification matrix is allowed to scroll inside its named, keyboard-focusable region; the document itself must not overflow. Configuration choices remain readable, tall native controls. ## Accessibility Use semantic headings, a labelled navigation, fieldset legends, native radio semantics, live price output and explicit error/status regions. Images have useful alternatives; duplicated decorative geometry is hidden from assistive technology. Focus is visible on light and dark surfaces. The font contains Lithuanian characters rather than relying on a fallback assertion. Runtime, keyboard, price combinations, reduced motion, lost graphics, widths and actual rendered contrast are checked separately from editorial judgment. Exact outcomes belong in docs/evidence/S52.md. ## Adaptation For another compact physical product, replace the geometry and factual copy while preserving scale, material restraint and a meaningful assembly story. A portable light could open into lens, power unit and enclosure; an acoustic tool could expose diaphragm, chamber and shell. Every layer should teach something, not merely fly apart. Replace the demonstration pricing table with approved values and integrations only when the target project authorizes them. When no graphics capability exists, supply a matching authored static view and the same functional form. ## Avoid 1. Do not replace the dominant object with a small thumbnail above interchangeable feature cards; the material study is the composition. 2. Do not add continuous spinning, scroll locking or gratuitous fragments; opening layers must explain the object and settle under user control. 3. Do not hide prices in decorative gold gradients or present a fake successful purchase; the light receipt must show the exact, explicitly demonstrative calculation. ## Closest styles Soft Spatial uses static clay volumes, diffuse room light and an indented practice overview. Obsidian Stage uses a metal-and-glass device, native depth-tested rendering and a five-chapter assembly narrative ending in a working price desk. Light Environments is a three-space installation exhibition with environment switching and itinerary composition; this direction studies one manufactured-object concept and compares its model variants. Compare actual desktop and mobile previews at the same widths; subject matter alone does not establish difference.