概要
文字グラデーションの色変化、流れる背景、マウス追従スポットライト、スクロール連動、回転ネオンボーダー、浮遊メッシュまで、CSSグラデーションの動かし方を6パターン一気に見せるショーケース。
使用技術
・GSAP + ScrollTrigger
・CSS カスタムプロパティ（`@property`不使用、GSAPで直接補間）
・linear/radial/conic-gradient、`background-clip: text`、`mix-blend-mode`
実装ポイント
・CSS変数 `–c1`/`–c2` をGSAPで `yoyo` 補間し、文字グラデの色を滑らかに往復
・流れる背景は `background-size: 300%` にして `backgroundPosition` をアニメーション
・マウス追従は `mousemove` 座標を `–x`/`–y` に流し込み `radial-gradient` の中心を移動
・スクロール連動は `scrub` で `–bg-y`（背景位置）をスクロール量に紐付け
・ネオンボーダーは `conic-gradient` の `–angle` を回転させ、滲み用と線用の2層構造で発光を表現
・メッシュは4つのblobを `filter: blur(100px)` + `mix-blend-mode: screen` で重ね、各blobを別々の周期で浮遊させる
コアスニペット
// CSS変数 --c1/--c2 を直接補間して文字グラデを往復させる
gsap.to(".demo-1-text", {
"--c1": "#ff0055",
"--c2": "#00ffaa",
duration: 1.5,
repeat: -1,
yoyo: true,
ease: "sine.inOut",
});
// マウス座標を --x/--y に流し込み radial-gradient の中心を移動
container.addEventListener("mousemove", (e) => {
const rect = container.getBoundingClientRect();
gsap.set(".demo-3-glow", {
"--x": `${e.clientX - rect.left}px`,
"--y": `${e.clientY - rect.top}px`,
});
});
```
```css
.demo-3-glow {
background: radial-gradient(
800px circle at var(--x, 50%) var(--y, 50%),
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.1) 40%,
transparent 60%
);
}