{"id":51445136,"url":"https://github.com/torifo/animation-fluid-mask","last_synced_at":"2026-07-05T15:30:40.229Z","repository":{"id":364705956,"uuid":"1251045683","full_name":"torifo/animation-fluid-mask","owner":"torifo","description":"Animation study — fluid mask gallery transition. Wavy liquid curtain covers/swaps/reveals; per-work effects (sand ripples, backlit field, particles, skyline). Pure HTML/CSS/JS, no WebGL.","archived":false,"fork":false,"pushed_at":"2026-06-14T05:09:20.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-14T07:09:29.967Z","etag":null,"topics":["animation","css","css-animation","design-study","github-pages","html","javascript","page-transition","svg","web-design"],"latest_commit_sha":null,"homepage":"https://torifo.github.io/animation-fluid-mask/","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-27T07:40:04.000Z","updated_at":"2026-06-14T05:09:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/torifo/animation-fluid-mask","commit_stats":null,"previous_names":["torifo/animation-fluid-mask"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/torifo/animation-fluid-mask","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-fluid-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-fluid-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-fluid-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-fluid-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torifo","download_url":"https://codeload.github.com/torifo/animation-fluid-mask/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-fluid-mask/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","page-transition","svg","web-design"],"created_at":"2026-07-05T15:30:40.014Z","updated_at":"2026-07-05T15:30:40.215Z","avatar_url":"https://github.com/torifo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# B·Tr · 流体マスク遷移\n\n\u003e 波打つ液体カーテンが下から立ち上がって画面を覆い、覆い切った裏で作品を差し替え、引いて新作品が現れるギャラリー遷移。覆う色は次作品の色で、新しい色が流れ込んで沈静化するよう見える。カーテン通過後にキャプション（作品名・カテゴリ・年・説明）が立ち上がり、サムネイルで直接ジャンプもできる。WebGL なし。\n\n\u003e デモは架空フォトグラファー/スタジオの作品ギャラリー（Tidal Drift / Ember Fields / Moss Protocol / Noct Suite）として実装。ケーススタディや写真シリーズの閲覧に使える実用構成。\n\n**Live demo**: `./index.html`\n\n## 概要\n\n| 項目 | 内容 |\n|---|---|\n| ジャンル | B · 流体・有機 |\n| 用途 | Tr · ページ遷移 |\n| 主な参考 | Resn.co, Codrops（Gallery Transitions） |\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-fluid-mask\n# Codex CLI\nln -s \"$(pwd)\" ~/.codex/skills/anim-fluid-mask\n```\n\nエージェントを再起動すると `description` に基づき自動でマッチします（スキル名: `anim-fluid-mask`）。\nRestart the agent; it is matched automatically by the skill's `description` (skill name: `anim-fluid-mask`).\n\n## 仕組み\n\n1. 液体カーテンは塗りつぶした SVG `\u003cpath\u003e` 1 本。上端は 2 つの正弦波を重ねた波形で、揺らぎ `t` を進めて常に波打つ\n2. パラメータ `p`（0＝画面下に隠れる / 1＝完全に覆う）で上端の高さを制御：`edge = (1-p)*(H+3*AMP) - AMP`。`p=1` で波の山が y=0 以下＝全面被覆、`p=0` で谷が H 以下＝完全に隠れる\n3. **覆う**：`p` を 0→1（`easeInOut`、`COVER`ms）。覆い色は次パネルの `--c`\n4. 覆い切った瞬間に `.fm-panel` の `is-active` を差し替え\n5. **引く**：`p` を 1→0（`REVEAL`ms）。波打つカーテンが下へ引き、新パネルが現れる\n6. **キャプション立ち上げ**：引き終わりに active パネルへ `.is-revealed` を付与 → `.fm-cap` の各行が staggered でフェード/スライドイン\n7. **サムネイル / カウンター**：`.fm-thumb`（色スウォッチ + 作品名）を JS が自動生成。現在地をハイライトし `01 / 04` を更新\n\n塗り path のモーフィングだけで、マスク/フィルタの相互運用問題を避けて流体表現を出す。背景は CSS グラデーション + パターンの「アート」レイヤー（`.fm-art`）で、外部画像なしに作品らしい面を作る。\n\n## 組み込み手順\n\n### 1. 2 ファイルをコピー\n\n`style.css` / `script.js` を移植先へ。外部依存ゼロ、WebGL なし。\n\n### 2. マークアップ\n\n```html\n\u003cdiv class=\"fluid\" data-fluid-mask\u003e\n  \u003cdiv class=\"fm-stage\" data-fm-stage\u003e\n    \u003csection class=\"fm-panel is-active\" data-fm-name=\"TIDE\" style=\"--c:#0066ff\"\u003e…\u003c/section\u003e\n    \u003csection class=\"fm-panel\"           data-fm-name=\"EMBER\" style=\"--c:#ff2d55\"\u003e…\u003c/section\u003e\n    …\n    \u003csvg class=\"fm-veil\" data-fm-veil viewBox=\"0 0 1000 600\" preserveAspectRatio=\"none\" aria-hidden=\"true\"\u003e\n      \u003cpath data-fm-path d=\"\"/\u003e\n    \u003c/svg\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"fm-ui\"\u003e\n    \u003cbutton class=\"fm-btn\" data-fm-prev aria-label=\"前\"\u003e←\u003c/button\u003e\n    \u003cdiv class=\"fm-dots\" data-fm-dots\u003e\u003c/div\u003e\n    \u003cbutton class=\"fm-btn\" data-fm-next aria-label=\"次\"\u003e→\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cscript src=\"./fluid-mask.js\"\u003e\u003c/script\u003e\n```\n\n- パネルは任意枚数。`--c` が覆い色＝パネル背景色\n- `data-fm-name` は将来ラベル等に流用可\n- 操作：`← / →` キー（ステージが視野内）、prev/next、ドット（自動生成）。端は wrap\n\n## カスタマイズ\n\n### CSS 変数\n\n| 変数 | 役割 | デフォルト |\n|---|---|---|\n| `--fm-stage-h` | ステージ高さ | `min(78vh,620px)` |\n\n### JS 定数（`script.js` 冒頭）\n\n| 定数 | 役割 | デフォルト |\n|---|---|---|\n| `COVER` / `REVEAL` | 覆う / 引く 各フェーズの時間(ms) | `640` / `640` |\n| `AMP` | 波の振幅（viewBox 600 基準） | `46` |\n| `WOBBLE` | 縁の揺らぎ速度 | `0.18` |\n\n```js\n// 振幅を上げて荒い波に\nconst AMP = 80;\n// ゆっくり大きくうねらせる\nconst WOBBLE = 0.32;\n```\n\n## アクセシビリティ\n\n`prefers-reduced-motion: reduce` のとき、液体カーテンを動かさずパネルを即時切替する。\n\n## 制約 / 既知の挙動\n\n- 遷移中は `busy` でロック（`COVER + REVEAL`）\n- `viewBox` は `0 0 1000 600` 固定（`preserveAspectRatio=\"none\"` でステージに引き伸ばし）。`AMP` はこの 600 系基準\n- 全パネルは DOM 常駐。非アクティブは `display:none`\n\n## ライセンス\n\nANIMATION DESIGN STUDY の一部として公開（コピペ自由）。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-fluid-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorifo%2Fanimation-fluid-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-fluid-mask/lists"}