Era Line

再現プロンプト

架空の museum「THE CHRONOTYPE ARCHIVE」を、紙色と可変フォントが連続補間しながら6つの時代を旅する年表アーカイブ。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build a single self-contained HTML file (inline CSS/JS) for "THE CHRONOTYPE ARCHIVE" — a fictional museum of applied design history. It is a single continuous vertical-scroll page (normal window scroll is fine for this standalone build) that reads as a living ledger walking through six invented design eras, from 1861 to "present day" 2026. The whole page runs on ONE continuous scroll-driven scalar that blends paper colour, ink colour and live variable-font axes — never a stepped or re-triggered transition. Use GSAP 3 + ScrollTrigger from CDN.

## Art direction

Brand accent (constant "brass fixture" colour, never interpolated): #C0A062. Everything that represents the museum's physical hardware — the fixed timeline axis, the HUD plaque, card borders, spine nodes, buttons — stays brass-on-dark regardless of era. Everything that represents the "paper" of the archive — the page backdrop, ink/text colour, and the display typeface's weight/optical-size — continuously ages as the user scrolls.

Load Google Fonts "Fraunces" as a variable font (its axes include wght 100–900 and opsz 9–144) for every large display heading (hero title, era names, HUD year, mission/footer titles). Body copy and captions use a static system serif stack: Georgia, 'Iowan Old Style', 'Times New Roman', serif — the caption typeface never changes; only the ARCHIVE'S OWN headline glyphs shift mood per era.

Define six era "identity" stops, each with a paper hex, ink hex, Fraunces wght, Fraunces opsz, heading letter-spacing (em), a year range, a one-paragraph curator description and two invented artifacts (title / medium+date spec / one-sentence note):

1. THE GUILD HAND, 1861–1901 — paper #EDE3CF, ink #3B2A1A, wght 460, opsz 30, tracking 0.01em. Hand-set, lamplit guild printing. Artifacts: "Ledger of Hours" (Vellum, hand-ruled · 1874) and "The Wren & Thistle Mark" (Woodblock, 4×6 in · 1868).
2. THE MACHINE LINE, 1902–1928 — paper #D9D4C8, ink #20241F, wght 640, opsz 16, tracking 0.02em. Cylinder-press industrial repeatability. Artifacts: "Founders' Gauge No.7" (Cast steel · 1911) and "The Ironworks Broadside" (Letterpress, 22×30 in · 1919).
3. THE ORNAMENT AGE, 1929–1951 — paper #171310 (dark), ink #E7C68A (gold), wght 330, opsz 120, tracking 0.06em. Gold-leaf Deco excess — the only era with an inverted (dark paper / gold ink) palette. Artifacts: "The Aurelia Monogram" (Gold leaf on board · 1934) and "Cinema Vertex Signage" (Neon-etched glass · 1938).
4. THE GRID DOCTRINE, 1952–1979 — paper #F1EFE7, ink #15171C, wght 560, opsz 12, tracking 0.005em. Swiss-style structural clarity. Artifacts: "Transit Grid Manual" (Offset print, spiral-bound · 1964) and "Kessler Type Specimen" (Offset print · 1971).
5. THE SIGNAL BURST, 1980–1999 — paper #160B22, ink #F3EEFF, wght 780, opsz 64, tracking 0.03em. Postmodern noise and misregistration. Artifacts: "Static Frequency Poster" (Riso print, 3 layers · 1988) and "The Nightcode Flyer" (Xerox, hand-cut · 1994).
6. THE LUMEN FIELD, 2000–2026 ("Present") — paper #0A0F1C, ink #DCEBFF, wght 380, opsz 9, tracking 0.015em. Light-as-substrate, digital minimalism. Artifacts: "Ambient Wayfinding System" (Rendered light · ongoing) and "Chronotype Variable" (Variable font, 2 axes · 2021 — its note literally reads "the archive's own typeface — the one rendering this very sentence").

Colour maths: build a COLOR_STOPS array of the six era identities plus a duplicate of era 6 appended (7 stops total), so the final scroll segment can hold the Lumen Field palette steady while the year counter keeps climbing to 2026 underneath it. A YEAR_STOPS array of exactly [1861, 1902, 1929, 1952, 1980, 2000, 2026] pairs 1:1 with those 7 stops.

## Scroll mechanics (single source of truth)

Wrap only the six era sections in one tall container ("the timeline"). Create exactly one ScrollTrigger: trigger = the timeline container, start "top top", end "bottom bottom", scrub: true, with an onUpdate callback that:
1. Computes posT = self.progress * 6 (0..6, one unit per stop gap).
2. Splits posT into lowIndex/highIndex/frac via a shared helper (lowIndex = min(count-2, floor(clamp(posT,0,count-1))), frac = clamp - lowIndex), then eases frac through smoothstep (t*t*(3-2*t)) for the colour/type blend only.
3. Linearly interpolates paper RGB and ink RGB between COLOR_STOPS[lowIndex] and COLOR_STOPS[highIndex] with the eased fraction, and writes them as CSS custom properties --paper-rgb / --ink-rgb ("r, g, b" strings) on the root element, consumed everywhere via rgb(var(--paper-rgb)) / rgb(var(--ink-rgb)).
4. Interpolates wght and opsz the same eased way and writes --wght / --opsz custom properties; every Fraunces heading reads font-variation-settings: "wght" var(--wght), "opsz" var(--opsz) plus letter-spacing: var(--tracking) (also interpolated, unrounded to 3 decimals).
5. Computes the year with a SEPARATE, non-eased linear interpolation across YEAR_STOPS (same lowIndex/frac but raw, no smoothstep) and writes the rounded integer directly into a fixed HUD element's textContent. This is a literal scrub-linked switch — never a counting/tweened animation, never re-triggered.
6. Writes the fixed left-edge axis rail's fill height and playhead "top" as self.progress*100%, and toggles an "is-active" class on whichever of the six axis tick marks matches lowIndex (clamped to 5).

Because the backdrop, ink colour and Fraunces axes are painted on a persistent full-bleed layer beneath the scrollable content (not per-section discrete backgrounds), the page never shows a hard colour seam between eras — colour and type mood drift continuously even while inside a single era's own section, so 90% of the way through "The Guild Hand" the paper has already begun warming toward "The Machine Line" grey, arriving exactly on cue as that section begins.

Before the timeline enters view (hero, mission) and after it exits (footer), the CSS variables simply hold whatever value ScrollTrigger last wrote — era 1's cream/sepia by default at load, era 6's ink-blue/glow after the last scroll tick — so no extra logic is needed for those sections.

## Section 1: Hero

Full-viewport intro. Kicker "ESTABLISHED 1861 · A LIVING LEDGER OF APPLIED FORM" in Fraunces, 0.72rem, letter-spacing 0.26em, colour #C0A062. H1 "THE CHRONOTYPE ARCHIVE", Fraunces, clamp(2.1rem,6.4vw,4rem), weight 700. One-sentence sub-copy in the static serif. Below it, a large static preview of the mechanism: an 1861 numeral (clamp(2.4rem,7vw,4.2rem), Fraunces) with "THE GUILD HAND" underneath — an "establishing shot" of the instrument before the fixed HUD takes over. Then a 6-item era-index nav grid (repeat(auto-fit, minmax(150px,1fr))), each a roman numeral (I–VI) + era name button; clicking smooth-scrolls to that era's section (compute the target section's offset relative to the scroller and call scrollTo({top, behavior:'smooth'})). Finish with a bouncing "↓ OPEN THE LEDGER" cue, animating translateY 0→6px over 2.4s ease-in-out infinite. A soft radial vignette (560px circle, rgba(192,160,98,0.16), blurred) breathes behind the title, scale 1→1.12 opacity 0.7→1 over 9s ease-in-out infinite alternate — the page must never hold a fully static frame.

## Section 2: Mission

A short curatorial statement: an inline SVG "wax seal" emblem (two concentric circles + a checkmark stroke, 46px, stroke #C0A062), heading "Nothing here was designed twice." (Fraunces, ~2rem), and two body paragraphs in the static serif explaining the archive catalogues real institutional artefacts by the year they were made, not rediscovered.

## Section 3: The Era Timeline (six plates)

Each era is its own min-height:100vh section, border-top 1px rgba(192,160,98,0.18), containing: a small "PLATE {roman numeral}" label (never arabic-numbered — use Roman numerals I–VI only), the era name as a Fraunces h2 (clamp(1.9rem,5vw,3rem)) whose font-variation-settings/letter-spacing come from the shared --wght/--opsz/--tracking variables, a year-range line, and the curator paragraph. Below that, a horizontal "spine": a 2px rail (linear-gradient from #C0A062 to transparent) that scrub-draws via scaleX 0→1 (transform-origin left) as the section scrolls from "top 85%" to "top 35%" of the viewport, scrub value 0.6 — each era's own local timeline visibly "advances" as you read it. From two points on that rail, small brass dot "nodes" sit above two specimen cards. Each card opens with a 4:3 landscape "plate" figure filling the card's top edge-to-edge (a plain lazy-loaded <img> or an equivalent block, display:block, aspect-ratio 4/3, object-fit cover, ending on a 1px rgba(192,160,98,0.4) brass hairline above the caption) — a flat, matte archival scan of the artifact, complete to all four edges, in that era's own paper/ink palette, with NO baked-in specular highlight so the card's cursor spotlight (below) stays the only raking light. Since this standalone build ships no image files, generate each plate in code (CSS gradients / inline SVG data-URI) as a period-plausible abstract facsimile of the named artifact. Keep the plate static-positioned so the absolutely-positioned spotlight overlay paints above it. Cards start rotationX(-100deg) (hinged at the top, transform-origin "50% 0%", perspective 700px) and opacity 0; on ScrollTrigger enter ("top 82%", toggleActions "play none none reverse") they animate to rotationX(0)/opacity 1 over 0.75s with ease back.out(1.7) and a 0.18s stagger — reading as a specimen-case lid swinging open. Cards have a 1px #C0A062 border, background rgba(ink-rgb, 0.055), and on pointer-move set --mx/--my (percentage of the card's own bounding box) driving a 180px radial-gradient spotlight (rgba(192,160,98,0.28) → transparent 65%) that fades in on hover/focus — a raking light passing over the specimen glass.

## Section 4: Footer

Kicker "THE READING ROOM IS OPEN", H2 "Step into the ledger.", one paragraph of fellowship copy, and a pill CTA "Request a Reading Slip →" (1px #C0A062 border, transparent fill, hover inverts to solid #C0A062 with dark text and translateY(-2px)); the button pulses with a 3.2s box-shadow ring animation so it's never static. Close with a small "ENTRY LOGGED · PRESENT DAY · 2026" line.

## Shared reveal languages (used everywhere, no plain fade-up)

"Stamp" entrance for every structural heading/kicker/CTA/plate label: starts at scale 1.35, rotate -6deg, opacity 0; ScrollTrigger start "top 78%", toggleActions "play none none reverse", animates to scale 1/rotate 0/opacity 1 over 0.65s, ease back.out(1.8), stagger 0.1s (reverses on leave-back over 0.25s power2.in) — reads as a rubber date-stamp hitting the page, never a y-offset.

"Ink-bleed" entrance for every paragraph of curator copy: starts filter: blur(7px), letter-spacing 0.14em, opacity 0; same trigger config, animates to blur(0px)/letter-spacing 0em/opacity 1 over 0.85s power2.out, stagger 0.12s — ink settling into paper fibre, again with zero y-translate.

## Fixed overlays

A brass HUD plaque pinned top:18px right:18px the entire time, dark gradient background (linear-gradient 160deg #1b1712→#0d0b09, animated background-position sheen over 7s ease-in-out infinite), 1px #C0A062 border, showing a small "CURRENT ENTRY" kicker, the live year number (Fraunces, 1.6rem, colour #C0A062), and the live era name (0.62rem). A fixed vertical brass axis rail at left:22px spanning 10%–90% viewport height (hidden under 780px), a 2px track with an accent fill that grows with scroll progress, a glowing 9px playhead dot (box-shadow pulse 2.4s ease-in-out infinite alternate), and six evenly-spaced roman-numeral tick marks that light up in brass when their era is active.

## Performance & accessibility

Respect prefers-reduced-motion: skip the hinge/spine-draw ScrollTriggers entirely and set final states immediately; keep the colour/year scrub (it is informational, not decorative); disable the idle keyframe animations (playhead glow, hero vignette breathe, cue bounce, CTA pulse, HUD sheen). Clean up every ScrollTrigger/GSAP tween via gsap.context().revert() and disconnect the ResizeObserver (used to call ScrollTrigger.refresh()) on unmount. All visuals are code-generated (CSS gradients, an inline feTurbulence SVG data-URI for a 180×180px parchment grain at 0.5 opacity multiply-blended, the twelve code-generated specimen plates, and plain DOM) — no external images or fonts beyond the one Google Fonts request. Target 60fps at 1440px/dpr2; the only per-frame work is five CSS custom-property writes plus two textContent writes inside a single scrub callback.

## 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": "era-line",
  "brand": "THE CHRONOTYPE ARCHIVE",
  "accent": "#765331",
  "title": "Your reading-room visit",
  "intro": "Explore the working material behind the six eras. Plan a focused visit with the right access level before opening the ledger.",
  "facts": [
    [
      "Reading sessions",
      "Tuesday–Saturday · 10:00–17:00 · 90-minute sessions"
    ],
    [
      "Included",
      "Desk access, collection index and supervised handling"
    ],
    [
      "Reproduction",
      "Research copies require a separate rights review"
    ]
  ],
  "groups": [
    {
      "label": "Access",
      "options": [
        {
          "title": "Reader · complimentary",
          "detail": "Collection index and reference books. Suitable for a first visit."
        },
        {
          "title": "Researcher · £18 / session",
          "detail": "A reading desk and up to five preselected artifact folders."
        },
        {
          "title": "Fellow · £120 / year",
          "detail": "Quarterly Review, advance session planning and scan-request support."
        }
      ]
    }
  ],
  "date": true,
  "notes": [
    "Bring the artifact references you wish to consult. High-resolution scans and publication permissions are separate from reading-room access.",
    "The date is a planning preference, not confirmed availability."
  ]
}

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