---
schema_version: 1
id: "light-environments"
name: "Light Environments"
summary: "Three distinct light installations connect a restrained exhibition narrative and a personal route workbench with real local storage, order and text export."
family: "spatial"
tags: ["dimensional", "calm", "geometric", "task-led"]
best_for: ["culture", "architecture", "portfolio"]
avoid_for: ["data", "documentation"]
density: "balanced"
image_dependency: "low"
motion_level: "expressive"
complexity: "medium"
signature: {"composition": "A narrow vertical title beside a broad installation and alternating environment essays; B immediate index, live stage and personal route ledger.", "typography": "Large restrained Arial display, fine numbered labels and readable practical sans-serif descriptions, with horizontal title reflow on phones.", "navigation": "Visible exhibition, environments, route and about anchors; actual sibling composition; B begins in a route-building workbench.", "content_rhythm": "Three distinct spatial essays followed by a route versus a compact environment index beside scene exploration and immediate route order.", "imagery": "Original native depth-tested stepped amphitheatre, pleated fabric vault and vertical shadow valley; three scene-specific original SVG fallbacks.", "color_and_material": "Dark petrol, fog gray and muted lavender, with directional matte surfaces, opaque captions and flat contrast-safe controls.", "interaction": "Select three environments, change light direction, add each once, move and remove stops, restore device-local route and export exact UTF-8 text.", "motion": "A 900ms horizon trace, 500ms darkened environment replacement, bounded mouse/light offset with 300ms return and one finite contour/fold/shadow accent per essay."}
status: "ready"
prompt_path: "prompts/light-environments/prompt.en.md"
---

# Light Environments

## Intent

Light Environments presents a fictional virtual exhibition through three original spaces and a visitor-controlled route. Velumbre has no real artists, dates, tickets or reservation service. The visitor explores a sand amphitheatre, a fabric vault and a shadow valley, changes illumination and arranges a personal sequence. A real text download carries that sequence away from the page.  This direction suits cultural concepts, exhibition proposals and architectural experiences with a small number of meaningful environments.

## Signature

Preserve five relationships: a narrow title strip beside a broad opening installation; three unmistakably different silhouettes; dark space around large readable type; bounded directional illumination; and a numbered personal route with reversible order. The amphitheatre repeats curved steps around an open centre. The fabric vault rises as a continuous pleated arch. The valley frames a passage between tall planes and their long shadows. A introduces these spaces as an exhibition; B places their selection beside the live stage and route ledger immediately.

## Typography

Arial supplies both the restrained large display and practical body text, with Helvetica and generic sans-serif fallbacks. Display size, weight and spacing establish hierarchy without adding a font dependency. The vertical opening title reads upward on wide A screens and returns to horizontal writing on phones.  Short numbered labels organize the three environments. Explanatory paragraphs retain ordinary casing, readable line height and a moderate measure. Lithuanian letters occur in names, navigation, controls and the visible footer sample.

## Color and surfaces

Dark petrol supports the page and a slightly lighter petrol defines installation stages and the route panel. Fog gray carries geometry and secondary text; muted lavender connects fabric, horizon and useful actions. Generated semantic tokens drive both interface and WebGL colors. Geometry uses directional shading on original surfaces. Controls remain flat and readable rather than becoming part of the scene. Captions sit on opaque panels. Borders and focus rings retain contrast on both petrol surfaces; an attractive dim scene never justifies dim instructions or unlabelled states.

## Layout A

A visible masthead provides Exhibition, Environments, My route and About links. A narrow vertical title strip sits beside a broad initial amphitheatre. Direction buttons, a motion control and an explicit environment invitation follow the scene. Three environment essays alternate large schematic studies and original descriptions. Each essay offers a real exploration action and an add action. A broad typographic invitation then shares space with the personal route ledger. The concept and storage explanation close the exhibition. The visitor understands spatial differences before composing a sequence.

## Layout B

B begins with a horizontal invitation and an immediate three-zone workbench. A compact index exposes all three descriptions and add controls; the selected native scene occupies the broad centre; a numbered route ledger sits alongside. Selection, exploration and route construction therefore happen together. Tablet and phone layouts deliberately put the live stage first, the environment index second and the route third. The about section follows the working desk.

## Imagery

All three scenes use original native WebGL meshes and shaders. The amphitheatre has six curved stepped bands, an open centre and an illuminated outer contour. The vault is a continuously curved pleated canopy over a ground plane and four restrained supports. The valley uses two rows of tall narrow planes, with original flattened shadow geometry responding to light direction.  Three original SVG diagrams provide truthful scene-specific static fallbacks and repeat the silhouettes in the ordinary HTML essays. No models, photographs, textures or external services are loaded.

## Navigation and interaction

Native buttons select environments and adjust illumination left, centre or right. Exploration brings the chosen stage into view without an orbital camera journey. Add controls permit each environment once; the list provides explicit move-up, move-down and remove buttons. Reordering restores a useful keyboard focus and announces the result. The route persists automatically in this browser only. Download creates an actual UTF-8 text file in the current order. Clearing removes the exhibition's stored record. Storage failures retain in-memory editing and export, with an honest visible explanation. There is no simulated sharing or submission.

## Motion

The first amphitheatre horizon traces once in 900 milliseconds and settles. An environment change briefly darkens the scene over 500 milliseconds, replaces geometry at the midpoint and ends in a stable composition. Mouse exploration causes only a small light and view offset; exit returns it in 300 milliseconds. Explicit direction buttons provide the phone and keyboard equivalent. Passing an essay triggers one short contour, fold or shadow accent and then stops. Pause, visibility and intersection handling bound work. Reduced motion immediately applies informative states and disables pointer parallax and essay animation.

## Responsive behavior

At 1440 pixels A preserves a vertical title and generous installation, then alternating essay spreads. B uses three unequal workbench columns. At intermediate widths the title narrows and B reduces to two columns before stacking its stage, index and route. At 390 and 360 pixels A uses a normal horizontal title, a compact complete scene and stacked essay content. B uses small indexed diagrams beside short descriptions. Native controls remain large enough to operate, route buttons wrap and no horizontal canvas dragging is necessary. Essential scene descriptions always remain ordinary document content.

## Accessibility

Provide one h1, a main landmark, a skip link and visible local navigation. Selection and direction controls expose pressed states; disabled add controls explain their already-added state. Canvas alternatives identify the current installation and connect to full HTML descriptions. Numbered route content remains usable with graphics blocked. Live storage and route messages describe actual outcomes without claiming network delivery. Acceptance covers real depth-tested graphics, finite episodes, reduced motion, context loss, keyboard arrangement, actual download bytes, local restoration and four widths. These scoped checks do not imply a universal accessibility certification.

## Adaptation

Replace the fictional exhibition and descriptions with approved project content while retaining three distinct spatial rhythms and the personal-sequence task. Another stack can preserve the same ordinary controls and storage boundary. New geometry needs its own original or licensed source and a matching fallback. The full creation prompt includes project, audience, technology and composition placeholders. For a real exhibition, the owner must provide verified artists, dates and any ticket integration separately.

## Avoid

Exactly three deviations damage this direction: showing three recolored versions of one blob instead of distinct architecture; turning a brief environment change into a prolonged automatic camera flight; and offering a route whose order, persistence or exported text differs from the visitor's actual choices.  The personal route should continue to work when WebGL or local storage is unavailable.

## Closest styles

Twilight Expedition uses one stable mountain panorama, a small observatory and an evening itinerary with duration and contact draft. Here three constructed interiors, an exhibition index and a reorderable private sequence change imagery, composition and user task. Soft Spatial uses static CSS clay objects, an airy warm surface and an object-to-practice service sequence. This direction uses native stepped, vaulted and vertical meshes, dark petrol space, active illumination and a workbench route ledger. Compare actual ready A/B desktop and phone frames across those dimensions, rather than treating a shared spatial family as visual duplication.