{"id":51445135,"url":"https://github.com/torifo/animation-tilt-card","last_synced_at":"2026-07-05T15:30:40.216Z","repository":{"id":364705982,"uuid":"1253082434","full_name":"torifo/animation-tilt-card","owner":"torifo","description":"Animation study — 3D tilt card with cursor-driven rotateX/Y and synchronized holographic conic gloss + linear shine streak. Built into a fictional design studio Studio HALO portfolio (6 works, identity/motion/book/restaurant/magazine/packaging). Pure HTML/CSS/JS.","archived":false,"fork":false,"pushed_at":"2026-06-14T05:09:37.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-14T07:09:34.111Z","etag":null,"topics":["3d-transform","animation","css","css-animation","design-study","github-pages","hover-effect","html","javascript","web-design"],"latest_commit_sha":null,"homepage":"https://torifo.github.io/animation-tilt-card/","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-29T06:20:37.000Z","updated_at":"2026-06-14T05:09:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/torifo/animation-tilt-card","commit_stats":null,"previous_names":["torifo/animation-tilt-card"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/torifo/animation-tilt-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-tilt-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-tilt-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-tilt-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-tilt-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torifo","download_url":"https://codeload.github.com/torifo/animation-tilt-card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-tilt-card/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":["3d-transform","animation","css","css-animation","design-study","github-pages","hover-effect","html","javascript","web-design"],"created_at":"2026-07-05T15:30:40.006Z","updated_at":"2026-07-05T15:30:40.191Z","avatar_url":"https://github.com/torifo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D·Ho · 3D ティルトカード\n\n\u003e マウス位置に応じてカードが 3D で傾き、表面のホログラム反射（conic gradient）と光帯（linear gradient）が滑らかに移動する。架空のソロデザインスタジオ **Studio HALO** の作品キュレーションサイトとして組み込んだ実用デモ。\n\n**Live demo**: `./index.html`\n\n## 概要\n\n| 項目 | 内容 |\n|---|---|\n| ジャンル | D · 3D / 空間 |\n| 用途 | Ho · ホバー |\n| 主な参考 | vanilla-tilt, Tobias Reich |\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-tilt-card\n# Codex CLI\nln -s \"$(pwd)\" ~/.codex/skills/anim-tilt-card\n```\n\nエージェントを再起動すると `description` に基づき自動でマッチします（スキル名: `anim-tilt-card`）。\nRestart the agent; it is matched automatically by the skill's `description` (skill name: `anim-tilt-card`).\n\n## 仕組み\n\n各 `[data-tilt]` カードの上で `pointermove` を拾い、カード中心からのオフセット (-1..1) を計算。それを `rotateX` / `rotateY` の目標値とし、`requestAnimationFrame` で `cur += (target - cur) * ease` の指数アプローチで滑らかに追従する。\n\nカード表面の 2 つのレイヤーが傾きに同期して動く：\n\n- **`[data-tilt-gloss]`** — `conic-gradient` で 6 色のホログラム。中心 (`--gx` / `--gy`) と開始角 (`--gloss-angle`) を tilt 量に応じて移動。`mix-blend-mode: overlay`\n- **`[data-tilt-shine]`** — 細い `linear-gradient` の光帯。`background-position` を tilt の逆方向に動かして「光源が固定されている」感を出す。`mix-blend-mode: screen`\n\nカーソルが離れると目標値が 0 に戻り、ease で復帰する。完全に静止した時点で `transform: ''` を消して GPU 合成も外す。\n\n## 組み込み手順\n\n### 1. 2 ファイルをコピー\n\n`style.css` の `/* ─── COMPONENT ─── */` ブロック（`.tilt-card` / `.tc-*` / `.halo*`）と、`script.js` の IIFE 全体を移植先へ。外部依存ゼロ。\n\n### 2. マークアップ\n\n```html\n\u003carticle class=\"tilt-card\" data-tilt\u003e\n  \u003cdiv class=\"tc-inner\"\u003e\n    \u003cdiv class=\"tc-vis\"\u003e \u003c!-- 上半分のビジュアル --\u003e \u003c/div\u003e\n    \u003cdiv class=\"tc-meta\"\u003e\n      \u003cspan class=\"tc-no\"\u003eWORK · 03\u003c/span\u003e\n      \u003ch3 class=\"tc-title\"\u003eTide \u003cem\u003eidentity\u003c/em\u003e\u003c/h3\u003e\n      \u003cdl class=\"tc-spec\"\u003e \u003c!-- メタ情報 --\u003e \u003c/dl\u003e\n    \u003c/div\u003e\n    \u003cspan class=\"tc-edition\"\u003eEDITION · 03 / 24\u003c/span\u003e\n    \u003cdiv class=\"tc-gloss\" data-tilt-gloss aria-hidden=\"true\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"tc-shine\" data-tilt-shine aria-hidden=\"true\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n```\n\n## カスタマイズ可能な属性\n\n| データ属性 | 役割 | デフォルト | 範囲 |\n|---|---|---|---|\n| `data-tilt-max` | 最大傾き角（°） | `14` | 0–40 |\n| `data-tilt-perspective` | 奥行き（px） | `900` | 200–3000 |\n| `data-tilt-scale` | hover 時のスケール倍率 | `1.04` | 1–1.2 |\n| `data-tilt-ease` | 追従の ease 係数（大きいほどスナップ） | `0.14` | 0.04–0.5 |\n\n### よくある調整例\n\n```html\n\u003c!-- 控えめに傾く --\u003e\n\u003carticle class=\"tilt-card\" data-tilt data-tilt-max=\"6\" data-tilt-scale=\"1.02\"\u003e\u003c/article\u003e\n\n\u003c!-- 速くスナップ --\u003e\n\u003carticle class=\"tilt-card\" data-tilt data-tilt-ease=\"0.32\"\u003e\u003c/article\u003e\n\n\u003c!-- 奥行きを強める --\u003e\n\u003carticle class=\"tilt-card\" data-tilt data-tilt-perspective=\"600\"\u003e\u003c/article\u003e\n```\n\n## アクセシビリティ\n\n- `prefers-reduced-motion: reduce` 時はスクリプトを起動せず、CSS 側でも `transform: none` で静的なカードとして表示。\n- `pointer: coarse`（タッチ端末）でも自動的に無効化（誤動作防止）。\n- 装飾ビジュアル要素は `aria-hidden`。本文（タイトル / dl）は通常のセマンティクス（h3 / dl）。\n\n## 制約 / 既知の挙動\n\n- カードの境界をまたぐ pointer 移動が頻発する環境（並べた grid）では、enter/leave が短時間に切り替わる。ease 補間で見た目は滑らかだが、CPU 負荷が増える場合は `--tilt-ease` を上げてフレーム回数を減らす。\n- 完全に静止すると `transform: ''` でクリアし、GPU 合成も外している（メモリ節約）。\n- `pointer: fine` 判定は初期化時のみ。途中でデバイス入力が変わる SLI/dock 環境では再読込が必要。\n\n## 変更履歴\n\n- **v0.1** — 初版。6 作品の作風別 CSS visual、conic gradient gloss + linear shine、pointermove → ease 補間。\n\n## ライセンス\n\nANIMATION DESIGN STUDY の一部として公開（コピペ自由）。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-tilt-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorifo%2Fanimation-tilt-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-tilt-card/lists"}