Shadow Play

再現プロンプト

架空の旅の影絵一座「灯影座」の1ページサイト。小さな実体の紙人形は端に控え、光源角と距離から計算した巨大な影だけが紗幕いっぱいに語り、各幕は暗転からランタンが灯りを取り戻す演出で切り替わる。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build a single self-contained HTML file (inline CSS and inline JS in one <script> tag) for "灯影座" (Tōei-za) — a fictional travelling shadow-puppet troupe. Load GSAP 3 and its ScrollTrigger plugin from CDN only (e.g. https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js and .../ScrollTrigger.min.js); no fetch calls. The four puppet subjects and the lantern prop are locally AI-generated transparent WebP images (see Imagery below); every other visual — the lantern's glow halo, the drapes, the scrim — stays inline SVG or CSS. Load two Japanese Google Fonts: "Zen Old Mincho" (weights 400/600/700/900) for headings and the wordmark, and "Noto Sans JP" (400/500) for body text (CJK Google Fonts must use subsets:["latin"] — the only valid non-empty value — yet still deliver the full Japanese glyph set). Content is authored in Japanese throughout; do not translate it. The page scrolls with the normal window scroller. The motion language is light and shadow only: a small, real silhouette (the "body") always sits near an edge of the stage, mostly static; a large, blurred, skewed shadow clone of that same silhouette — the only thing that actually performs — looms across the scrim, its shape a live function of a lantern's position. Every section opens with the identical technique: blackout, then the lantern catches and lifts the dark. Never a plain fade.

## Imagery (AI-generated puppet silhouettes)
Generate six puppet images with an image AI (portrait or landscape as fits each subject → trim to the silhouette's bounding box, compress to ~640px transparent WebP), each delivered in TWO flat tints derived from the same alpha mask: shadow ink #050403 (the performing shadow clone) and lantern-amber #FFCC80 (the small real puppet, shown at opacity .55): (1) a standing travelling pilgrim puppet in a wide woven straw kasa hat holding one long walking staff, cloud-and-wave filigree cut into the kimono hem and sleeves; (2) a living crane at the moment of a wingbeat, S-curved neck, beak angled upward, every flight feather separated by cutwork; (3) three bamboo stalks of different heights with node lines and sasa leaves plus a rabbit with two long upright ears sitting at their base, spiral filigree in its round body; (4–6) three procession foxes in one consistent style whose poses differ — the leader carrying a small paper lantern with a lattice-cutwork body in its mouth, one walking with head slightly raised, one with tail held high glancing back over its shoulder. Every prompt shares one style block: "traditional shadow puppet, intricate filigree cutwork silhouette in the style of wayang kulit crossed with Japanese kiri-e paper cutting, ONE solid pure-black flat silhouette shape, ornate interior cutout perforations no finer than 1.5% of the figure's width so they survive downscaling, crisp clean cut edges, side-profile theatrical pose facing LEFT, no glow, no rim light, no cast shadow, no gray tones, no puppet control rods, no text, no watermark". Generate on a flat solid chroma-key background (#FF00FF) and alpha-key it locally, then flood-fill the RGB of every remaining pixel with the tint color so each puppet reads as a perfectly flat two-tone paper cutout. All six puppets face left.

Additionally generate ONE unlit paper-lantern image, reused at every lantern placement (the 18×24px brand mark and each scene's 46×64px light source): "traditional Japanese paper lantern (chochin), single object centered, matte unlit warm washi paper body in soft apricot cream #FFCC80 tones, visible horizontal bamboo rib structure as gentle darker ridges wrapping the oval body, dark aged-wood top cap and bottom ring in deep brown #3A2A12, a short hanging wire loop at the top, flat theatrical illustration style, soft even lighting, NO glow, no light rays, no flame visible, no cast shadow, no text, no watermark". Same workflow: generate on flat #FF00FF, chroma-key to a transparent WebP, trim to the bounding box. Critically, the lantern artwork itself is NON-emissive matte paper — all of its light comes from the CSS glow layered with it (a radial-gradient halo, rgba(255,204,128,.32) to transparent 68%, on an absolutely-positioned circle extending 60px beyond the lantern box, plus the shared flicker keyframes on the lantern image). Fit the portrait image into each 40:56 lantern slot with object-fit:contain (never stretch).

## Art direction
Palette: near-black warm night #120D0A throughout every section (no light/dark alternation — the whole page is one continuous darkened theatre), shadow ink #050403, foreground text #F3E7D8, muted #B8A28C, required accent lantern-amber #FFCC80 (eyebrows, the lantern's paper glow, the CTA, programme dots, rim-light on every real puppet). Headings: Zen Old Mincho weight 700, clamp(1.7rem,4vw,2.7rem), line-height 1.4; eyebrows 0.68rem, letter-spacing 0.28em, amber; body copy Noto Sans JP 0.95rem, line-height 1.95. Two 34px vertical proscenium drapes (repeating-linear-gradient stripes #1C130B/#140D08, inset shadow, a faint amber rim-light bleeding from their inner edge) sit fixed at the left and right screen edges throughout, framing every section like a real stage; a fixed, page-wide scrim texture (two 45deg/-45deg repeating-linear-gradient hairlines, rgba(255,255,255,.035), 1px lines every 3px, mix-blend-mode:overlay, opacity .5) sits above everything, so the whole page always reads as fabric the audience is watching through.

## The shared shadow formula (reused by every scene)
Coordinates are percentages (0–100) of each scene's own bounding box — a deliberately stylized 2D space, not aspect-corrected. Each scene has one fixed "anchor" point (the puppet's feet) and a lantern light position (lightX,lightY) that drifts along a scene-specific two-point path as you scroll through that scene (its own ScrollTrigger, start "top bottom", end "bottom top", scrub:true, linearly interpolating from a "from" to a "to" point) and is nudged by the cursor while hovering (pointer position blended in at weight 0.35: effective = scrollLight + (pointerLight - scrollLight) × 0.35). From the effective light position, compute: dx = anchorX - lightX, dy = anchorY - lightY; distance = max(1, hypot(dx,dy)); angleDeg = atan2(dx,dy) × 180/π. Then: skewDeg = clamp(angleDeg × 0.9, -48, 48) — the shadow leans away from the lantern; scaleY = clamp(1.1 + (40/distance) × 1.4, 1.1, 3.2) — a close lantern (small distance) produces a tall, looming shadow, a distant one a short, tight shadow; blurPx = clamp(1 + (scaleY-1.1) × 3.5, 1, 9) — longer shadows read softer/more diffuse; opacity = clamp(0.88 - (scaleY-1.1) × 0.08, 0.55, 0.88) — longer shadows also read a touch fainter. Apply via CSS custom properties written every update with style.setProperty (--sh-skew, --sh-scale, --sh-blur, --sh-opacity, no React/state re-render) to a shadow-clone element: transform-origin 50% 100% (anchored at the puppet's own feet), transform: translate(-50%,-100%) skewX(var(--sh-skew)) scaleY(var(--sh-scale)), filter: blur(var(--sh-blur)), opacity: var(--sh-opacity). The visible lantern glyph itself is repositioned every update via plain left/top percentage styles (never composited into the same transform, so there is no fight over the "transform" property). The real, small puppet copy is fixed at the anchor with a static drop-shadow amber rim-light and never reacts to the light — only its shadow performs.

## Section 1: Hero
Fixed brand mark top-left (left:46px, top:20px, z-index:45): an 18×24px lantern (the AI-generated chochin WebP, object-fit:contain) that flickers (opacity 1→0.82→1→0.9, 3.2s ease-in-out infinite, an irregular multi-stop keyframe, not a simple pulse) beside "灯影座" (Zen Old Mincho) with "TŌEI-ZA" beneath in 0.56rem amber. A fixed "只今上演中" (now showing) pill bottom-left (bottom:18px) holds a flickering amber dot plus the current section's act name, cross-faded via one ScrollTrigger (start "top center", end "bottom center", onToggle) per section. The hero fills 100vh: a full-bleed shadow scene with a lone standing-figure silhouette (round head, robe body, two arm shapes) anchored at (14%,90%) near the bottom-left, its shadow clone looming from the same point, and a lantern that drifts on its own ScrollTrigger from (34%,14%) to (60%,20%) as the hero scrolls by, nudged by the cursor. Copy sits in a right-aligned panel (max-width 26rem, padding 1.8rem 2rem, radius 16px, linear-gradient(120deg, rgba(18,13,10,.78), rgba(18,13,10,.15)) backdrop) at right:6%: eyebrow "TŌEI-ZA — 光と影の一座", H1 "灯りひとつで、影は物語になる。" (max-width 13ch), a line about a paper puppet and a single lantern, and a cue "光を追う ↓" that drifts translateY 0→6px / opacity .6→1 over 2.4s ease-in-out infinite. On mount (not on scroll), the hero plays its own blackout→lantern reveal after a 0.25s delay — the same technique every later section replays on scroll-enter.

## The shared scene-transition: blackout → lantern re-lights
Every section (hero included) starts with a full-bleed black overlay (#050302, opacity 1, z-index 35) covering it and its lantern-glow group at opacity 0 / scale 0.2, and its copy/programme content at opacity 0, filter blur(10px). On reveal: the lantern glyph first "catches" — opacity 0→1, scale 0.2→1.15, 0.34s power2.out — then flickers twice (2 dip+rise pairs: opacity 0.65/scale 0.94 then opacity 1/scale 1.06, 0.08s each, power1.inOut), then settles to opacity 0.85, scale 1 over 0.14s power2.out. Starting 0.15s after the catch begins, the blackout fades to opacity 0 over 0.9s power2.inOut while the section's content simultaneously unblurs (filter blur(10px)→blur(0px)) and fades in (opacity 0→1) over the same 0.9s power2.out, staggered 0.08s per element where there are several (e.g. the programme rows). Scrolling back above a section instantly reverses it: blackout back to opacity 1, lantern back to opacity 0/scale 0.2, content back to blur(10px)/opacity 0, all in 0.35s power2.in. Each ScrollTrigger uses start "top 75%", toggleActions "play none none reverse".

## Section 2: Act I — 鶴 (crane)
A crane silhouette (an ellipse body, an S-curved neck/head with a beak dot, four thin leg strokes, one wing shape) anchored at (84%,82%), lantern drifting (66%,12%)→(18%,22%). Left-aligned copy panel at left:6%: eyebrow "第一幕", H2 "鶴、天へ。", body about a small paper crane becoming a wall-filling shadow that beats its wings a little differently every time the lantern sways.

## Section 3: Act II — 竹の夜、兎の影 (bamboo night, the rabbit's shadow)
Three bamboo stalks (rounded vertical bars with four horizontal node marks each, opacity stepping down per stalk) plus a small rabbit (an ellipse body, a round head, two long curved ears) grouped as one 132px-wide silhouette, anchored at (20%,92%), lantern drifting (18%,16%)→(78%,18%). Right-aligned copy: eyebrow "第二幕", H2 "竹の夜、兎の影。", body about the rabbit's shadow stretching and shrinking as the lantern drifts through the bamboo.

## Section 4: 番組 (programme)
Centered, max-width 44rem. Eyebrow "番組 — PROGRAMME", H2 "灯影座、本日の演目。", then a list of 4 rows — never "01/02/03": kabuki-style act names 序幕/第一幕/第二幕/大詰, each with a title and one-line description ("灯りが集う" / "鶴、天へ" / "竹の夜、兎の影" / "狐の嫁入り"), separated by 1px amber-tinted hairlines. Each row carries a 7px lantern-dot that turns solid amber with a glow and starts flickering once its matching section is the one centered in the viewport (reusing the same ScrollTrigger-driven active-section tracking as the now-showing badge). The whole section shares one blackout→lantern reveal (no lantern-glow prop for this one — just blackout fade + rows unblurring in, staggered 0.08s).

## Section 5: Footer — 大詰 (finale)
A procession of three fox silhouettes (each a simple pointed-ear, pointed-tail blob) anchored at (32%,82%), (50%,86%) and (68%,82%), sharing one lantern that rises from (50%,26%) to (50%,14%) as if being lifted at the parade's end; all three shadows are recomputed from that single light every update. The three real foxes each bob translateY 0↔-4px over 2.6s ease-in-out infinite, staggered 0.3s apart, like a slow walk cycle. Centered copy (max-width 32rem, padding-top 8rem): eyebrow "大詰", H2 "灯りが消えても、影は残る。", a closing line about the procession crossing the stage as the curtain slowly draws, a CTA button "次回公演のご案内を受け取る" (amber fill, radius 999px, hover translateY(-4px) with a deeper glow, 0.3s cubic-bezier(.22,1,.36,1)), and a troupe <dl> (主宰/結成/拠点/上演形式/連絡 → 灯影座 / 毎晩、日没とともに / どこか、灯りのある夜 / 紙人形と一灯の影絵 / hello@toei-za.jp). Two 52%-wide curtain-drape panels (same stripe gradient as the proscenium) sit above the footer's shadow layer but below its copy, starting fully off-screen (xPercent -100 / 100) and scrubbing together to xPercent 0 (meeting at the centre) as the footer is scrolled from "top 55%" to "bottom bottom" (scrub 0.6) — the curtain call closing over the stage as the page ends.

## Performance & accessibility
Touch only transform, opacity, filter and CSS custom properties on scroll/pointer-driven elements; write shadow values with style.setProperty, not state re-renders. Attach a resize listener that calls ScrollTrigger.refresh(). Respect prefers-reduced-motion:reduce globally: fix every scene's light at its resting "from" point with no scroll-scrub or pointer listener, skip every blackout/lantern timeline (render content at its resolved visible, unblurred state immediately, lanterns at opacity .85/scale 1), set the footer curtains to a partially-closed static xPercent -70/70 instead of scrubbing, and disable the proscenium sway, lantern flicker, fox bob and cue-drift keyframes via a matching media query. Mark lang="ja" on the root. The CTA is a real <button> with visible focus; the troupe block is a real <dl>; decorative SVGs carry aria-hidden. No external fetches, no autoplaying audio, no stock imagery, no numbered "01/02/03" service-style lists (act names are always 序幕/第一幕/第二幕/大詰), no counting-up statistic and no infinitely-flowing ticker text anywhere on the page.


## Japanese site content (current specification)
The site is aimed at Japanese-speaking visitors. Keep brand and typeface names where appropriate. Use Japanese navigation, headings, body, product information, CTA labels, validation and confirmation. Use lang=ja. Adjust line-height, line wrapping and SVG text measurement for Japanese; do not retain Latin-only text widths. Use the following display copy from the implemented Japanese page. It supersedes the earlier English prose, headlines and sample claims in the design brief.
[
  "灯影座",
  "序幕",
  "灯りが集う",
  "短い口上、開幕前のご挨拶。",
  "第一幕",
  "鶴、天へ",
  "舞い上がる一羽の影。",
  "第二幕",
  "竹の夜、兎の影",
  "竹林に潜む小さな来訪者。",
  "大詰",
  "狐の嫁入り",
  "提灯の行列が幕を引く。",
  "開幕 — 灯影座",
  "第一幕 — 鶴、天へ",
  "第二幕 — 竹の夜、兎の影",
  "番組",
  "大詰 — 狐の嫁入り",
  "主宰",
  "結成",
  "毎晩、日没とともに",
  "拠点",
  "どこか、灯りのある夜",
  "上演形式",
  "紙人形と一灯の影絵",
  "連絡",
  "只今上演中 —",
  "— 光と影の一座",
  "灯りひとつで、影は物語になる。",
  "紙の人形と、ひとつのランタン。灯影座は、その二つだけで夜を語る旅の一座です。",
  "光を追う ↓",
  "鶴、天へ。",
  "小さな紙の鶴が、壁いっぱいの影になって羽ばたく。灯りが揺れるたび、その翼は少しずつ角度を変える。",
  "竹の夜、兎の影。",
  "竹林の奥に、耳の長い来訪者。ランタンが竹の間を漂うと、兎の影は伸びたり縮んだりしながら、こちらをのぞき込む。",
  "番組 — PROGRAMME",
  "灯影座、本日の演目。",
  "灯りが消えても、影は残る。",
  "提灯の行列が舞台を横切り、幕がゆっくりと引かれます。次の夜、また同じ灯りで。",
  "次回公演の詳細を見る"
]

## 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": "shadow-play",
  "brand": "灯影座",
  "accent": "#885129",
  "lang": "ja",
  "title": "次の夜の観劇案内",
  "intro": "小さな灯りの向こうで、紙の役者が動きはじめます。上演時間と席の違いを確認し、観劇のメモを残せます。",
  "facts": [
    [
      "上演時間",
      "約60分・休憩なし"
    ],
    [
      "開場",
      "開演の30分前"
    ],
    [
      "鑑賞の配慮",
      "暗転あり。音や暗さが気になる方のための場内案内をご用意する設定です"
    ]
  ],
  "groups": [
    {
      "label": "公演枠",
      "options": [
        {
          "title": "昼の部 · 14:00開演",
          "detail": "親子でも訪れやすい午後の上演。終演予定15:00。"
        },
        {
          "title": "夜の部 · 18:30開演",
          "detail": "灯りの余韻を楽しむ夜の上演。終演予定19:30。"
        }
      ]
    },
    {
      "label": "席種",
      "options": [
        {
          "title": "一般 · 3,500円",
          "detail": "自由席・税込。演目案内付き。"
        },
        {
          "title": "子ども · 1,500円",
          "detail": "小学生以下・税込。保護者の同伴を想定しています。"
        }
      ]
    }
  ],
  "date": true,
  "notes": [
    "日付は希望のメモです。実在する公演・空席情報ではありません。車椅子席や入退場の配慮は、本公演で受付先を用意する必要があります。"
  ]
}

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