---
schema_version: 1
id: "trail-composer"
name: "Trail Composer"
summary: "A paper trail and transparent three-input selection produce an imaginary day plan, linked preparation checklist and current UTF-8 download."
family: "illustrative"
tags: ["annotated", "task-led", "calm"]
best_for: ["travel", "personal"]
avoid_for: ["data"]
density: "balanced"
image_dependency: "low"
motion_level: "expressive"
complexity: "medium"
signature: {"composition": "A vertical paper trail beside invitation and chooser; B day ledger with adjacent map.", "typography": "Quiet Georgia invitations with readable Arial timing and labels.", "navigation": "Choices/plan/preparation anchors and actual A/B siblings.", "content_rhythm": "Invitation, moods and vertical stops versus conditions, table and preparation.", "imagery": "Original schematic SVG with four numbered points and HTML equivalents.", "color_and_material": "Pale map paper, lake blue, moss green and small orange route marks.", "interaction": "Duration/intensity eligibility, mood ranking, real open/back, checklist and TXT download.", "motion": "900ms first path, 300ms mood, 450ms stops and finite checkbox confirmation."}
status: "ready"
prompt_path: "prompts/trail-composer/prompt.en.md"
---

# Trail Composer

## Intent

Trail Composer gives a slow day trip a legible paper form. The fictional Keliata concept uses three original imaginary plans rather than unverified Lithuanian destinations. A visitor sets available time, movement intensity and mood, inspects a suitable example, marks preparation and downloads a real text file. All durations are illustrative estimates. The schematic geography is explicitly unsuitable for navigation, and no organizer, booking, weather or access information is invented. The design makes a sequence understandable before asking someone to commit to it.

## Signature

Preserve five invariants: pale map-paper ground; a narrow vertical trail with numbered stops; lake blue and moss green with small burnt-orange route marks; a finite drawn-path episode; and an ordinary HTML stop sequence tied to actual selection. A pairs its invitation and visible chooser with the broad paper map, then introduces three route moods. B starts with a working conditions row and a day-plan ledger beside a narrower linked map. Both keep the preparation checklist connected to the chosen plan.

## Typography

Georgia provides a quiet large invitation and route titles, while Arial keeps practical labels and timing information direct. Page and stop identifiers use compact sans-serif metadata. Headlines wrap into short deliberate lines; descriptions keep a comfortable reading measure. Exact clock labels remain readable beside approximate durations. Lithuanian names, explanations and checklist items exercise accented characters in real content. System fallback stacks need no font requests. On phones labels remain full words rather than cryptic travel abbreviations.

## Color and surfaces

Very pale yellow paper forms the ground and a deeper paper tone holds the original map. Lake blue suggests water, moss green supplies the primary action and route context, and burnt orange marks the drawn trail and focus. Dark blue-green text remains readable on both paper surfaces. Semantic generated tokens own these colors, including the illustration roles. Translucent lake and terrain shapes never carry essential labels. Markers use shape and number as well as color, so the selected sequence is not communicated by hue alone.

## Layout A

The first spread puts the invitation and complete three-input chooser beside one vertical trail drawing. Three distinct route summaries follow, each with a working example action that loads its own conditions. The chosen four-stop day plan unfolds as a numbered vertical sequence. A preparation section pairs a calm explanation with real checkboxes and the download action. Native questions explain the illustrative geography, ranking rule and local data boundary. This is an invitation-to-mood-to-day-plan reading route.

## Layout B

B begins with a short plan-sheet proposition followed by one horizontal conditions row. Its main spread puts a readable day-plan table beside a narrow map sheet. Every row combines an approximate time, a named stop, an explanatory note and allocated minutes. Preparation follows the working ledger; the three route examples appear later as alternatives. On phones the ledger stays legible before the map and preparation. This changes both information structure and task order from A’s invitation and vertical narrative.

## Imagery

One original SVG describes a fictional vertical path, four numbered markers, pale water and terrain shapes and contour-like rules. It is a paper planning illustration without coordinates, imported map tiles or actual place claims. The essential stops and all timing information repeat in HTML. No photos, models, font binaries or external runtime libraries are used. The asset inventory is intentionally empty because the inline drawing is authored with the reference code. A real destination adaptation must provide verified local evidence.

## Navigation and interaction

Visible links reach choices, plan and preparation and open the real sibling reference. Native select fields expose the three constraints. Candidate plans must fit both duration and maximum intensity; mood match takes priority among those candidates, followed by the longest fitting option. A mismatch is explained honestly. Opening reveals the current sequence; back returns focus to the duration choice. Route examples set their matching fields explicitly. Checkboxes retain page-local preparation, and the actual UTF-8 export includes choices, complete stop notes and every checked state.

## Motion

The first 900-millisecond episode draws only to the first route section and stops. A mood edit briefly emphasizes the corresponding actual marker over 300 milliseconds while the textual recommendation updates. Opening a plan unfolds its four stop records over 450 milliseconds. A checkbox triggers one 180-millisecond confirmation movement. Pause, offscreen and hidden-document suspension bound the finite runtime; reduced motion applies immediate informative states. No route tracing repeats indefinitely and no essential content depends on a mouse pointer.

## Responsive behavior

At 1440 pixels A uses a balanced choice/map spread and three route summaries. B gives the table most of the width and keeps the schematic map as an adjacent reference. Tablet controls wrap before losing labels, and column gaps contract. At 390 and 360 pixels all choice fields and route summaries stack. The table retains concise readable time and minute columns while the stop note wraps. The original SVG stays inside its paper frame. No horizontal document scrolling or drag gesture is required.

## Accessibility

Provide one h1, a main landmark, clear navigation and visible focus. All SVG meaning has ordinary HTML equivalents, with an honest image title and description. Native selects, buttons and checkbox labels preserve keyboard operation. Errors expose incomplete choices and disable unavailable open/download actions. Result headings receive focus only after explicit opening; back restores the editing route. Table headers and caption identify its units and approximate time. Scoped browser, keyboard and exported-content evidence supplements the visual rubric without claiming certification.

## Adaptation

Replace imaginary plans only with approved route information, accurate access guidance and rights-cleared images. Keep elapsed-minute allocation separate from real transport, distance and terrain claims. Preserve the duration/intensity eligibility rule and explain mood tradeoffs instead of returning an impossible plan. A larger catalogue may introduce better ranking while retaining the plain stop list and transparent reasons. Existing frameworks can own the native form, sequence, table and file creation. Add persistence or submission only when the real product specifies it.

## Avoid

Exactly three deviations break this direction: presenting schematic coordinates or imagined stops as a verified real route; recommending a day that exceeds the visitor’s selected time or intensity without explanation; and hiding the itinerary behind a graphical map with no readable equivalent. Keep the download current and avoid simulated booking or email success. The selected-plan relationship matters more than adding map decoration.

## Closest styles

Field Notes uses a documentary photograph, marginal observations and a chronological travel diary. Trail Composer uses a schematic vertical paper route, three-input eligibility and an exported plan/checklist. Imagery, task/navigation and content structure differ. Twilight Expedition uses a dark depth-tested panorama, a small observatory and a route-to-enquiry ledger. Here pale SVG map paper, mood selection, a vertical stop sequence or tabular plan, and a preparation download replace landscape atmosphere and unsent enquiry. Actual ready phone and desktop previews establish these differences beyond a common travel topic.