Flap Board

再現プロンプト

架空の夜行列車ブランド「NOCTURNE EXPRESS」の1ページ。暗い夜の駅ホーム映像を気配程度に敷き、上下2枚の札がrotateXで回転するsplit-flap表示、7枚の中間文字、残像、行ごとのホバー再フラップまで、駅の案内板の言語で貫く。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build a self-contained HTML + CSS + JS page for the fictional overnight-rail brand NOCTURNE EXPRESS. Use GSAP and ScrollTrigger for a mechanical split-flap signature and native HTML controls for a complete local journey planner. This is a designed sample, with illustrative routes and fares; never imply a live service or confirmed booking.

## Art direction
Near-black #0B0C10, panel #14161C, warm foreground #F5F1E6, muted labels #BDB7AA, and a single amber #F5C518 accent. Borders #514936 and #37352F establish quiet divisions. Use a plain system sans-serif for prose and a ui-monospace / SF Mono / Menlo stack for flap characters, times and fares. Flap glyphs are weight 800; ordinary body copy is 14–16px, line-height 1.65. Eyebrows are 10–12px with restrained uppercase tracking. Do not add gradients to buttons or independent visual effects to every section.

The night-platform background uses /video/demos/flap-board/platform-night-loop.mp4 with a real still frame, a dark scrim and a faint amber glow. The picture is atmosphere; the readable timetable and cabin photos carry the story. Original local cabin photographs are /img/demos/flap-board/cabin-solo.webp, cabin-duo.webp and cabin-suite.webp. Use responsive srcset with the existing 480px WebP and the full original 1536×1024 WebP delivery asset. Select a source suited to the rendered card width and device pixel ratio, lazy-load below-the-fold cabin images, and preserve the original 3:2 framing. Use descriptive alternative text and preserve content if a photo cannot load. Do not substitute bright generic hotel stock.

## Split-flap construction
Each fixed-width character has four clipped half-height layers: static upper upcoming glyph, static lower outgoing glyph, rotating top leaf from 0 to -90 degrees around its bottom edge, and rotating lower leaf from 90 to 0 degrees around its top edge. Perspective 320px. Glyph spans are double their parent's height, with the lower half offset top -100%. A blurred leaf afterimage may use opacity .28, blur 1.4px and a 45ms delay. This is an ornamental trail, not a claim of a physically simulated display.

Use 7 intermediate glyphs from ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.- followed by the real value. Intermediate flip 70ms, final landing 230ms, bottom delay 30ms, gap between flips 18ms. Stagger columns 40ms and rows 140ms after a 200ms lead-in. Cancel the previous sequence on replay, target change, reduced-motion change and unmount, including timeout and animation-frame work. Imperative text/transform writes keep per-frame work out of React state. Do not promise an unmeasured frame rate.

Render real values immediately, even before a scroll trigger fires. Decorative flap layers are aria-hidden; each word has readable unpadded text for assistive technology. Every section has a proper h1/h2/h3 hierarchy. With reduced motion, show the final values immediately: no scramble, rotation, scan, fade or idle cycling.

## Hero
A centered full-height composition. Eyebrow NOCTURNE EXPRESS · OVERNIGHT RAIL. One h1 contains two separate flap lines: WAKE UP (7 characters) and ELSEWHERE (9 characters). Use desktop card width up to 34px and mobile minimum 20px; the two lines must fit a 320px viewport. Below, NEXT STOP cycles PARIS / VIENNA / ZURICH / PRAGUE / MILANO every 3400ms only while the hero is visible and the document is active. Pause the cycle while the planner is open. Retain the current destination on re-entry.

Body: Five cities from Berlin. A private room, a slower night, and somewhere new in the morning.
Primary button Plan your journey opens the planner. A real Explore the routes anchor scrolls to the departure section, with a reduced-motion immediate path and destination focus. Explain quietly that this is a fictional rail experience with a sample itinerary.

## Departures
Eyebrow FIVE CITIES / ONE POINT OF DEPARTURE; flap h2 DEPARTURES. All five routes begin at Berlin Hbf. Show all five services, departure, destination and arrival, with a direct Plan this route button for each. Use the exact routes from the action content below:
NX-08 / 23:47 / Paris Nord / 10:35 the following day
NX-14 / 00:15 / Vienna Central / 08:50 the departure date
NX-21 / 01:02 / Zurich HB / 09:20 the departure date
NX-33 / 01:40 / Prague Main / 06:45 the departure date
NX-45 / 02:18 / Milano Centrale / 12:20 the departure date

Do not show fake live, delayed or boarding statuses. Label the timetable as a sample, all times as illustrative local values, and explain +1 day. The route button preselects its exact service in the planner. Use a max-width 1040px bordered board. Destinations and departure times are flaps; labels, arrival times and actions remain ordinary text. A row replays its flap values on hover and keyboard focus. Below 680px, stack the row content into readable cards instead of forcing a horizontal scroll or shrinking text to fit.

## Private cabins
Eyebrow A ROOM FOR THE NIGHT; flap h2 PRIVATE CABINS. Body: Space for yourself. Or room to share the journey.
Three equal photo-led cards at wide desktop, stacked below 900px. Use 3:2 cabin photos and a generous body with cabin name, capacity, sample per-cabin fare, full details, washroom/shower and breakfast comparison. The Choose SOLO / Choose DUO / Choose SUITE buttons carry that exact cabin into the planner.
SOLO: one berth, €189 per cabin, shared washroom, breakfast separately.
DUO: two berths, €269 per cabin, in-cabin washstand and shared shower, breakfast separately.
SUITE: a double bed for two, €429 per cabin, private en-suite shower, breakfast included.
DUO and SUITE cost the same for one or two travellers. Do not invent discounts, availability or additional room-service claims.

## The hours in between
A quiet editorial section headed The journey is part of the stay. Three numbered columns stack on mobile:
01 / BOARD — Take your time. Arrive 30 minutes before departure. For Vienna at 00:15, boarding is the previous evening.
02 / SETTLE IN — A space of your own. Every fare is for a private cabin; one suitcase and one cabin bag per traveller.
03 / ARRIVE — Morning, somewhere new. Breakfast is included in SUITE, available separately otherwise. Keep arrival time and date together.
Use actual useful information instead of a fictional passenger endorsement or a fake PA announcement.

## Closing
Flap heading PLAN YOUR NIGHT. Five routes. Three private cabins. Build a sample itinerary and keep the details for later.
A small YOUR CABIN flap cycles SOLO / DUO / SUITE at 2600ms, only when this section is visible, the document is active and no planner is open. Plan Your Journey opens the same planner. State that sample timetables/fares do not include live availability, reservations or payment.

## Journey planner
Use a native modal dialog with a black/amber palette matching the page, max-width 960px, viewport-constrained height and internal scrolling. Preserve exact opener focus and the body's previous overflow state. Title Your night, your way. Explain the fictional local flow before input.

One editable form, with labelled departure select (five options), departure calendar date, one/two travellers, and a radio group with all three complete cabin comparisons. Keep native date/select/radio behavior and 44–50px touch targets. Never silently switch a cabin or reduce the party to force a valid selection. SOLO plus two travellers must show an inline error; preserve the entered date, route and cabin and focus the traveller field. Validate all options against allowed values and dates as real ISO calendar dates from today onward (through 9998-12-31).

For every service, boarding is departure minus 30 minutes. Subtract a calendar day when this crosses midnight: NX-14 departing 2027-01-01 at 00:15 boards 2026-12-31 at 23:45. Paris arrives the next date; the other four services arrive on the departure date. Account for month, year and leap-day boundaries. The fare belongs to the selected private cabin, not to each traveller.

Review itinerary produces a designed ticket-like document prominently labelled Sample itinerary · Not a ticket. Include origin, destination, service, departure time/date, boarding time/date, arrival time/date, cabin, party, per-cabin fare and chosen facilities. Explicitly flag previous-evening boarding. Preserve all values on Edit journey and return focus to the form. Save itinerary downloads the complete UTF-8 content, including facts and planning conditions. Keep the full text selectable on download failure and allow retry; only claim that a browser download was requested.

## Motion and lifecycle
Provide a visible Motion on/off toggle with aria-pressed, which stops animated flap transitions, idle cycling, background video and ambient glow without hiding content or disabling the planner. Honour the device reduced-motion preference; when it forces motion off, label the control accordingly. Pause video and ambient motion while the planner is open. Keep this control accessible throughout the page.

Use one section trigger for each heading/row entrance. Editorial scan is optional, once per section: clip-path inset(0 100% 0 0) to inset(0), .6 seconds, steps(10), .1s stagger. Do not hide content in advance, reverse it on scroll-back, or animate forms/CTAs into invisibility. Track and cancel all scheduled row/word/character callbacks and restore GSAP state on teardown. ResizeObserver refreshes trigger geometry. A section visibility observer and document visibility event gate each idle timer. Reduced motion leaves all information and operations immediately available.

## Acceptance
Complete all five routes and all valid cabin/party combinations, reject SOLO with two travellers without changing the draft, verify after-midnight boarding and next-day arrival dates, and save/edit/close/reopen by keyboard and touch. Verify visual composition at 320px mobile and desktop, including modal scrolling, date-picker behavior, focus restoration, video posters, image failure and reduced motion. Static markup and unit checks do not prove these browser interactions.


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

## 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": "flap-board",
  "brand": "NOCTURNE EXPRESS",
  "accent": "#F5C518",
  "paper": "#0B0C10",
  "ink": "#F5F1E6",
  "title": "Your night, your way.",
  "intro": "Choose a departure, a private cabin and the people travelling with you. Then review a sample itinerary with boarding and arrival dates.",
  "facts": [
    [
      "Origin",
      "Berlin Hbf · all five sample routes"
    ],
    [
      "Boarding",
      "Arrive 30 minutes before the listed departure"
    ],
    [
      "Luggage",
      "One suitcase and one cabin bag per traveller"
    ],
    [
      "Assistance",
      "Step-free boarding needs route-specific confirmation"
    ]
  ],
  "groups": [
    {
      "label": "Cabin",
      "options": [
        {
          "title": "SOLO · €189 / cabin",
          "detail": "One private berth, fold-down desk, reading light and under-bed luggage space. Shared washroom. Breakfast available separately."
        },
        {
          "title": "DUO · €269 / cabin",
          "detail": "Two private bunks, a washstand and a luggage locker. The cabin is yours, even when travelling alone. In-cabin washstand; shared shower. Breakfast available separately."
        },
        {
          "title": "SUITE · €429 / cabin",
          "detail": "A double bed for two, lounge seating, an en-suite shower and breakfast served in your cabin. Private en-suite shower. Breakfast included."
        }
      ]
    },
    {
      "label": "Departure",
      "options": [
        {
          "title": "NX-08 · 23:47 · Paris Nord",
          "detail": "Berlin Hbf → Paris Nord. Arrival 10:35 the following day. A long night west, with a late breakfast before Paris."
        },
        {
          "title": "NX-14 · 00:15 · Vienna Central",
          "detail": "Berlin Hbf → Vienna Central. Arrival 08:50 on the departure date. Board before midnight; leave after it. Your departure date matters."
        },
        {
          "title": "NX-21 · 01:02 · Zurich HB",
          "detail": "Berlin Hbf → Zurich HB. Arrival 09:20 on the departure date. An early departure and a morning arrival in the city."
        },
        {
          "title": "NX-33 · 01:40 · Prague Main",
          "detail": "Berlin Hbf → Prague Main. Arrival 06:45 on the departure date. A shorter night, arriving in time for the first coffee."
        },
        {
          "title": "NX-45 · 02:18 · Milano Centrale",
          "detail": "Berlin Hbf → Milano Centrale. Arrival 12:20 on the departure date. A late departure, a slow morning and an arrival after noon."
        }
      ]
    },
    {
      "label": "Travellers",
      "options": [
        {
          "title": "1 traveller",
          "detail": "A private cabin for one. Choose any of the three cabin types."
        },
        {
          "title": "2 travellers",
          "detail": "Two people sharing one private DUO or SUITE cabin."
        }
      ]
    }
  ],
  "date": true,
  "notes": [
    "All five services depart from Berlin Hbf. Times and fares are illustrative local timetable values, not live operating information.",
    "Choose the calendar date of departure. For NX-14 at 00:15, boarding begins at 23:45 on the previous date.",
    "Fares shown are one way, per private cabin. There is no extra cabin charge for a second traveller in DUO or SUITE.",
    "A real booking would confirm the route, final fare, accessibility, available berths and change or cancellation conditions before payment."
  ]
}

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