{"id":51445134,"url":"https://github.com/torifo/animation-line-draw","last_synced_at":"2026-07-05T15:30:40.576Z","repository":{"id":364705976,"uuid":"1250969631","full_name":"torifo/animation-line-draw","owner":"torifo","description":"Animation study — scroll-synced SVG line drawing. Stroke draws as you scroll (position-based); switchable shape gallery (polygon/star/spiral). Pure HTML/CSS/JS, no build.","archived":false,"fork":false,"pushed_at":"2026-06-14T05:09:29.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-14T07:09:33.406Z","etag":null,"topics":["animation","css","css-animation","design-study","github-pages","html","javascript","line-draw","svg","web-design"],"latest_commit_sha":null,"homepage":"https://torifo.github.io/animation-line-draw/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torifo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-27T06:03:12.000Z","updated_at":"2026-06-14T05:09:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/torifo/animation-line-draw","commit_stats":null,"previous_names":["torifo/animation-line-draw"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/torifo/animation-line-draw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-line-draw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-line-draw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-line-draw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-line-draw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torifo","download_url":"https://codeload.github.com/torifo/animation-line-draw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-line-draw/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35160046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","css-animation","design-study","github-pages","html","javascript","line-draw","svg","web-design"],"created_at":"2026-07-05T15:30:40.004Z","updated_at":"2026-07-05T15:30:40.570Z","avatar_url":"https://github.com/torifo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A·Sc · ライン描画スクロール\n\n\u003e スクロール進捗に同期して SVG のストロークが順に引かれていく演出。下へ巻くと描かれ、上へ戻すと逆再生で消える。進捗＝スクロール位置なので、途中で止めれば描きかけのまま留まる。図形はピッカーで切り替え可能（エンブレム / スター / キューブ / スパイラル / 同心円 / 六角 / 三角）。\n\n**Live demo**: `./index.html`\n\n## 概要\n\n| 項目 | 内容 |\n|---|---|\n| ジャンル | A · 幾何学・パターン |\n| 用途 | Sc · スクロール連動 |\n| 主な参考 | Apple（AirPods Pro 等の製品ページ）, Codrops |\n| 依存 | なし（Pure HTML + CSS + Vanilla JS） |\n| 推奨配置 | プロダクト紹介、ステップ解説、図解の段階的提示 |\n\n\n## スキルとして導入 / Install as a skill\n\nこのリポジトリは Claude Code / Codex CLI 共通の **`SKILL.md`**（オープン標準）を同梱しており、AI エージェントのスキルとして使えます。リポジトリ自体をスキルディレクトリへリンクするだけです。\n\nThis repo ships a cross-agent **`SKILL.md`** (open standard) usable by both Claude Code and Codex CLI. Just link the repo into the agent's skills directory.\n\n```bash\n# Claude Code\nln -s \"$(pwd)\" ~/.claude/skills/anim-line-draw\n# Codex CLI\nln -s \"$(pwd)\" ~/.codex/skills/anim-line-draw\n```\n\nエージェントを再起動すると `description` に基づき自動でマッチします（スキル名: `anim-line-draw`）。\nRestart the agent; it is matched automatically by the skill's `description` (skill name: `anim-line-draw`).\n\n## 仕組み（位置ベース）\n\n1. 各 `.ld-path` の全長を `getTotalLength()` で測り、`stroke-dasharray = 全長`、`stroke-dashoffset = 全長`（＝未描画）にする\n2. スクロールごとに進捗 `progress = -section.top / (section.height - viewport)` を 0〜1 で算出\n3. 要素を DOM の並び順に均等分割し、要素 `i` は区間 `[i/n, (i+1)/n]` で `dashoffset` を全長 → 0 へ。先頭の線から順に描かれる\n4. 上へ戻すと `progress` が下がり、`dashoffset` が戻る＝逆再生で消える\n\n\u003e wave-parallax（B·Sc）はスクロール「速度」ベースだったが、ライン描画は「どこまで描けたか＝スクロール位置」が本質なので**位置ベースが正しい**。両者は意図的に別方式。\n\n## 組み込み手順\n\n### 1. 2 ファイルをコピー\n\n`style.css` と `script.js` を移植先へ。外部依存ゼロ。\n\n### 2. マークアップ\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./line-draw.css\"\u003e\n\n\u003c!-- 背の高いセクション。この区間のスクロールで描かれる --\u003e\n\u003csection class=\"line-draw\" data-line-draw\u003e\n  \u003cdiv class=\"ld-sticky\"\u003e           \u003c!-- sticky で描画中ずっと画面中央に留まる --\u003e\n    \u003csvg class=\"ld-svg\" viewBox=\"0 0 800 600\" preserveAspectRatio=\"xMidYMid meet\"\u003e\n      \u003cpath   class=\"ld-path\" d=\"…\" /\u003e\n      \u003ccircle class=\"ld-path ld-accent\" cx=\"400\" cy=\"300\" r=\"96\" /\u003e\n    \u003c/svg\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\n\u003cscript src=\"./line-draw.js\"\u003e\u003c/script\u003e\n```\n\n- `.ld-path` は `path` でも `circle`/`line`/`polyline` でも可（`getTotalLength()` が使える要素）\n- DOM の並び順 = 描画順\n- `.ld-accent` を足すとアクセント色（`--ld-accent`）になる\n- セクションの高さ（`--ld-scroll`）が描画に使うスクロール量。長いほどゆっくり描かれる\n\n### 3. 図形を切り替える（ギャラリー型）\n\n`script.js` の `SHAPES` オブジェクトにエントリを足すだけで、ピッカー（`[data-ld-picker]`）にチップが自動生成される。値は SVG フラグメント文字列で、各要素に `class=\"ld-path\"` を付ける（`svg.innerHTML` は SVG 名前空間でパースされる）。\n\n```js\nconst SHAPES = {\n  'エンブレム': circle(400,300,230) + path('M400 60 L640 300 ...') + ...,\n  'スター':     path(star(400,300,230,92,5)) + circle(400,300,96,true),\n  // 追加例：\n  '五角':       path(polygon(400,300,230,5)),\n};\n```\n\n付属の生成ヘルパー（viewBox `0 0 800 600` 基準）：\n\n| ヘルパー | 生成するもの |\n|---|---|\n| `path(d, accent?)` | 任意の path |\n| `circle(cx, cy, r, accent?)` | 円 |\n| `polygon(cx, cy, r, sides, rot?)` | 正多角形 |\n| `star(cx, cy, R, r, points?, rot?)` | 星（外接 R / 内接 r） |\n| `spiral(cx, cy, turns, spacing, step?)` | アルキメデスのらせん |\n\n- ピッカーで切り替えると、**現在のスクロール進捗のまま** 新しい図形が再描画される（最初から見たいなら一度上へ戻す）\n- 図形ごとに要素数が違っても OK（並び順に進捗を均等分割）\n\n## カスタマイズ可能な CSS 変数\n\n| 変数 | 役割 | デフォルト |\n|---|---|---|\n| `--ld-stroke` | 線の色 | `#0a0a0a` |\n| `--ld-accent` | `.ld-accent` を付けた線の色 | `#ff2d55` |\n| `--ld-width` | 線の太さ | `2` |\n| `--ld-scroll` | 描画に使うスクロール区間（セクション高さ） | `260vh` |\n\n### よくある調整例\n\n```css\n/* ゆっくり丁寧に描く */\n.line-draw{ --ld-scroll:400vh; }\n\n/* 極細の製図線 */\n.line-draw{ --ld-width:1; --ld-stroke:#0066ff; }\n```\n\n## アクセシビリティ\n\n`prefers-reduced-motion: reduce` のとき、スクロール連動を行わず最初から全線を描画済みで静止表示する。\n\n## パフォーマンス\n\n- スクロール更新は `requestAnimationFrame` で 1 フレーム 1 回に間引き\n- `IntersectionObserver` でセクションが視野外のとき更新停止\n- 全長は userspace（viewBox）基準なので表示サイズが変わっても再測定不要\n\n## 制約 / 既知の挙動\n\n- `getTotalLength()` が使えない要素（`rect`/`text` 等）は非対応。`path` 等に変換して使う\n- 多数の長い path を同時に描く場合、`stroke-dashoffset` 更新コストに注意\n- 進捗は「セクション内のスクロール位置」に紐付くため、セクションが画面より低いと描き切れない。`--ld-scroll` は `100vh` より十分大きく\n\n## ライセンス\n\nANIMATION DESIGN STUDY の一部として公開（コピペ自由）。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-line-draw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorifo%2Fanimation-line-draw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-line-draw/lists"}