枠の中でスクロール・クリックして動きを試せます。端末指定は実寸表示です。幅が足りない場合は横にスクロールできます。
再現プロンプト
尺鏡堂という架空の古地図鑑定研究所。カーソル追従の円形レンズが表層の靄を晴らし、下層の精密図を section ごとに拡大表示する。ヒーローはAI生成の和装古地図2枚組（褪せた表層と精密な木版下層、同一構図）、以降は鑑定調書・測量網・台帳印・認証印の生成SVG。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。
Build a single self-contained HTML file (inline CSS + vanilla JS, no libraries, no CDN; the only external assets are the hero's two map images described in Section 1 — everything else is inline SVG, and system serif fallbacks are fine) for "SHAKKYODO" (尺鏡堂), a fictional institute for antique-map appraisal and restoration. The page's entire motion identity is optical: a cursor-following circular "lens" reveals sharp, magnified engraving detail wherever it hovers, while everything outside it reads as a calm, aged, slightly out-of-focus surface. The whole page scrolls with the normal window scroll.
## Art direction
Palette: page background / "surface" parchment #EBDCB8, underlayer/engraving ground #DFC98F (one shade deeper — "the ply beneath the surface"), ink #2A2013 (nearly all linework and body text), footer/seal panel #221609, light ink #E9D9AE (linework colour used over the dark footer panel), single accent #8AB4F8 used only for the lens bezel, needles, stamps, grade badges and CTA. Headings use a serif display face (Shippori Mincho or system serif fallback), body copy a serif text face (Noto Serif JP or system serif), technical labels (coordinates, catalogue codes, dimensions) use a monospace stack. Nav bar height is a fixed 64px, translucent parchment (rgba(235,220,184,0.86)) with 8px backdrop blur, sitting above a slim right-edge "scale rail" (14px wide, 11 tick marks at 10% intervals, an accent-coloured 12px marker that tracks scroll progress by setting its top = scrollTop / (scrollHeight - clientHeight) * 100%).
The core rule: every section renders its detailed artwork exactly twice — once as a permanent full-bleed background at CSS filter: blur(3.5px) saturate(0.4); opacity: 0.42 (the "surface"), and once inside the lens at full clarity and magnification (the "underlayer"). Outside the lens you only ever see the blurred copy; nothing ever pops in or out — the lens simply changes focus and scale on the same composition. Sections 2–5 use inline SVG (viewBox "0 0 900 640", preserveAspectRatio "xMidYMid slice", seeded/deterministic geometry — never re-randomised between renders, so both copies are pixel-identical). The hero instead uses a pair of same-composition raster map images (see Section 1); its two layers must use the exact same cover placement (object-fit: cover; object-position: center — the raster equivalent of "xMidYMid slice") in same-sized boxes so surface and underlayer stay in 1:1 pixel correspondence for the lens math.
## The lens mechanism (the page's signature — implement exactly)
Maintain a single global "porthole" element, an absolutely positioned div (top:0; left:0; z-index:50; pointer-events:none; overflow:hidden) layered above the scrolling content. Inside it sits an "inner art host" div (position:absolute; top:0; left:0; transform-origin: 0 0) that holds a live clone of whichever section's SVG is currently under the pointer. A second sibling div, the "ring", is a purely decorative circular bezel (border-radius:50%, 3px solid #8AB4F8 border, box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 14px 34px -10px rgba(0,0,0,.55), inset 0 0 18px rgba(255,255,255,.25)) that always mirrors the porthole's size/position/opacity.
Three magnification levels, cycled by clicking anywhere on the page that is not a link or button: {radius: 108px, scale: 2.2}, {radius: 132px, scale: 3.4}, {radius: 154px, scale: 5.0} (labelled ×2.2 / ×3.4 / ×5.0 in a small HUD pill fixed at top-right, 14px below the nav). On every animation frame, lerp four values toward their targets with a single coefficient LENS_LERP = 0.16 (current += (target - current) * 0.16): the pointer's x and y (root-relative), the porthole radius R (target = the active level's radius if the pointer is over a themed section, else 0 — so the lens shrinks to nothing over the nav or gaps), and the content scale S (target = the active level's scale). Determine "which section is active" every frame by testing the raw pointer's viewport position against each section's getBoundingClientRect().
Each frame, with current values (x, y, R, S):
1. Porthole box: width = height = R*2; transform: translate(x - R, y - R); clip-path: circle(R at R R); opacity: R > 1.5 ? 1 : 0. This is the only clip-path in the whole page and it is never combined with a transform on the same element — the clip stays geometrically exact regardless of S.
2. Inner art host, sized to the active section's current rendered width/height (read fresh every frame, no resize listener needed): let lx = (rootRect.left + x) - sectionRect.left and ly = (rootRect.top + y) - sectionRect.top (the point under the lerped cursor, in the section's own local pixel space). Set transform: translate(R - lx*S, R - ly*S) scale(S) with transform-origin 0 0. This is the classic magnifier derivation: because the porthole's own box already sits at (x - R, y - R), the point (lx, ly) of the artwork always lands exactly at the porthole's centre (x, y) for any S — the lens stays visually pinned to the cursor while the content zooms under it.
3. Swap which section's SVG is cloned inside the inner art host only when the active section index actually changes (not every frame) to avoid needless re-renders.
Under prefers-reduced-motion: reduce, use a lerp factor of 1 (instant, no smoothing) instead of 0.16, and disable the idle seal CSS keyframe animation described below.
## Section 1: Hero (min-height 94vh)
Eyebrow "尺鏡堂 SHAKKYODO — 古地図鑑定・修復研究所" in accent, 0.7rem, letter-spacing 0.24em, uppercase. H1 (clamp(2.1rem, 5.6vw, 3.8rem), line-height 1.28): "その一線の奥に、／もう一枚の地図がある。" Body copy (max-width 48ch): "尺鏡堂は創業以来、古地図の真贋鑑定と修復を専らとする研究所です。表を覆う経年の靄の下には、彫師が刻んだ精緻な線がそのまま眠っています。画面上でカーソルを動かし、レンズ越しにその線を確かめてください。" A hint row ("カーソルを動かして下層を覗く →") fades to opacity 0 over 0.6s the first time the pointer moves; its arrow glyph nudges 6px right and back on a 1.8s ease-in-out loop.
The hero artwork is not SVG: it is a pair of AI-generated raster images of the *same* antique Edo-period Japanese woodblock-printed coastal map (same composition, same 3:2 aspect, e.g. 1536×1024) — an ukiyo-e cartography engraving with warm umber ink (#2A2013) on aged washi paper (#DFC98F): a large intricate island with radial-hachured mountains centre-left, scattered islets and reefs, fine wave ruling across the sea, a thin graticule, an ornate compass rose at the top-right, an empty cartouche panel at the top-left, a tick-marked scale bar at the bottom-left, dotted sea routes, one or two tiny sailing-ship glyphs, and sharply-outlined wormholes/stains (no text or pseudo-characters anywhere — fake glyphs fall apart under magnification). Ship them as "map-surface.webp" — a faded, yellowed, low-contrast variant (fading only; never pre-blur it, the CSS surface filter supplies the blur) — and "map-under.webp" — the crisp, ink-dense original, stored at 2x resolution (3072×2048) so its carved linework survives ×5.0 magnification. The surface layer shows map-surface.webp full-bleed behind the copy; the lens shows map-under.webp. Both are plain <img> elements with object-fit: cover; object-position: center, rendered at exactly the section's box size, so the two variants stay in strict 1:1 pixel correspondence — if the compositions or the cover placement differ at all, the lens reveals "a different map" and the appraisal illusion collapses.
## Section 2: The Appraisal Room (id ls-appraisal, min-height 84vh)
Eyebrow "THE APPRAISAL ROOM — 鑑定室". H2: "傷も滲みも、／年代を語る証言になる。" Two body paragraphs about reading foxing, tears and paper fibre to date a document, then a 2-column grid of four criteria (料紙 / 彩色 / 版式 / 来歴, each with a one-line description), each cell revealed with a 0.09s stagger.
Engraving: a fine 16×12 ruled grid at 0.1 opacity; 16 faint near-vertical "chain lines" simulating handmade-paper watermark fibres; 10 seeded foxing spots (radius 4–13px, two overlapping circles each for a blotchy look, opacity 0.12–0.3); a 9-point jagged "tear" polyline with small accent-coloured X-shaped stitch marks at the thirds between each pair of points; two dimension lines with arrow ticks reading "38.2 cm" and "25.6 cm" (the latter rotated -90°); a rotated (-8°) double-ring accent stamp reading "査"; and three leader lines with small accent dots pointing to captions "虫損" (insect damage), "経年しみ" (age staining) and "補修跡" (repair trace).
## Section 3: Survey & Triangulation (id ls-survey, min-height 84vh)
Eyebrow "SURVEY & TRIANGULATION — 測地の技法". H2: "海図は、／歩いて確かめた点の集まり。" Two paragraphs on triangulation surveying and how the institute reads a chart's survey-network distortion to date revisions, followed by a row of three static labelled values (not animated counters): "12 検出した測点", "±0.4mm 基線誤差", "6.5° 磁針偏差".
Engraving: a faint graticule (opacity 0.06); 12 seeded nodes (minimum pairwise distance 90px inside a 70px margin) connected into a triangulated mesh by joining each node to its 3 nearest neighbours (deduplicated edges); small triangular benchmark markers at every node, filled accent on every third one, labelled "St.01"…"St.12" in monospace; an accent baseline connecting the leftmost and rightmost nodes labelled "基線 1,204.6 m"; and a 54px-radius protractor at (470, 190) with 36 ten-degree ticks (every third tick longer), "0°/90°/180°/270°" labels, an accent needle at -0.5 rad and the caption "磁針偏差 6.5°".
## Section 4: The Ledger (id ls-ledger, min-height 84vh)
Eyebrow "THE LEDGER — 鑑定台帳". H2: "収蔵された地図の一枚一枚に、／固有の記録がある。" One paragraph, then a plain (unnumbered) list of six archive rows, each with a map name, era + region line, and a coloured grade badge (S = filled accent pill, A = ink outline, B = 55%-opacity outline): 肥前国沿岸図 (延享三年写・肥前, A), 蝦夷地見取絵図 (文化期原本・蝦夷地, S), 江戸近郊道中図 (天保改訂版・武蔵相模, B), 琉球航路図 (享保写本・南西諸島, A), 奥州街道分間図 (宝暦原本・陸奥, B), 対馬海峡見取図 (安政改版・対馬壱岐, S). Rows stagger in at 0.09s intervals.
Engraving: 16 faint ruled ledger rows plus two column dividers; nine scattered catalogue-code labels in monospace ("No. A-014", "収蔵 118", "1897年 測量", etc.); three rotated double-ring accent hanko stamps reading 鑑 / 認 / 済; five concentric wobble rings (radii 10–46px) in a corner as a fingerprint-like authentication motif; and a bottom strip of ~26 variable-width bars simulating an old reference barcode.
## Section 5: Footer (id ls-footer, min-height 62vh, background #221609)
H2 in light ink: "一枚の地図を、／正しく未来へ渡す。" Copy: "査定のご依頼、修復のご相談は下記よりお問い合わせください。初回の目視診断は無料です。" An accent pill CTA "査定を依頼する →" opening the local planning dialog (scale 1.02 + accent glow on hover). A closing row: "© 2026 尺鏡堂 SHAKKYODO Institute" / "本町三丁目 分館 ・ kantei@shakkyodo.jp".
Engraving (light-ink-on-dark): a large scalloped wax-seal outline centred at (450, 300) — radius 130, 18 scallops, amplitude 8 — around a 92px ring and a giant accent "証" glyph; 32 faint sunburst lines radiating from the seal centre between radius 80–150; small text curved along an invisible 160px-radius arc reading "SHAKKYODO INSTITUTE · EST. 1931"; a handwriting-style signature path built from five cubic-bezier segments with random vertical jitter; and a small ribbon flourish. The whole seal group breathes gently (scale 1 → 1.015, opacity 1 → 0.85, 6s ease-in-out infinite, gated behind prefers-reduced-motion: no-preference).
## Scroll animations
The single reveal grammar on the page — used for every eyebrow, heading, paragraph, criteria cell and ledger row — is "focus pull": start at opacity:0; filter: blur(9px); transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), filter 0.85s cubic-bezier(0.16,1,0.3,1). An IntersectionObserver (threshold 0.2, rootMargin "0px 0px -8% 0px") toggles a class to opacity:1; filter: blur(0) on enter and removes it on exit, so it re-plays every time an element re-enters the viewport. Never use translateY for this reveal — the identity is optical (focus), not spatial. Stagger siblings (criteria cells, ledger rows) with transition-delay = i * 0.09s. Under prefers-reduced-motion: reduce, force opacity:1; filter:none; transition:none on all reveal elements.
## Performance & accessibility
Sections 2–5 are inline SVG (resolution-independent, so they stay crisp at ×5.0 magnification) — no canvas, no WebGL; the hero's two map images are the page's only raster assets (preload the underlayer once on mount so the first lens reveal doesn't flash empty while the high-res file streams in). SVG geometry is generated once with a seeded mulberry32 PRNG so the blurred "surface" copy and the sharp "lens" copy of an engraving are always pixel-identical. The requestAnimationFrame lens loop is paused via an IntersectionObserver when the page/demo root scrolls out of view. Respect prefers-reduced-motion as described above (instant lens follow, no idle seal animation, no blur/opacity reveal transition). Ensure body text keeps a minimum 4.5:1 contrast against its parchment/panel background outside the lens; the lens itself is a pointer-events:none decorative overlay so it never blocks clicks, keyboard focus or link activation underneath it.
## 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.
[
"査",
"虫損",
"経年しみ",
"補修跡",
"基線 1,204.6 m",
"磁針偏差 6.5°",
"鑑",
"認",
"済",
"収蔵 118",
"1897年 測量",
"第三係",
"原寸 1:50,000",
"旧蔵 松濤家",
"改装 昭和9年",
"複製 二部",
"貼付図あり",
"証",
"鑑定室",
"測地の技法",
"台帳",
"料紙",
"繊維の縦横・厚みから漉かれた年代と産地を推定する。",
"彩色",
"顔料の粒子と褪色の度合いから顔料の種類と塗布時期を読む。",
"版式",
"版木の摩耗・彫り直しの跡から刷りの順序を特定する。",
"来歴",
"旧蔵印・書き込みから所蔵者の変遷をたどる。",
"肥前国沿岸図",
"延享三年写",
"肥前・西海道",
"蝦夷地見取絵図",
"文化期原本",
"蝦夷地",
"江戸近郊道中図",
"天保改訂版",
"武蔵・相模",
"琉球航路図",
"享保写本",
"南西諸島",
"奥州街道分間図",
"宝暦原本",
"陸奥",
"対馬海峡見取図",
"安政改版",
"対馬・壱岐",
"尺鏡堂",
"査定を依頼 →",
"クリックで倍率切替",
"尺鏡堂 SHAKKYODO — 古地図鑑定・修復研究所",
"その一線の奥に、",
"もう一枚の地図がある。",
"尺鏡堂は創業以来、古地図の真贋鑑定と修復を専らとする研究所です。表を覆う経年の靄の下には、彫師が刻んだ精緻な線がそのまま眠っています。画面上でカーソルを動かし、レンズ越しにその線を確かめてください。",
"カーソルを動かして下層を覗く",
"THE APPRAISAL ROOM — 鑑定室",
"傷も滲みも、",
"年代を語る証言になる。",
"一枚の地図には、描かれた線と同じだけの「傷」が刻まれています。虫損、しみ、破れ、貼り継ぎ——鑑定士はそのひとつひとつを読み解き、紙の来歴を組み立てます。",
"拡大鏡と紫外線灯、そして百年分の記録との照合。表面だけでは分からない年代を、レンズの奥に見つけてください。",
"SURVEY & TRIANGULATION — 測地の技法",
"海図は、",
"歩いて確かめた点の集まり。",
"近世の海図は、測量士が海岸を歩き、三角測量によって基準点を結ぶことで作られました。点と点を結ぶ網の正確さこそが、地図の信頼を決めます。",
"尺鏡堂では、地図に残る測量網の歪みを解析し、いつ・誰の手による改訂かを推定します。レンズを合わせると、紙面に沈んだ測点と基線が浮かび上がります。",
"検出した測点",
"基線誤差",
"磁針偏差",
"THE LEDGER — 鑑定台帳",
"収蔵された地図の一枚一枚に、",
"固有の記録がある。",
"鑑定を終えた地図は、台帳に一葉ずつ記録されます。認印の下、レンズを重ねると刻まれた収蔵番号が読み取れます。",
"一枚の地図を、",
"正しく未来へ渡す。",
"査定のご依頼、修復のご相談は下記よりお問い合わせください。初回の目視診断は無料です。",
"査定を依頼する",
"© 2026 尺鏡堂 SHAKKYODO Institute",
"本町三丁目 分館 ・ kantei@shakkyodo.jp"
]
## 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": "lens-scope",
"brand": "尺鏡堂",
"accent": "#805c37",
"lang": "ja",
"title": "一枚の地図の、ご相談メモ",
"intro": "わかっていることと、これから確かめたいことを分けて残します。",
"facts": [
[
"相談の入口",
"地図の題名・大きさ・状態・来歴など、わかる範囲から。"
],
[
"資料の扱い",
"この見本では写真や個人情報を送信しません。"
],
[
"次の確認",
"資料の実見や来歴の調査が必要かを確認します。"
]
],
"groups": [
{
"label": "相談したいこと",
"options": [
{
"title": "資料について知りたい",
"detail": "記載内容や制作年代について、調査したい点を整理します。"
},
{
"title": "引き継ぎ方を考えたい",
"detail": "保存状態と、保管・譲渡を考えるうえでの質問を整理します。"
}
]
}
],
"brief": "地図についてわかっていることと、相談したい内容をお書きください。",
"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.