概要
水面のゆらぎ・グリッチ・グーイー・ホログラムなど、SVGフィルターを使った12種の質感エフェクト集。画像やテキストに映像的な加工を加えたいとき向き。
使用技術
・GSAP（フィルターの属性値をトゥイーン）
・SVGフィルタープリミティブ（feTurbulence / feDisplacementMap / feGaussianBlur / feColorMatrix / feMorphology / feSpecularLighting ほか）
実装ポイント
・`<defs>` にフィルターを定義し、CSSの `filter:url(#id)` で各要素へ適用。GSAPは `attr:{…}` でフィルターのパラメータ自体をアニメーション
・水面・グリッチ・リキッド・ワープは `feTurbulence` のノイズを `feDisplacementMap` の `scale`/`baseFrequency`/`seed` で揺らして歪みを生成
・グーイー（07）は `feGaussianBlur` + `feColorMatrix`（アルファのコントラストを強調）でメタボール状に融合
・Morphology（08/11）は `feMorphology` の `operator:dilate/erode` と `radius` で文字の肥大・侵食を表現
・3Dライティング（12）は `feSpecularLighting` + `fePointLight` を使い、`mousemove` で光源の `x`/`y`/`z` を追従させて金属光沢を演出
コアスニペット
<!-- defsでノイズ(feTurbulence)を生成しfeDisplacementMapで歪める -->
<filter id="water-filter">
<feTurbulence id="water-turbulence" type="fractalNoise"
baseFrequency="0.02 0.05" numOctaves="1" result="noise" />
<feDisplacementMap id="water-displacement" in="SourceGraphic" in2="noise" scale="30" />
</filter>// GSAPはフィルターのパラメータ(baseFrequency)自体をattrでトゥイーン
gsap.to("#water-turbulence", {
duration: 4, attr: { baseFrequency: "0.02 0.15" },
repeat: -1, yoyo: true, ease: "sine.inOut",
});