枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
架空の手製本工房「栞座」の1ページサイト。目次からノンブル、しおり紐まで本の言語で統一し、折丁の章では見開きページが紙の反り・裏写り・影を伴って本物のように3D回転しながらめくれ、表紙から奥付へ進むほどページ厚が薄くなっていく。工程ページの挿絵はAI生成の銅版画×墨線×金アクセント(透過)で、生成りのページ地に直接刷られたように載る。表紙はAI生成の布クロステクスチャ(金箔押しの飾り罫・中央無地)を敷いた上にDOMの題字と紋を重ね、見開きの左ページには各工程の情景を描いた不透明の貼り込み図版プレートが額装で載る。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build a single self-contained HTML file (inline CSS and inline JS in one <script> tag) for "栞座" (Shioriza) — a fictional one-table hand-bindery and picture-book press. 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 five process-page illustrations are locally AI-generated transparent WebP images (see Imagery below); every other visual stays inline SVG or CSS (gradients, repeating-linear-gradient page-edge textures, CSS 3D transforms). Load two Japanese Google Fonts: "Shippori Mincho" (weights 400/500/600/700/800) for headings, the wordmark, the folio numerals and the ink-stamp glyph, and "Noto Serif JP" (400/500/600) for all 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 for the whole page is the physical book itself: every section is a "spread," and the hero's own page-turn technique recurs at small scale as the page's only entrance animation — never a plain translateY+opacity fade.
## Imagery (AI-generated images: cover cloth, right-page cuts, left-page plates)
Eleven local AI-generated images in three families. (A) One opaque cover texture (1024×1536 → resize to a 3:4 WebP): an extreme close-up of dark bookbinding buckram cloth, deep umber #241A12 with slightly lighter warp threads #33241A, a thin gold-foil-stamped ornamental border frame near the edges with small corner fleurons in antique gold #D9A441, and — critically — a completely plain, quiet center and upper third, because the DOM lays the wordmark, emblem and ribbon on top of it; no text, no emblem, no perspective (the 3D yaw is CSS's job). (B) Five transparent step illustrations (1536×1024 → compress to ~640px transparent WebP), one per craft step, shown at ~220px inside the right-hand book pages: (1) three washi sheets held up to the light by a fingertip — one watermarked, one indigo-edged, one sun-warm; (2) a large sheet scored into accordion folds with a bone folder pressing the crease; (3) stacked signatures sewn with zigzag linen thread, needle mid-stitch, exactly one thread rendered in gold; (4) a close-up of the spine end with a woven headband, one weave in gold, and a fanned endpaper; (5) a brass finishing stamp lifting off a book cover, leaving a radiant gold-foil emblem with stray foil flecks — this is the only gold-heavy image. (C) Five opaque left-page plates (1536×1024 → center-crop to 4:3, ~960px WebP), one per craft step again but composed as full tabletop scenes rather than single motifs — choosing washi sheets against the window light / scoring accordion folds with a bone folder / sewing signatures on a sewing frame / weaving the headband with endpaper and scissors / pressing the heated brass foil stamp (the only gold-heavy plate) — with the cream paper ground #F3E8D2 painted to every edge (no transparency), pasted onto each spread's left page as a framed plate. Every prompt shares one style block: "refined Japanese book illustration, fine copperplate-etching and sumi-ink line work with gold-leaf accents, delicate crosshatching, warm washi paper texture in the strokes, minimal and quiet composition with generous negative space, antique bookbindery atmosphere, no text, no photorealism, no faces" — two-tone only: ink #2B2013 lines with gold #D9A441 accents (plates may add a subtle muted watercolor wash, never full color). The five step illustrations' backgrounds must be fully transparent (generate on a chroma key and alpha-key if needed) so the artwork sits directly on the cream page like a printed plate. Hands may appear as fingertips only, never faces.
## Art direction
Palette: bookcloth dark #241A12 / #33241A (hero and footer), cream page #F3E8D2 / shadowed page #EADFC4 (contents/craft/reader-notes), ink #2B2013, muted ink #6E5B3E, required accent gold #D9A441 (every eyebrow, folio numeral, CTA and foil detail), ribbon crimson #A6342B (bookmark only). Headings: Shippori Mincho weight 700, clamp(1.7rem,4vw,2.8rem), line-height 1.35; eyebrows 0.7rem uppercase Japanese labels, letter-spacing 0.3em, gold; body copy Noto Serif JP, 0.95–1rem, line-height 1.85–2. The page alternates dark "cover" sections (hero, footer) with cream "page" sections (contents, craft, reader notes), mirroring what it feels like to open a hardcover book and close it again.
## Section 1: Hero (the cover)
A fixed brand mark (position:fixed; left:20px; top:20px; z-index:45): a small gold leaf-emblem (two curved outline paths + a center dot) beside "栞座" in Shippori Mincho, "SHIORIZA" beneath at 0.58rem gold, letter-spacing 0.28em. A fixed gauge rail at right:14px, top:50%, translateY(-50%), z-index:45, inside a translucent plaque (rgba(20,14,9,.38), radius 10px, blur 4px): a 7px×200px ribbon track holding a crimson ribbon (transform-origin top, scaleY = max(0.05, scrollProgress)) with a small triangular tail swaying ±4deg over 4.4s ease-in-out infinite; beside it, 24 ticks (2px tall, gap 2px) that flip from pale cream rgba(243,232,210,.32) to solid gold once scroll progress passes their index — the book's page-thickness gauge — plus a running lowercase-Roman folio counter ("fol. i"…"fol. xxiv" = 1 + round(progress×23)). All three are driven by one ScrollTrigger on the full document (start "top top", end "bottom bottom", scrub:true).
The hero is min-height 100vh, radial-gradient(ellipse at 30% 30%, #33241A 0%, #241A12 70%), a wrapping flex row: text (max-width 32rem) left, a 3D book (260×340px) right. Text: eyebrow "SHIORIZA — 手製本の工房", H1 "ページは、めくられるために/生まれてくる。", a lead about choosing paper, folding, sewing and foil-stamping at one table, a note "限定300部、ナンバリング製本。", and a bouncing cue "最初の一葉をめくる ↓" (translateY 0→6px, opacity .6→1, 2.2s ease-in-out infinite). The book: perspective 1400px, transform-style:preserve-3d, resting rotationY -20deg / rotationX 8deg. On pointer move inside the hero, gsap.quickTo (0.7s, power3.out) tweens rotationY toward -20 + (px-0.5)×16deg and rotationX toward 8 - (py-0.5)×10deg, resetting on pointer-leave — the book tilts toward the cursor like one being turned to face you. Cover: 4/12px-rounded rect whose background is the AI cloth texture (image A) stretched center/100% 100% no-repeat over a linear-gradient(155deg,#33241A,#241A12 65%) fallback — the texture's own gold border frame replaces any CSS border, and because its center is plain cloth the DOM content stays legible on top: centered emblem + "栞座" + "SHIORIZA" (give the title a soft text-shadow, e.g. 0 1px 10px rgba(0,0,0,.5)); shadow 0 40px 70px -28px rgba(0,0,0,.65). A ribbon tab (16×46px, notched clip-path) peeks from the top. A 46px page-edge strip sits at the cover's right edge (top/bottom 3px, repeating-linear-gradient(to bottom,#EFE4C8 0 2px,#D2C09A 2px 3px), transform-origin right center, rotateY(90deg) — a CSS-cube side face, legible because the book is already yawed -20deg). This 46px "full book" thickness reappears at 6px in the footer.
## Section 2: 目次 — Contents
Cream, padding 5.5rem 1.75rem, centered, min-height 74vh. Eyebrow "目次 — TABLE OF CONTENTS", H2 "この一冊の、進み方。", lead about the site itself being bound as one book. An <ol> (max-width 680px) of 4 rows — folio/title/dotted-leader/subtitle — "fol. i 栞座について" / "fol. iv 折丁 — 手仕事の五工程" / "fol. xiv 読者の栞" / "fol. xx 奥付", separated by 1px hairlines. Hover: translateX(6px) over 0.3s, folio turns gold. The row matching the section centered in the viewport (one ScrollTrigger per real section, start "top center" end "bottom center", onToggle) stays gold with a 2.4s ease-in-out infinite text-shadow pulse (0 → 8px gold glow → 0).
## Section 3: 折丁 — the pinned 3D page-turn (core technique)
A head block: eyebrow "iv. 折丁", H2 "手で綴じる、五つの工程。", lead, hint "めくって進む ↓ ／ クリックでもめくれます". Below, a 100vh stage, flex-centered, holding the spread: width min(980px,94%), height 72vh (min 380px), perspective 2200px, shadow 0 50px 90px -40px rgba(43,32,19,.5), a 4px gradient spine at 50% (z-index 60). Every left page carries its spread's opaque scene plate (images C, matching the right page's step) as a framed paste-in above its note text: a 4:3 <img> in a thin mat (6px padding on the darker paper #EADFC4, hairline ink border, faint inner gold ring, small drop shadow), height min(26vh, 230px), centered. A static left page (lowest z-index) shows the intro note "工程…" beneath plate 1; a static right page (lowest z-index) shows the fifth/final step "金箔を置く" with the foil-stamping illustration (image 5) shimmering via opacity/brightness pulsing .85↔1 / 1↔1.3, 5s ease-in-out infinite. Four leaves occupy the right half, offset (index×2px, index×1.5px) for a resting cascade, default z-index (4-index), transform-style:preserve-3d, transform-origin left center. Each leaf's rotateY/rotateX are written every scroll frame via two CSS custom properties, --leaf-rot and --leaf-curl (style.setProperty, no state re-render). Front face: that step's AI illustration (images 1–4: washi sheets / accordion folds with bone folder / sewn signatures / headband close-up, each an <img> at max-width 220px with empty alt) + title/lead/body. Back face (rotateY(180deg), backface-visibility:hidden) shows the next spread's left page — its framed scene plate (images C, plates 2–5) above the next step's short note — becoming the new left page once the leaf has turned, since transform-origin sits on the shared spine. A shadow child (gradient to left, rgba(0,0,0,.55)→transparent 55%) has opacity = sin(local×π)×0.45 (spine-side cast shadow, peaking mid-turn); a mirrored ghost child (scaleX(-1), the next note's title) has opacity = min(1,|rotationDeg|/90)×0.16 — reverse-ink show-through, which vanishes once backface-visibility hides the front past 90deg.
Pin the stage (pin:true, anticipatePin:1, invalidateOnRefresh:true, start "top top", end "+="+(innerHeight×4×0.85), scrub:0.4). Per leaf i (0..3): segLen=1/4, local=clamp((globalProgress-i×segLen)/segLen,0,1), rotationY=-178deg×local (178, not 180, to avoid z-fighting), rotationX (paper curl) = sin(local×π)×7deg, shadow-opacity = sin(local×π)×0.45, ghost-opacity = min(1,|rotationY|/90)×0.16; z-index flips from (4-i) to (100+i) once local≥0.5, so a leaf that has turned stacks correctly atop earlier-turned leaves on the left pile. Two round 34px "‹"/"›" buttons (bottom corners, cream, gold on hover) advance/retreat one leaf via scroller.scrollBy({top:(triggerEnd-triggerStart)/4 × ±1, behavior:"smooth"}) — the turn responds to scroll or a click.
## Section 4: 読者の栞 — reader slips
Cream, min-height 74vh. Eyebrow "xiv. 読者の栞", H2 "本に挟まれた、短い手紙。", lead about tucking reader feedback into the pages like bookmarks. A grid (auto-fit minmax(220px,1fr), gap 1.6rem, max-width 920px) of 4 note-paper slips (#EADFC4, 1px border, radius 4px, padding 1.4rem 1.3rem, shadow 0 14px 24px -16px rgba(43,32,19,.4)), each resting at a fixed tilt (-3/2/-2/3deg) baked into the entrance tween's end rotation. Quotes from a mother, a bookseller, a collector and a reader, praising the sewn spine, the gold foil's shifting light and the book itself. On hover (JS, so it composes with the entrance tween's GSAP-owned transform): rotation→0, y→-8px, scale→1.03, 0.35s power3.out, plus a deeper shadow class; reverse on leave.
## Section 5: 奥付 — colophon / footer
Same dark radial-gradient family as the hero (ellipse at 50% 70%), min-height 100vh, centered, max-width 34rem. Eyebrow "xx. 奥付", H2 "次の一冊も、ここで綴じます。", lead, a gold pill CTA "刊行のご案内を受け取る" (padding .95rem 2.1rem, radius 999px, hover translateY(-4px), 0.3s cubic-bezier(.22,1,.36,1)). A colophon block (flex row, gap 1.6rem, padding 1.6rem, 1px gold-tinted border) pairs a 66px circular ink-stamp SVG (two gold rings, a large "栞" glyph, 16 dots ringing the outside) with a <dl> of 5 rows (発行/所在/刊行/仕様/連絡). The stamp starts opacity 0, scale 1.8, rotation -18deg and, once the footer crosses 55% of the viewport, settles to opacity 1, scale 1, rotation -6deg over 0.55s back.out(2). Beneath it, a small closed book (84×108px) reuses the hero's cover + page-edge technique at only 6px thick — proof the book has thinned from cover to colophon — floating gently (translateY 0↔-6px, 4.6s ease-in-out infinite). Final line: "© 栞座 — 一冊ずつ、手で。".
## Scroll animations
Register ScrollTrigger once; build every tween inside one reusable "leaf reveal" function. For every marked element in a section: opacity:0, rotationY:-74deg, scale:0.97, transformPerspective:1000, transformOrigin:"0% 50%"; a ScrollTrigger (start "top 80%", toggleActions "play none none reverse") tweens to opacity:1, rotationY:0, scale:1, rotation:<that element's fixed resting tilt if any, else 0>, over 0.75s power3.out, staggered 0.08–0.1s, reversing over 0.4s power2.in on leave-back. This single technique — a page turning open, never a fade — drives the hero text, the contents rows, the craft head block, every reader slip, and the whole footer, so the hero's core idea (a page rotating around its spine) recurs on every section, not just the pinned spread.
## Performance & accessibility
Touch only transform, opacity and CSS custom properties on scroll-driven elements; write per-frame leaf values with style.setProperty, not React/state re-renders. Attach a resize listener that calls ScrollTrigger.refresh(). Respect prefers-reduced-motion:reduce globally: skip the hero's pointer-tilt loop and the pinned page-turn's ScrollTrigger entirely (render the spread as a static vertical stack of all five pages' front/back content in reading order, no rotation, no turn buttons), instantly set every leaf-reveal target to its resolved end state, and disable the ribbon-tail sway, folio-glow pulse, foil-emblem shimmer and footer book's idle float via a matching media query. Mark lang="ja" on the root. Turn buttons and the CTA are real <button>s with visible focus and aria-labels; contents is a <nav aria-label="目次"><ol>; the colophon is a real <dl>. No external fetches, no autoplaying audio, no stock imagery, no numbered "01/02/03" service-style lists and no counting-up statistic anywhere — the only numerals on the page are the book's own lowercase Roman folios.
## 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.
[
"栞座",
"栞座について",
"小さな製本室のはじまり",
"折丁 — 手仕事の五工程",
"紙を選び、糸で綴じ、金箔を置く",
"読者の栞",
"本に挟まれた、短い手紙",
"奥付",
"次の一冊のために",
"紙を選ぶ",
"三種の紙を、光にかざして選ぶ。",
"陽だまり紙、藍染め紙、雁皮の透かし紙。手で触れ、光に透かして、その一冊にいちばん似合う紙を選ぶところから、栞座の仕事は始まります。",
"折丁を組む",
"一枚の全紙を、十六ページに折る。",
"大きな一枚の紙に折り目をひとつずつ刻んでいく。十六ページ分の折丁ができるまで、骨箆を握る手を止めません。",
"糸で綴じる",
"麻糸を通し、折丁をまとめる。",
"折丁を重ね、麻糸で背を縫い合わせる。糸の張りひとつで、後々のページの開きやすさが変わります。",
"見返しと花布",
"背の両端に、花布を飾る。",
"見返し紙を貼り、背の天地に花布を編み込む。表からは見えない、けれど本を支える仕事です。",
"金箔を置く",
"熱した真鍮の型で、箔を押す。",
"表紙に真鍮の型を熱してあて、金箔を一枚ずつ押していく。ここでようやく、一冊の本が名前を持ちます。",
"工程",
"栞座で一冊の本が仕上がるまでには、五つの工程があります。ページをめくって、卓の上の手仕事をご覧ください。",
"紙のこと",
"一枚の紙に、何百通りの手触りがある。用途より先に、指先で決めています。",
"折丁のこと",
"十六ページの折丁が幾つも重なって、一冊の厚みになっていきます。",
"綴じのこと",
"糸の張りひとつで、本の開きやすさが変わる。強すぎても、弱すぎても、いけません。",
"見返しのこと",
"見返しの色は、いつも本文の紙より半音低く選びます。",
"娘が三歳になった今も、同じページの同じ場所で笑います。ページの重みまで覚えているみたいです。",
"中野 志保",
"読者・母親",
"糸で綴じてあるから、何百回めくっても背が割れない。子どもに手渡せる本です。",
"高柳 蒼",
"書店員",
"金箔は光の角度で表情が変わる。棚に並べてあるだけで、毎晩見とれてしまいます。",
"遠藤 悠",
"蔵書家",
"注文してから届くまで、次のページをめくるのを待つような時間さえ楽しかった。",
"深澤 律",
"読者",
"発行",
"所在",
"京都市 東山区 いろは町三丁目",
"刊行",
"毎月ひとつの新刊",
"仕様",
"糸綴じ・上製本・金箔押し・限定300部",
"連絡",
"栞",
"— 手製本の工房",
"ページは、めくられるために",
"生まれてくる。",
"紙を選び、折り、糸で綴じ、金箔を置く。栞座は、そのすべての工程をひとつの卓の上で行う、小さな製本室です。",
"限定300部、ナンバリング製本。",
"最初の一葉をめくる ↓",
"目次 — TABLE OF CONTENTS",
"この一冊の、進み方。",
"栞座のサイトも、一冊の本として綴じました。下の目次から、ページをたどってください。",
"目次",
"iv. 折丁",
"手で綴じる、五つの工程。",
"紙を選ぶことから金箔を置くことまで。下の見開きをめくって、卓の上の手仕事をご覧ください。",
"めくって進む ↓ ／ クリックでもめくれます",
"前のページに戻る",
"次のページをめくる",
"xiv. 読者の栞",
"本に挟まれた、短い手紙。",
"栞座に届いた感想を、栞のように一枚ずつ挟みました。",
"xx. 奥付",
"次の一冊も、ここで綴じます。",
"ご依頼・お問い合わせは下記まで。刊行のご案内も随時お届けしています。",
"刊行のご案内を読む",
"— 一冊ずつ、手で。"
]
## 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": "fold-book",
"brand": "栞座",
"accent": "#7f392e",
"lang": "ja",
"title": "次の一冊のご案内",
"intro": "紙の手触りと綴じの違いまで、読みものとして残せる刊行案内です。気になる一冊を選び、ご案内を保存できます。",
"facts": [
[
"お届けする内容",
"新刊の内容紹介・造本仕様・制作の記録"
],
[
"刊行のペース",
"季節ごとに一冊。少部数で制作"
],
[
"購入前の確認",
"送料・発送時期・残部数を確認してからご注文"
]
],
"groups": [
{
"label": "気になる刊行物",
"options": [
{
"title": "紙と余白の記録 · 2,800円",
"detail": "A5変形・96頁・糸かがり。紙を選ぶ工程を写真と文章で辿る一冊。"
},
{
"title": "綴じの小さな見本帳 · 1,800円",
"detail": "A6・48頁・中綴じ。日々使える綴じ方と道具の解説。"
}
]
}
],
"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.