ショーケース5本＋沖縄デモ6本で実装した演出を、再利用可能な独立部品として動作仕様化したもの。各パーツは「入力(トリガー) → 数値パラメータ → 出力(動き)」で定義され、単独で任意のLPへ移植できる。英語圏2026アワード系の主流技法(kinetic type / immersive 3D・micro-interactions)をベースに構成。
| ID | 名称 | 効果 | 入力/トリガー | 動作仕様(実装値) | フォールバック | 実装例 |
|---|---|---|---|---|---|---|
| SC-01 | 慣性レイヤリング | 複数要素が同じスクロールに別の遅延で追従し「各自が生きている」感を作る(全デモの土台) | scroll | 要素ごとにscrub: 0.4〜2.6を割当。軽い物=小さく(即応)、重い物=大きく(遅行)。3値以上混在させる | reduced-motion時は最終状態で静止 | 全11本 |
| SC-02 | ピン+シーン進行 | セクション固定中にスクロール量だけで演出が進む | scroll | track高=シーン尺(100vh=約1秒感覚)。終盤トリガーは要素高の85%以内に置く(超えるとピン解除後に発火する) | pin解除・縦積み表示 | 全デモ |
| SC-03 | カウンタ連動 | 数値がスクロールに同期して増減(深度計/時刻/年数) | scroll | ダミーobjをgsap.to({v:a},{v:b,scrub:.7-.8})、onUpdateでtextContent書換。easingで終端を減速可 | 最終値を静的表示 | marine/wedding/awamori/s3 |
| SC-04 | クリップワイプ | 画像がスクロールで「注がれる/現像される」方向性のある出現 | scroll | clip-path: inset()を0%へscrub。方向=意味(注ぎ=上から、だし=左から) | clip無しで表示 | soba/awamori/s5 |
| SC-05 | 横スクロール変換 | 縦スクロールを横移動に変換しカード列を走査 | scroll | track高=横幅超過分+100vh。x: -(scrollWidth-innerWidth)をscrub:.7。カードは個別にskew戻し(scrub 1〜2) | 折返しグリッド | s5 |
| ID | 名称 | 効果 | 入力/トリガー | 動作仕様(実装値) | フォールバック | 実装例 |
|---|---|---|---|---|---|---|
| KT-01 | 速度反応タイポ | スクロールの速さで見出しが歪む(速く回すほど暴れる) | scroll velocity | v=getVelocity()/-2800→skewY(クランプ±14deg)・字ごとにsin(i)×vのY揺れ。減衰lerp .12 | 変形なし | s1 |
| KT-02 | 文字散乱/集合 | グリフ単位で四方から飛来し文を組む(逆再生で霧散) | scroll(pin内) | 各charに極座標の初期位置(半径0.55〜1.4画面)+回転±80deg。開始をi×2%でずらしscrub 0.6〜2.0 | 静的表示 | s1/wedding |
| TX-01 | テキストスクランブル | 記号がランダム明滅→1文字ずつ確定(デコード演出) | hover/enter | 40ms間隔、確定は先頭から1文字/frame。グリフ集合█▓▒<>/*#%0-9 | 即時表示 | s1 |
| MQ-01 | 速度連動マーキー | 無限流れ帯がスクロールで加速・逆行 | 常時+velocity | 基本90px/s、+|v|/900×160px/s(上限6倍)。半幅でループ接合 | 静止テキスト | s1 |
| CT-01 | オドメーター | 桁別ドラムが別々に回転して数値が確定する | enter viewport | 0-9ストリップ×3周+確定桁。duration 1.6+桁×0.35s・power3.inOut(下位桁ほど長回し) | 最終値表示 | s5 |
| ID | 名称 | 効果 | 入力/トリガー | 動作仕様(実装値) | フォールバック | 実装例 |
|---|---|---|---|---|---|---|
| CU-01 | マグネティックUI | ボタンがカーソルに吸い寄る→離すとバネで復帰 | pointermove | 半径140-190px内でΔ×0.38-0.45追従(.4s power2.out)。復帰=elastic.out(1,.35-.4) | hover色変化のみ | s1/s2 |
| CU-02 | 遅行ブロブカーソル | 液滴カーソル。複数粒が別係数で遅れて尾を引く | pointermove | 粒3つをlerp係数.30/.16/.08で連鎖追従、SVG gooフィルタで融合。リンク上で径3.5倍 | OS標準カーソル(cursor:auto) | s1/s2 |
| TR-01 | 画像トレイル | マウス軌跡に画像が湧いて消える | pointermove | 48px移動ごとに1枚スポーン。in=scale.3→1(.25s)、out=浮上+回転+fade(.7s, delay.22)。同時上限14枚 | 非表示 | s5 |
| Z3-02 | ポインタパララックス | マウス位置で3D世界全体が傾く | pointermove | rotateY±6deg/rotateX±5deg、lerp .07。カメラZと合成 | 傾き無し | s3 |
| ID | 名称 | 効果 | 入力/トリガー | 動作仕様(実装値) | フォールバック | 実装例 |
|---|---|---|---|---|---|---|
| Z3-01 | 3Dカメラドリー | スクロール=前進。カードが奥から手前へ流れ去る | scroll | worldをtranslateZ 0→4600px(scrub.8)。perspective 900px。要素は-600〜-4200pxに配置 | 縦積みカード | s3 |
| Z3-03 | 深度フォグ | カメラ距離に応じて要素が霞む/ぼける | Z3-01連動 | 相対Z→opacity(通過後0/接近1/遠方減衰2400px)+blur (|z|-500)/700 px | opacity固定 | s3 |
| GL-01 | シェーダー歪み平面 | 画像がWebGL上で波打つ液体になる | scroll velocity | three.js平面(32分割)。頂点=sin(uv.x·π)×v×26pxのたわみ、フラグメント=2重sin波のUVずらし | 通常のimg表示 | s4 |
| GL-02 | RGBシフト | 速く回すと色収差(赤青ズレ)が出る | scroll velocity | shift=0.012×vをR/Bチャネルの逆方向UVオフセットに | —(GL-01と一体) | s4 |
| GL-03 | 速度ユニフォーム | スクロール速度をGLSLに渡す共通配線 | scroll | v=velocity/1600クランプ±2.2・減衰lerp .09。静止時は自然に0へ | v=0固定 | s4 |
| GO-01 | グーイークラスタ | 1つの液体が複数ブロブに分裂→再融合 | scroll(pin内) | SVGフィルタblur9+colorMatrix(22,-10)内で各ブロブを別ベクトル・scrub 0.7〜2.2で射出。融合時に一拍(scale1.18 yoyo) | 静的な円組成 | s2 |
| BG-01 | メッシュグラデ背景 | 巨大な色玉4つが漂い背景が生きている | 常時 | blur60pxの円をsine 22-31s(全て素数的にずらす)でyoyo漂動 | 静的グラデ | s2 |
| PL-01 | パーティクル層 | 泡/花びら/塵/飛沫/星が世界に生命感を足す | 常時(+scroll) | DOM粒16-70個・2層(手前=大きく速く/奥=小さく遅く)・位相を負のdelayで分散。CSS無限アニメ、キャプチャ時はGSAP化 | 非表示 | marine/wedding/awamori/shisa/s3 |
| CM-01 | first/lastモーフ | 同一構図の2枚(白黒⇄カラー等)をスクロールで遷移 | scroll | 位置合わせ済みペアのクロスフェード±ズーム。AI画像は参照生成で構図を固定 | カット切替 | minpaku/wedding |
| RV-01 | クリップリベール見出し | 見出しが現像するように左から現れる | enter+scrub | inset(0 100% 0 0)→0をtop85%→35%でscrub。背景アウトライン文字は逆方向パララックス(scrub1.6) | 通常表示 | s5 |
prefers-reduced-motionフォールバック必須・?capture=1フックで映像書き出し対応