EDITION · 03 / 24
The objects
before
the brief.
マウス位置に応じてカードが 3D で傾き、表面のホログラム反射が滑らかに移動する。架空のソロデザインスタジオ Studio HALO の作品キュレーションサイトとして組み込んだ実用デモ。タッチデバイスではティルトを無効にし、静的なカード一覧として動作する。
Studio HALO
graphic design · Tokyo / Berlin
EDITION · 09 / 24
EDITION · 12 / 24
EDITION · 16 / 24
EDITION · 21 / 24
EDITION · 23 / 24
使い方
— USAGE↑ 想定：ポートフォリオ／コレクション／プロダクトカタログ／ローンチ予定リスト。カード型 UI に 奥行きと光沢を与えるだけで、平面が「現物」のように見えてくる。マウス・タッチでない情報伝達手段としても効く。
01
2 ファイルをコピー
style.css の /* ─── COMPONENT ─── */ ブロックと、script.js の IIFE 全体を移植先へ。外部依存ゼロ。
02
data-tilt で宣言
各カードに data-tilt を付けるだけで自動初期化。data-tilt-max（最大傾き°、既定 14）、data-tilt-perspective（既定 900）、data-tilt-scale（hover 時の拡大、既定 1.04）でリズム調整。
03
ホログラム層を 2 枚
カード内に [data-tilt-gloss]（conic-gradient のホログラム）と [data-tilt-shine]（光帯）を入れると、傾きに応じて background-position が移動して光が動く。
カスタマイズ可能な属性
data-tilt-max最大傾き角（°）14data-tilt-perspective奥行き（px）900data-tilt-scalehover 時のスケール倍率1.04data-tilt-ease追従の ease 係数（大きいほどスナップ）0.14アクセシビリティ
prefers-reduced-motion: reduce時はティルトを無効化し、静的なカードとして表示。pointer: coarse（タッチ端末）でもティルトを無効化し、誤動作を避ける。- 装飾ビジュアル要素は
aria-hidden。本文（タイトル / dl）は通常のセマンティクス。