scroll-storyteller

スクロールストーリーテラー

Anthropic 独自のデザイン言語（厳格なデュオトーンパレット、有機的なベジェ SVG パス、カスタムカーソル、章立てのナラティブ）を使って、没入感のあるインタラクティブなストーリーテリング体験を作成します。

ワークフロー

AskUserQuestion を使って好みを確認し、次の内容を生成します。

手順	質問	選択肢
1	アニメーションは？	GSAP（豊富）と CSS のみ（軽量）
2	雰囲気は？	暖色系、寒色系、クリエイティブ
3	パレットは？	（雰囲気に応じて 3～4 種類を提示）
4	トピックは？	聖書／テクノロジー／ビジネス／個人／カスタム
5	章の数は？	3、4、または 5
6	章ごとの内容は？	タイトル、説明、キーワード

生成内容：

bash ~/.claude/skills/scroll-storyteller/scripts/generate.sh my-story <palette> [--gsap] [--chapters N]

生成後： 内容をカスタマイズし、SVG を作成します（references/structure-templates.md を参照）。

SVG イラストのワークフロー

各章には、ナラティブにおける位置に合った、トピックに関連する SVG が必要です。

位置	目的	構成	例
ヒーロー	場面を設定し、対比を示す	横長（1000x1000）、2 つのシルエット	遠くにいるダビデとゴリアテ
第 1 章	主人公を紹介する	中央の人物＋背景	羊と羊飼い
第 2 章	葛藤／障害を示す	威圧的で、画面いっぱいに広がる	巨大な戦士
第 3 章	解決／勝利	動きがあり、光を放つ	勝者＋倒れた敵＋光線
第 4 章	葛藤を深める（任意）	混み合い、緊張が高まる	軍勢が集まり、脅威が増す
第 5 章	最終クライマックス（任意）	決定的な動き	飛ぶ石、衝突の瞬間
フィナーレ	象徴的なまとめ	中央のシンボル	王冠＋光

章数に応じたライト／ダークのパターン：

• 3 章： 第 1 章＝ライト → 第 2 章＝ダーク → 第 3 章＝ライト
• 4 章： 第 1 章＝ライト → 第 2 章＝ダーク → 第 3 章＝ライト → 第 4 章＝ダーク
• 5 章： 第 1 章＝ライト → 第 2 章＝ダーク → 第 3 章＝ライト → 第 4 章＝ダーク → 第 5 章＝ライト

手順：

1. references/svg-illustration-guide.md を読み込み、テーマと要素の対応を確認します
2. 章の位置（hero/ch1/ch2/ch3/ch4/ch5/finale）を特定します
3. 章の内容からトピックのキーワードを抽出します
4. 要素ライブラリから SVG 要素を選びます。
   • キャラクター：figure-small、figure-large、figure-triumphant、figure-action
   • 自然：hills、sun、tree、path、clouds、lightning、wind
   • オブジェクト：staff、crown、shield、weapon、stone、obstacle
   • 抽象要素：radiate、rings、trajectory、converge、impact
5. 位置テンプレートを使って構成します
6. パレットの雰囲気に合わせたスタイルを適用します（references/design-harmony.md → Palette Mood → SVG Style を参照）
7. アニメーションクラスを追加します：organic-path、fade-path、scale-path

SVG チェックリスト：

• 色は var(--deep) と var(--foam) のみを使用している
• すべてのパスが有機的なベジェ曲線（Q/C コマンド）である
• 幾何学プリミティブ（circle、rect、ellipse）を使用していない
• 不透明度の範囲がパレットの雰囲気に合っている
• 構成が章の位置に合っている
• 章の内容を象徴的に表現している

アニメーションスタイル

スタイル	ライブラリ	サイズ	最適な用途
GSAP	GSAP 3.x + ScrollTrigger	約45KB	豊かなインタラクション、SVG の描画、軌道、タイムライン
CSS のみ	なし（IntersectionObserver）	0KB	軽量、高速読み込み、シンプルな表示

GSAP の機能

• SVG パスの描画アニメーション（strokeDasharray）
• 継続的な軌道／回転エフェクト
• スクロール連動のタイムライン制御
• スクラブ機能付きパララックス
• 正確なタイミングによる段階的なアニメーション

CSS のみの機能

• IntersectionObserver による表示
• 遅延付き CSS トランジション
• transform ベースのアニメーション
• 外部依存なし
• バンドルサイズの縮小

デュオトーンパレット

#	テーマ	ライト	ダーク	雰囲気
1	Anthropic	#FAF9F5 クリーム	#141413 チャコール	温かみ
2	Midnight	#E8F4F8 アイス	#0D1B2A ネイビー	涼しげ
3	Sepia	#F5F0E6 羊皮紙	#2C1810 エスプレッソ	温かみ
4	Forest	#F0F4F0 霧	#1A2E1A 常緑樹	クリエイティブ
5	Dusk	#F4F0F8 ラベンダー	#1E1A2E バイオレット	クリエイティブ
6	Ember	#FFF5F0 ブラッシュ	#2A1A14 エンバー	温かみ
7	Steel	#F0F2F5 シルバー	#1A1C20 グラファイト	涼しげ
8	Ocean	#F0F8F8 泡	#0A1A1A ディープ	涼しげ

雰囲気 → パレットの対応：

• 温かみ：1（Anthropic）、3（Sepia）、6（Ember）
• 涼しげ：2（Midnight）、7（Steel）、8（Ocean）
• クリエイティブ：4（Forest）、5（Dusk）

デザインモード

モード	説明	使用場面
Authentic（デフォルト）	厳密なデュオトーン、有機的なパス	エディトリアル、ブランドストーリーテリング
Expressive	マルチカラーのアクセントを使用可能	製品紹介、デモ

主な機能

機能	説明
カスタムカーソル	スムーズなイージングとmix-blend-modeを備えた二重レイヤーのカーソル
ヒーローセクション	GSAP：流れるような有機的な線（1000x1000の背景）。CSSのみ：アニメーションで光が広がるデスクランプ
スポットライトレイヤー	暗いセクションで、カーソルに追従する放射状グラデーション
段階的な表示	タイトルの単語が読み込み時に順番にアニメーション表示
チャプター構成	明るいセクションと暗いセクションを切り替え、トランジションを適用
有機的なSVG	手描き風のベジェパス。塗りのみ（ストロークなし）
パララックス	スクロール時に奥行きを感じさせる控えめな動き

Anthropicのデザイン言語

厳密なデュオトーンパレット

要素	Hex	CSS変数
クリーム（ライト）	#FAF9F5	--cream
チャコール（ダーク）	#141413	--charcoal

ルール： 他の色は使用しません。すべてのイラストに、この2色のみを使用します。

タイポグラフィ

役割	フォント	フォールバック
ディスプレイ／見出し	Instrument Serif	Georgia, serif
本文／UI	Inter	-apple-system, sans-serif

特徴：

• 大きく、エディトリアルな見出し（clamp 3rem - 7rem）
• ライトウェイト（300-400）
• ディスプレイ文字は負の字間（-0.02em）
• ゆったりした行の高さ（1.5-1.8）

SVGデザインのルール

ルール	説明
塗りのみ	主要な形状にストロークを使用しない
有機的なパス	複雑なベジェ曲線で、手描き風にする
viewBox	常に1000x1000または500x500（正方形）
2-4個のパス	構成はシンプルに保つ
レイヤー構成	明るい形状を背面に、暗い形状を前面に配置

アンチパターン：

❌ <circle>, <rect>, <ellipse> (geometric)
❌ stroke="..." on main elements
❌ Multiple colors
✅ <path d="M... Q... C..."> with organic curves

トピックに応じたSVG生成

svg-generator.shヘルパーは、チャプターの内容に基づいて適切なSVGテンプレートを自動選択します。

キーワード	テンプレート	最適な用途
identity, profile, self, unique	指紋＋認証	個人のアイデンティティに関する概念
network, connect, distributed, system	中央ハブ＋ネットワーク	システムアーキテクチャに関する概念
protect, secure, vault, lock	保護された金庫＋リンク	セキュリティに関する概念
growth, learn, knowledge, tree	ナレッジツリー	学習／成長
enforce, filter, gate, barrier	ゲートウェイアーチ	適用／検証
trust, hand, collaboration	手で支える＋接続	パートナーシップに関する概念
unify, finale, complete	同心円のシンボル	結論／統一

使用方法：

# Source the generator in your script
source scripts/svg-generator.sh

# Generate SVG for a chapter (position: hero/ch1/ch2/ch3/ch4/ch5/finale)
generate_svg_for_chapter \
  "ch1" \
  "Digital Identity" \
  "Your unique identity on the blockchain" \
  "var(--foam)" \
  "var(--deep)" \
  "fade-path"

位置： hero | ch1 | ch2 | ch3 | ch4 | ch5 | finale

アニメーションパターン

GSAP と CSS のアニメーションパターンの詳細については、references/animation-patterns.md を参照してください。

アニメーションクラス：

クラス	説明	用途
organic-path	すべての SVG パスの基本クラス	常に適用
fade-path	フェードインアニメーション	ほとんどのパスのデフォルト
scale-path	拡大アニメーション	fade-path と組み合わせ
draw-path	ストローク描画アニメーション（GSAP のみ）	線／パスの描画効果

ナラティブ構成

ナラティブ構成と HTML テンプレートについては、references/structure-templates.md を参照してください。

リソース

ファイル	目的	読み込むタイミング
scripts/generate.sh	HTML を生成（CSS のみ、または --gsap を指定して GSAP を使用）	新しいプロジェクトを開始するとき
scripts/svg-generator.sh	トピックに基づく SVG 生成ヘルパー	カスタムイラストを作成するとき
references/animation-patterns.md	GSAP + CSS アニメーションパターン	アニメーションを実装するとき
references/structure-templates.md	ナラティブ構成 + HTML テンプレート	セクションを構築するとき
references/svg-illustration-guide.md	テーマ → SVG 要素の対応付け、テンプレート	トピックに合ったイラストを作成するとき
references/example-david-goliath.md	5 つの SVG をすべて含む完全な実例	SVG 構成パターンを学ぶとき
references/anthropic-design.md	デザインシステムの完全なリファレンス	詳細なカスタマイズ
references/gsap-patterns.md	GSAP + ScrollTrigger のレシピ	GSAP アニメーションスタイルを使用するとき
references/css-only-patterns.md	IntersectionObserver のレシピ	CSS のみのアニメーションスタイルを使用するとき
references/design-harmony.md	ビジュアルの一貫性 + パレットとムードに合わせた SVG スタイリング	一貫したデザイン品質を保つとき

サンプルファイル

ファイル	アニメーション	説明
agent-harness-gsap.html	GSAP	オービット SVG、描画アニメーション、視差効果を備えた充実した体験
agent-harness-anthropic.html	CSS のみ	IntersectionObserver による表示効果を備えた軽量版

使用ワークフロー

1. アニメーションスタイルを選択：GSAP（リッチ）または CSS のみ（軽量）
2. パレットを選択：ムードを選び、具体的なパレットを選択
3. 章の数を選択：3、4、または 5 章を選択
4. ナラティブを計画：ヒーロー + 選択した章 + フィナーレ
5. 生成：bash scripts/generate.sh project-name <palette> [--gsap]
6. コンテンツをカスタマイズ：プレースホルダーテキストを置き換え
7. イラストを追加：assets/ の有機的なパステンプレートを使用
8. テスト：アニメーション、カーソル、スクロール動作を確認
9. 公開：自己完結型の単一 HTML ファイル

アクセシビリティ

• prefers-reduced-motion に対応（アニメーションを無効化）
• タッチデバイスを検出（カスタムカーソルを非表示）
• セマンティックな HTML 構造
• 高コントラストのデュオトーン

トークン効率

• スクリプトはコンテキストを読み込まずに実行（0 トークン）
• SVG テンプレートはコピー＆ペーストで使えるパターン
• ビルド手順不要の単一 HTML 出力
• テーマを簡単に設定できる CSS カスタムプロパティ