枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
WAYMOSSのアウトドア・フィールドジャーナル。実際のThree.js地形と同じ経路を使い、スクロールで4つの観察地点をたどる。俯瞰／経路視点、回転・停止・復帰、ノート2種の中身とサンプルページ、選んだ問いとキットの確認・保存を備える。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Create WAYMOSS, a fictional field-journal brand, as a complete responsive site. The visitor follows an imagined landscape, chooses a question worth observing, compares two notebook kits and saves a plan. The main visual is a real Three.js landscape, not four generic CSS animations or a scroll number labelled as measured altitude.
ART DIRECTION
Warm stone #e6e7de, paper #f3f1e8, deep moss #20352b, muted #59685c and a restrained rust #935b32. Green actions use #344b3b with pale text. Serif headlines use Georgia, body and controls use Arial/Helvetica, tiny chapter labels use monospace. Hero: “A little further. A closer look.” Supporting line: “Field notebooks and observation prompts for the things you almost walked past.” Use a quiet editorial grid, hairlines and generous type; keep text visible by default.
The header sits outside the inner flex scroller and retains The atlas, Field journal, Choose a kit and Pause/Resume motion at every width. Navigation focuses the actual target. The desktop story is a two-column grid: text on the left and one sticky map spanning all four chapters on the right. DOM order: first chapter, map, then the remaining chapters. Under 900px use that same order in normal flow. The map controls must stay reachable in short viewports and when Explore is expanded. A header must reduce the available scroll height rather than cover content.
FOUR OBSERVATION CHAPTERS
1. THE FOREST EDGE, route 0%
Begin by noticing.
A good field note starts before the first photograph. Stop, look around and choose one thing to follow.
Take a note: What changes when you stand still?
Local supporting illustration: /img/demos/scroll-odyssey/chapter-03-lattice.webp
2. THE VALLEY, route 32%
Follow the small changes.
Light, water and ground leave different kinds of traces. Keep the conditions beside the observation, so it can make sense later.
Take a note: Which detail tells you where the water has been?
Local supporting illustration: /img/demos/scroll-odyssey/chapter-01-depth.webp
3. THE RIDGELINE, route 67%
Make room for a wider view.
Draw the outline before naming the place. A rough sketch can preserve a relationship that a list of names leaves out.
Take a note: What sits in front of the distant ridge?
Local supporting illustration: /img/demos/scroll-odyssey/chapter-04-converge.webp
4. THE LAST PAGE, route 100%
Bring something back.
At the end of the day, return to your first question. Leave space for what you did not notice and what you would look for next time.
Take a note: What would you return to observe again?
Local supporting illustration: /img/demos/scroll-odyssey/chapter-02-bloom.webp
Each chapter has its label, heading, readable copy, a local 3:2 illustration and the observation prompt with a working action. The illustrations are imagined landscapes, not photographs of the 3D route. Do not reuse the old spinning ellipses, glowing flower, tilted grid, converging dots, fogged body copy or faux 420–3260 metre altimeter.
EXACT LANDSCAPE ASSETS
GLB: /models/ridge-terrain-b86bdc474539.glb, 1201392 bytes, SHA-256 b86bdc4745398c7a2a170693811c16b4883eb4195056e716f7ac368a3171d329.
Reference: /models/ridge-reference-f32b5710cbeb.webp, 1600×1100, 74480 bytes, SHA-256 f32b5710cbeb9a5d4f04b4dbc56d3688c344b61b08e8f03676279a70f70e3be3. This is the existing CPU geometry reference, not a GPU recording.
Route data: /models/ridge-route-5293cb426785.json, 10175 bytes, SHA-256 5293cb4267851143a14117104da7982d9428a8792478fba94b37c7f2fe6e8bab. Its 321 sampled route points, horizontal control points and four stops belong to the same terrain. Units are model units, not geographic coordinates.
The distribution includes these three assets, all four chapter illustrations, the original terrain geometry/camera helpers, the asset manifest and a placement guide at references/demo-assets/scroll-odyssey/. Copy its models/ and img/ directories to the new site public root. The two source helpers under source/src/ preserve the exact height and curve functions; adapt TypeScript/import syntax if building a single HTML file. A website-copied prompt also needs these distributed assets. Asset/helper delivery is not a complete site source or a verified reproduction.
REAL THREE.JS SCENE
Load the GLB with GLTFLoader only when the actual map picture first becomes visible. Bound download and parsing by 12 seconds, validate expected bytes, GLB magic and the model structure. The source contains terrain_surface (129×113 vertices), terrain_edge, elevation_contours, trail_route (15,360 indexed triangle entries), and stop_forest/valley/ridge/hut. Keep the decoded original without a live renderer. A visible renderer owns cloned geometry/materials; release each clone once without disposing the original. Abort on teardown, ignore late fetches, and dispose a late parsed model after cancellation or timeout.
The shared helper's terrain is an 8×7 grid at 128×112 subdivisions, vertex-coloured from #b0bba3 to #e8e3d1. Its actual triangulated contour intersections, side skirt, projected Catmull-Rom route and four stops remain coherent. Use the delivered helper functions to preserve geometry, route arc length and camera clearance. The active route draws only up to the current progress; keep a faint full-route duplicate at opacity .18, depthWrite false. The active tube uses polygon offset to avoid fighting with the ghost. Add a small pale travelling sphere with a rust ring, positioned on the same route, and emphasise the current stop near its actual progress.
Use a renderer with antialiasing, SRGB output, ACES tone mapping, exposure 1.05, a procedural dithered 64×1024 sRGB background gradient #f2f3ec → #dcded4 and DPR capped at 2 (embedded preview 1). Lighting: warm directional intensity 2.8 at (-3,7,5), hemisphere #f0f4e7/#617052 intensity .9, a restrained shadow on a ground plane below the terrain. Directional PCFShadowMap 2048² with radius 2, camera bounds ±7, near 1/far 25, bias -.0003 and normalBias .02. Bake RoomEnvironment with PMREM once per visible session, environmentIntensity .35; dispose the room, render target and generator at teardown. Download no environment files. Ground ShadowMaterial opacity .2. On cloned terrain only, blend height colours with slope and north-facing shading; surface roughness .88, skirt .95. Use a lit MeshStandardMaterial route, roughness .55, casting shadows. Keep original contour lines at opacity .35 and add derivative-antialiased height contours every .1 model unit in the terrain shader. Do not change the original GLB or geometry topology.
SCROLL AND CAMERA
Use the measured top of the four text sections to map scroll into progress values 0,32,67,100 by piecewise-linear interpolation. Coalesce native passive scroll/resize updates through one animation frame. Under Follow the story, overview yaw is 28−progress×.65 degrees; pitch is 52+sin(progress/100×PI)×7. A stationary marker is never presented as a literal altitude measurement.
Atlas uses the existing fitTerrainOverview orthographic camera; preserve the entire terrain at narrow and wide aspects through rotation. Along the trail uses the same route/camera path as the delivered helpers, a 48° perspective camera, altitude 1.3 model units and a forward look-ahead. The path stays above terrain at arrival too. Use a shared stable fog object from distance 10 to 26 in trail view, a separate faint 18–40 fog in atlas view.
Damp progress/yaw/pitch with .88^(dt×60), dt capped at .05s. When all errors are below .005, commit the exact targets, draw the full last route segment and stop the render loop. Restart on a changed view/scroll target. There is no perpetual idle render loop. Manual pause or live reduced-motion holds the current camera frame, without snapping an unfinished tween to its target. Subsequent explicit view/scroll changes apply immediately. Resuming can ease toward the current story target. No automatic camera tween runs while paused.
MAP CONTROLS AND RECOVERY
Four native chapter buttons navigate and focus the corresponding text section, restoring Follow the story. Atlas/Along the trail switches cameras. An explicit Follow the story checkbox resumes the position of the current page. Explore the landscape contains a labelled 0–100% route slider, a 35–75° viewing-angle slider, Rotate left/right in 15° steps, Reset view and an opt-in touch-rotation checkbox. Manual exploration turns off Follow so scrolling does not silently undo a chosen view. Mouse drag in atlas mode changes yaw/pitch with clamps −90..90° and 35..75°. Touch scroll stays native until explicitly enabled, and trail mode always keeps vertical page scrolling even if the touch checkbox remains checked.
Pause/Resume stays in the header. Suspend the map when the plan dialog opens. Observe the actual picture, including clipping ancestors; release GPU resources offscreen/when the document hides, while retaining settings and the decoded original. Keep the real reference visible until a successful first frame. Shader/renderer construction, first draw after resize and context-loss failures leave the reference and all chapter/kit controls available. Retry 3D focuses a stable view button, retains the selected chapter/settings and pauses motion. Clean observers, timers, source ownership, cloned resources, shadows and contexts at teardown.
TWO CONSISTENT NOTEBOOK KITS
Day field notes · £32
One place. One day. A pocket-sized starting point for looking more closely.
Included: Compact field notebook; Pocket sleeve; Landscape observation prompts.
Good for: A short walk, a familiar place or a first field journal.
Cover colour: #344b3b
Extended field notes · £48
More room to connect visits, compare conditions and keep a longer record.
Included: Everything in Day field notes; Larger atlas notebook; Weather log sheets.
Good for: Repeat visits, longer observations and notes that need a second page.
Cover colour: #a06843
“Less to carry. More to keep.” introduces a side-by-side comparison. Use restrained book-cover mockups with actual WORDS on the cover, contents lists and clear prices. Open sample pages is native details showing readable example observations, conditions and a simple original ridgeline sketch. Small screens stack page content so it can be read without tiny type. These are illustrative notebook editions; do not imply certified protective gear, waterproof-performance ratings or an established quarterly shipment schedule.
The chosen Kit option and the current observation prompt/journal chapter must reach both review and saved plan. Plan actions beside individual chapter prompts use that specific chapter. Footer: “What will you notice next?” The local dialog uses the same paper, ink and moss accent. Validate and save the visitor's selections through the existing plan flow; no real checkout or shipment is represented by the demo.
QUALITY BOUNDARY
The actual geometry, asset hashes, state transitions and saved choices can be checked offline. Separately inspect the real browser's GPU image, motion cadence, shadows, pointer/touch, sticky layout, focus, resizing/zoom, current-site scroll recordings and fresh reproduction. Do not claim a high-price or award-level acceptance from structural tests alone.
## Action flow and content
Implement the following local planning experience for the primary CTA, in the visual language of the page. Use a real button opening a labelled modal dialog. Choosing a pricing card must preselect that exact plan. A navigation link may move to another section; a planning CTA must lead to its review flow.
Use this content for the dialog, including the option details and notes:
{
"slug": "scroll-odyssey",
"brand": "WAYMOSS",
"accent": "#344b3b",
"paper": "#f3f1e8",
"ink": "#20352b",
"title": "Build your field-kit plan",
"intro": "Choose the kind of observation you want to bring home. Each kit starts with a field notebook and a route-study prompt.",
"facts": [
[
"Format",
"Field notebooks, sleeves and observation prompts"
],
[
"Purpose",
"Keep observations, sketches and conditions together"
],
[
"Planning",
"Compare a concept edition and save a kit plan"
]
],
"groups": [
{
"label": "Kit",
"options": [
{
"title": "Day field notes · £32",
"detail": "A compact notebook, pocket sleeve and landscape observation prompts."
},
{
"title": "Extended field notes · £48",
"detail": "The day kit plus a larger atlas notebook and weather log sheets."
}
]
}
],
"notes": [
"Sample prices include the kit only; shipping is separate. The artwork is a fictional landscape, not a navigation map or an assessed walking route."
]
}
- Explain before input that this is a fictional brand sample: choices can be reviewed and saved, with no external submission, booking, payment or registration. Use each brand's language. Do not launch a mail client or present an installer for a fictional product.
- Give every option group a legend, inputs explicit labels and errors linked descriptions. Validate options against the allowed values, requested dates as actual dates from today onward, and free text as 10–2,000 trimmed characters. Blank spaces alone must fail. Tracking accepts the sample reference TG-2048 only.
- Focus the first invalid field and preserve every entered value. On success, show the selected option WITH its full detail, requested date or brief, relevant facts and notes. An edit action returns to the preserved form. Do not claim a real reservation, purchase or account has succeeded.
- Save the complete review as UTF-8 text. A browser download request is not proof of a file being written. On download failure, retain the full text in a labelled, selectable textarea and offer retry. Do not show a false success state.
- Constrain modal content to the viewport with internal scrolling. Support keyboard and touch, trap focus while open, close on Escape and restore focus to the exact initiating control. Keep these operations available with motion disabled.
- If a separate project-contact CTA is present, let it collect a project brief and review it locally; a product selection CTA must retain the product choice. Verify both flows independently.