View Transitions API がおもしろい
2026-06-27
ページ遷移のときに背景の水玉がふわっと分裂して移動するアニメーション、実はほとんど CSS だけで実現しています。同じ view-transition-name を複数ページで揃えるだけで、ブラウザが勝手にいい感じの補間をしてくれるのが面白くて最近ずっと触っています。
#CSS
ブロブアニメーションの作り方
2026-06-20
border-radius を4つの値でランダムっぽく変化させ続けると、あの「ぷにょぷにょした水玉」が作れます。回転とスケールも一緒に animate すると、より有機的な動きになって水飴っぽさが増しました。
goo フィルターでカーソルをとろとろにする
2026-06-05
SVG の feGaussianBlur と feColorMatrix を組み合わせると、複数の丸がくっついて溶け合うような表現ができます。カーソルに追従する水滴っぽいエフェクトはこれで作りました。タッチデバイスではカーソルという概念自体がないので、pointer: fine のときだけ出すようにしています。
水飴色のグラデーションの作り方
2026-04-18
サイト全体で使っている水色のグラデーションは linear-gradient(135deg, #c2eeff, #7ed4f5 60%, #aee9ff) というシンプルな指定です。中間色の位置を少しずらすだけで、単調にならずに奥行きのある水色になります。