From 0f57f8569c741634883621d3d2d9804e8d44d1d9 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 6 Jul 2026 00:05:22 +0000 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E7=89=A9=E8=AA=9E=E3=83=A2?= =?UTF-8?q?=E3=83=BC=E3=83=89=20=E2=80=94=20=E4=BA=BA=E9=A1=9E1=E4=B8=872?= =?UTF-8?q?=E5=8D=83=E5=B9=B4=E3=82=928=E7=AB=A0=E3=81=A7=E8=AA=9E?= =?UTF-8?q?=E3=82=8B=E3=82=AC=E3=82=A4=E3=83=89=E4=BB=98=E3=81=8D=E3=83=84?= =?UTF-8?q?=E3=82=A2=E3=83=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✦ボタン / Sキーで開始。各章でタイムラインが該当年へ移動し、 カメラがその舞台（肥沃な三日月地帯〜2100年の地球）へ飛行、 日英のナレーションカードを表示する。 - 8章: 最初の火 / 最初の都市 / 帝国 / 大いなる死 / 機械の時代 / 大加速 / 波の頂 / 開かれた結末 - 最終章は選択中の出生率シナリオに連動して結末が変わる - ← → / Space で章送り、Esc で終了、スライダー操作で自動解除 - 物語中は自動回転を停止し、終了時に元の状態へ復元 - モバイル: カード縮小 + カメラ高度を +1.2 補正 Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01FyQi56Xny5G7XxLsGD5QT3 --- IDEAS.md | 11 +++ README.md | 2 + index.html | 197 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 210 insertions(+) diff --git a/IDEAS.md b/IDEAS.md index fe08e62..577250a 100644 --- a/IDEAS.md +++ b/IDEAS.md @@ -29,8 +29,19 @@ - EN/JA 自動切替 - ドキュメントも日英両方 +### 物語モード（8章の寓話） +- ✦ボタン / `S`キーで開始。最初の火 → 最初の都市 → 帝国 → 黒死病 → 産業革命 → 大加速 → 波の頂 → 開かれた結末 +- 各章でカメラがその舞台（肥沃な三日月地帯、メソポタミア、欧州、英国…）へ飛び、日英ナレーションを表示 +- 最終章は選択中のシナリオに連動して結末が変わる +- ← → / Space で章送り、Esc で終了、スライダー操作で自動解除 + ## 未実装アイデア +### 物語の拡張 +- **「あなたの人生」モード**: 誕生年を入れると、生まれた年→現在→平均余命までをタイムライン上にハイライト。「あなたが生まれたとき世界は◯◯億人、いまは◯◯億人」 +- **章の追加**: 大航海時代とコロンブス交換、アフリカの世紀（21世紀後半の人口重心移動） +- **サウンドスケープ**: 焚き火の爆ぜる音 → 街の喧騒 → 静寂へ、WebAudio で年代に応じて変化 + ### 追加レイヤー - **出生数ドット**: 赤ちゃんが生まれてる場所をドットで打つ。「どこで生命が始まっているか」が直感でわかる - **死亡数との対比**: 出生ドット vs 死亡ドットの色分け diff --git a/README.md b/README.md index 2520306..b7b30ce 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Each dot of light represents 50,000 people. Watch civilizations rise as flickeri ## Features - **12,000-year timeline** — Slide from 10,000 BC to 2100 AD +- **Story mode** — an 8-chapter guided fable from the first fires to 2100, with camera flights to each chapter's stage (✦ button or `S` key). The final chapter changes with the scenario you choose - **3 future scenarios** — Linear TFR decline / Stable TFR / Soft landing (floor at 0.8) - **Age structure coloring** — Toggle to see aging populations shift from orange to blue-purple - **Migration flow arcs** — Gravity model with GDP attraction and language bonuses (2024+) @@ -71,6 +72,7 @@ Full references: [`docs/methodology/data-sources.md`](docs/methodology/data-sour ## 機能 - **1万2千年のタイムライン** — 紀元前1万年〜西暦2100年をスライダーで操作 +- **物語モード** — 最初の焚き火から2100年まで、8章のガイド付き寓話。各章の舞台へカメラが移動（✦ボタン / `S`キー）。最終章は選択中のシナリオで結末が変わる - **3つの未来シナリオ** — 出生率の線形低下 / 固定 / 緩やかな着地（下限0.8） - **年齢構成の色分け** — 高齢化する社会がオレンジ→青紫に変化 - **移民フロー** — GDP引力+言語ボーナスの重力モデル（2024年以降） diff --git a/index.html b/index.html index 405ad84..434e078 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,37 @@ .settings-group { display: flex; align-items: center; gap: 8px; } .settings-label { font-size: 0.65rem; opacity: 0.4; min-width: 55px; text-align: right; } + .story-card { + position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); + z-index: 20; width: min(560px, calc(100vw - 32px)); + background: rgba(0,0,0,0.55); backdrop-filter: blur(12px); + border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; + padding: 18px 22px 14px; box-sizing: border-box; + opacity: 0; pointer-events: none; transition: opacity 0.5s; + } + .story-card.visible { opacity: 1; pointer-events: auto; } + .story-inner { transition: opacity 0.35s; } + .story-chapter { font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.35; } + .story-title { font-size: 1.05rem; font-weight: 300; letter-spacing: 0.12em; margin: 6px 0 8px; } + .story-text { font-size: 0.82rem; font-weight: 300; line-height: 1.75; opacity: 0.85; } + .story-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } + .story-nav-btn { + background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff; + border-radius: 16px; padding: 4px 16px; font-size: 0.72rem; cursor: pointer; + } + .story-nav-btn:hover { border-color: rgba(255,255,255,0.7); } + .story-nav-btn:disabled { opacity: 0.25; cursor: default; } + .story-progress { display: flex; gap: 6px; } + .story-progress span { + width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.25); + } + .story-progress span.active { background: rgba(255,255,255,0.9); } + .story-close { + position: absolute; top: 6px; right: 10px; background: none; border: none; + color: rgba(255,255,255,0.4); font-size: 1rem; cursor: pointer; padding: 4px; + } + .story-close:hover { color: #fff; } + .loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; z-index: 100; transition: opacity 0.5s; @@ -98,6 +129,10 @@ } .scenario-btn::after { display: none; } + + .story-card { bottom: 84px; padding: 14px 16px 12px; } + .story-title { font-size: 0.95rem; } + .story-text { font-size: 0.78rem; line-height: 1.65; } } /* ── Small mobile (<400px) ── */ @@ -126,6 +161,7 @@

HUMANS OF EARTH + @@ -137,6 +173,20 @@

HUMANS OF EARTH + +
+
+
+
+
+
+ +
+ +
+ +