Window Type

再現プロンプト

FATHOMTIDEの海洋研究コンセプト。大きな2行見出しの文字形だけに3本の水中映像を映し、スクロールで浅場から深海へ降りる。原寸映像の鑑賞、研究目的と成果物の比較、選んだ映像を引き継ぐ相談、停止と再試行を備える。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build FATHOMTIDE, a fictional marine research practice, as a complete responsive single-page concept. Its signature is “the letters are the window”: the ocean moves only inside four giant headings. The rest of the page is still, visible editorial content. Research concepts are illustrative; do not invent field deployments, equipment performance, certifications or operating results.

ART DIRECTION
A continuous #04070A background, #F5F5F5 main text, #9BB4C2 supporting text and #38BDF8 accent. Hairlines use rgba(155,180,194,.24). Bold system sans at weight 800 for the giant uppercase glyph windows; restrained sans body, small monospace chapter labels, and an occasional Georgia italic in the research/contact headings. No decorative cards, animated page-wide background or generic fade-up reveals.
The header sits outside the flexing inner scroller: wordmark, The descent, Research concepts, Build a brief, and Pause/Resume motion. Keep all links and the motion control on mobile. Let header rows reduce the scrollable height instead of overlaying content. A small persistent playback status sits below the scroller; failures offer Retry preview. The page is max-width 1680px, with 24–80px side padding.

CHAPTERS
01 / THE SURFACE: Surface tension
Heading lines: SURFACE / TENSION.
Start where the light enters. Moving reflections reveal a surface that never holds the same shape twice.
Question: How does a changing surface affect what we can observe?
Method: A repeat-photography concept: keep the viewpoint, timing and conditions beside every image.
Visual direction: Caustic light, broad forms and an open field of blue.
Local film: /video/demos/window-type/shallow.mp4

02 / MIDWATER: Where light thins
Heading lines: WHERE LIGHT / THINS.
Look into the water column. Suspended particles make movement visible long after the surface has disappeared.
Question: What context makes an observation useful to the next researcher?
Method: A field-log concept: pair an observation with its time, method and the limits of the available evidence.
Visual direction: Drifting particles, a slow pace and a reduced palette.
Local film: /video/demos/window-type/mid.mp4

03 / THE ABYSS: Deeper, alive
Heading lines: DEEPER. / ALIVE.
In the final study, points of light emerge from darkness. A quiet ending to a descent told through three visual fields.
Question: How can a record distinguish a sighting from an interpretation?
Method: An annotation concept: retain the source frame and keep uncertainty visible in the accompanying notes.
Visual direction: Isolated light, negative space and a restrained rhythm.
Local film: /video/demos/window-type/abyss.mp4
Each chapter has a quiet top label row, a large two-line glyph window, and an asymmetrical lower row: large readable description with Watch the full film on the left, and a narrow question/method note on the right. The first chapter has a working Descend button. On mobile these form a single reading column. Chapter IDs are real focused navigation targets. Keep text and links visible at all times; no opacity-zero defaults or reversing reveals.

NATIVE SVG WINDOWS, WITH READABLE FALLBACK
Use a unique SVG clipPath for each window, containing an actual text element with two tspans. Apply clip-path as an SVG presentation attribute to a g wrapping a foreignObject with a plain Canvas2D canvas. Never use a CSS mask-image bridge to a same-document SVG mask. The canvas draws the ocean only; SVG supplies the letter shapes.
Measure the wrapper with ResizeObserver. At a reference font size of 100px and weight 800, use Canvas2D measureText with the exact same font family to find advance/ink widths and actualBoundingBoxAscent/Descent. Fit one uniform size to 98% of wrapper width and 92% of height, including 105px line spacing per additional line at reference size. Maximum 300px, no fixed minimum that overflows narrow screens. Centre the actual ink vertically. Measure again after document.fonts.ready, and request a redraw after the measured SVG geometry is committed so a paused canvas also resizes; dispose the observer and ignore late font notifications after unmount.
Draw the same SVG glyphs in #5C8399 below the clipped canvas. The complete heading stays readable without Canvas2D, video or GPU. Include exactly one real h1 for the hero and hidden semantic h2s for subsequent glyph headings; the decorative SVG is aria-hidden. The footer has the one-line wordmark FATHOMTIDE. Do not distort letterforms with nonuniform scaling.

VIDEO COMPOSITING AND DEPTH
Use three existing local silent H.264 MP4 sources, each 1280×720, 24fps, 9.5 seconds: shallow (3,401,270 bytes), mid (3,535,101 bytes), abyss (1,230,438 bytes). Keep their original bytes. The skill distribution includes all three original movies, their three JPG posters, films.json with hashes and a placement guide under references/demo-assets/window-type/. Copy its video/ folder to the new site public root. A prompt copied from the website also needs these distributed assets. This handover is not a complete site source or a verified reproduction. Use the real source-frame JPG posters listed in site-video-posters.json. Embedded overview previews may use the existing lighter siteVideoSource mapping; a full-film dialog always opens the original file.
Scroll progress from the first chapter to the abyss gives depth 0–1. Blend only the adjacent one/two clips: shallow→mid across 0–.5, mid→abyss across .5–1. Exclude zero-weight clips. Release sources no longer needed. Load each poster independently and attach a movie URL only when its visible window needs playback or a saved viewed position must be restored. No wait for all three films.
Use one shared compositor for visible windows. Cover-fit native video/poster pixels without an intermediate downscaled canvas. A bounded vertical crop moves from 35% to 65% of available crop travel as depth increases: no modulo wrapping seam or aspect stretching. Composite weighted layers using the appropriate source-over alpha. Apply a lighten fill #5C8399 last, keeping settled glyph source colors at least 4.9:1 against #04070A. Cap per-window Canvas2D DPR at 1.5, embedded previews at 1.

GPU FALLBACK
A detached raw WebGL2 fullscreen triangle at 900×900 generates an ocean only when a needed video/poster layer has no pixels. Do not create or draw it underneath complete media layers. Release it when no longer needed. The original field uses simplex fbm, four octaves, domain warp, caustics near the surface, motes at depth, shallow bubbles, a pointer light and subtle grain. All smoothstep edges are ascending; use 1-smoothstep for inverse transitions. Compile/link and initial draw failures, missing contexts and context loss leave the static SVG headings and original film actions available. Clean partially created shaders/programs and release owned contexts.
Time advances only while motion is enabled and the window is visible. Depth and pointer smoothing use delta-correct retention .95^(dt*60) and .93^(dt*60), dt capped at .05 seconds. Preserve the clock and decoded video positions through hiding, dialogs and retry. Pointer movement is limited to the actual glyph window; touch keeps ordinary scrolling. Manual Pause and live prefers-reduced-motion stop automatic video and GPU time entirely. Scroll can still select the appropriate still for the chapter.

RECOVERY AND LIFECYCLE
Observe each actual picture with IntersectionObserver, including clipping by scroll ancestors. Only visible canvases draw; release all video decoders and GPU resources when there are no visible windows or the document hides. Keep the clock and per-film positions in state independent of those resources. Suspend background previews while a film or project dialog is open.
Each film/poster has a 12-second deadline. A rejection or media error keeps a real poster and exposes Retry preview, without retries on every frame. Retry retains scroll, reference and playback positions, and starts with motion paused. Late callbacks after disposal must not revive playback. Restoring a saved frame must keep its deadline until seeked, not clear it prematurely on loadeddata. Stop RAF and clear listeners/timers/resources on teardown. Native video/poster compositing works without WebGL.

WATCH THE FULL FILM
Every chapter opens a native dialog with one original 1280×720 film, native controls, preload=metadata and no autoplay. It starts paused. Provide previous/next through all three films, Close, Escape, heading focus on open and return focus to the actual opener. Keep the entire 16:9 frame with object-fit:contain. A failed film offers Retry film, restoring the viewed position while paused; move focus to the stable video control immediately so a delayed load cannot steal it later. Show the chapter description, visual direction and the fact that these are AI-generated visual studies, not observed field data. Use this reference in a brief passes that exact chapter into the project planner.

RESEARCH CONCEPTS AND BRIEF
The section “A question. A method. A record.” compares two actual planning options with question, method, outputs and starting material. Coastal observation: repeat photography from a fixed viewpoint, with an image index and annotated field log. Instrument study: a controlled interface/recording-workflow concept, with unresolved testing questions retained. Replace fabricated depth/precision/range specifications with these useful scope descriptions.
Plan this study opens the existing research brief with the chosen Research scope preselected. The selected visual reference, direction and question are facts included in both review and saved text; do not put them only in introductory copy that the review omits. The footer asks “What would you like to understand?” and opens the same planner. Keep its paper/ink/accent consistent with the page. The local flow validates a question, reviews choices and saves a brief; no external booking or field work is implied. Tests/builds do not prove visual quality: actual browser glyph clipping, motion, playback, keyboard/touch, zoom and current-site recordings still need inspection.

## Current video loading contract
This supersedes earlier blanket autoplay/preload instructions. Keep a real still frame from each background clip as its loading, failure and reduced-motion poster. Do not attach the MP4 URL or call play until the actual picture/scene is visible and needed. Use muted, loop, playsInline and initial preload=none; pause offscreen and in hidden tabs, and remove the source on teardown. A late play promise must not restart a stopped clip or pause a newer owner of the element. After rejection, keep the poster and retry on re-entry instead of retrying each animation frame.
Start the surface clip without waiting for the midwater and abyss clips. Blend only the adjacent one or two clips required by current depth. Render only visible text windows; use a still frame under reduced motion. The GPU ocean is a fallback for missing footage, not an extra render pass underneath complete video frames. Native video/poster compositing must remain available without WebGL. Use the text brightness floor #5C8399 against #04070A (4.96:1 source-color contrast before entrance opacity).

## 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": "window-type",
  "brand": "FATHOMTIDE",
  "accent": "#38bdf8",
  "paper": "#04070a",
  "ink": "#f5f5f5",
  "colorScheme": "dark",
  "title": "A research question becomes a brief",
  "intro": "Define the research question and the observations that will answer it. Compare the scope of two concept expeditions.",
  "facts": [
    [
      "Disciplines",
      "Marine observation, dive-system interfaces and field instruments"
    ],
    [
      "Planning outputs",
      "Research scope, equipment list and data handover plan"
    ],
    [
      "Field readiness",
      "Access, weather, crew qualifications and operating limits require separate review"
    ]
  ],
  "groups": [
    {
      "label": "Research scope",
      "options": [
        {
          "title": "Coastal observation",
          "detail": "A shore-based observation programme with repeat photography and field logging."
        },
        {
          "title": "Instrument study",
          "detail": "A controlled prototype study focused on instrument readability and the recording workflow."
        }
      ]
    }
  ],
  "brief": "Describe the research question, location context and the data you need to return with.",
  "notes": [
    "This brief is a planning document, not an operational dive plan. No field activity, availability or safety certification is represented by the sample."
  ]
}

- 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.