CSS 液体変形（グーイー）効果

機能

• ぼかしとコントラストを別々に調整 —— 両者の比率が輪郭の連続性を決めます
• 図形のサイズを調整可能（子要素が継承します）
• 移動時間を調整でき、橋の出現と切断を観察できます
• プレビューでは二つの円が近づいたり離れたりします
• 出力は容器と子要素の両方を含み、二つの前提も明記しています
• 容器は `filter`、子要素は `background: currentColor` —— 色の変更は一箇所で済みます
• `prefers-reduced-motion` の処理を自動で添付
• コードはハイライト付き、コピーはボタン一つ
• 計算はすべてブラウザー内で完結します

使い方

1. まずぼかし半径を調整：大きいほど橋は太くなりますが、図形自体もぼけます
2. 次にコントラスト：輪郭を押しつぶす硬さを決めます。低すぎると輪郭が破線状に切れます
3. サイズと移動時間を調整し、橋がいつ現れ、いつ切れるかを見ます
4. CSS をコピー。容器に `overflow: hidden` を付けないでください

よくある質問

容器に `overflow: hidden` を付けてはいけないのはなぜですか？

橋はまさに「はみ出した部分」だからです。 ぼかしが図形を外側へ広げ、高いコントラストがその広がりを濃い輪郭に押しつぶします —— 要素の間にある部分が橋です。`overflow: hidden` を付けると、はみ出した部分が切り取られ、橋は容器の境界で断ち切られ、二つの塊を無理に切り分けたように見えます。この効果が失敗する最も多い原因で、症状は明白です —— 全体が「四角くなる」のです。

子要素が濃い単色でなければならないのはなぜですか？

輪郭はぼかしが残した明度差を押しつぶして作られるからです。半透明や淡い色は、ぼかしたときに隣接領域との明度差がそもそも小さく、コントラストで増幅すると押しつぶした輪郭が途切れて点線やノイズのようになります。濃く彩度の高い単色はぼかした後も明瞭な明度勾配を保つため、輪郭が連続します。配布コードが `background: currentColor` を使うのは、子要素が単色を継承できるようにするためです。

この効果に性能コストはありますか？

あります。しかも小さくありません。 容器の `filter` は、ブラウザーが容器全体（子要素を含む）をオフスクリーンのレイヤーに描画し、ぼかしとコントラストをかけてから合成し直すことを意味します —— 子要素が動けばそのレイヤー全体がやり直されます。したがって、広い面積や子要素の多い容器には使わない、容器自体をスクロールさせない、内部に複雑な内容を置かないでください。小さくまとまった要素の組に向きます。

文字にも使えますか？

使えますが、文字もぼかされてから押しつぶされるため、線は太り、細部は失われ、細い文字は団子になります。大きく太い見出しに限り、コントラストは図形より低めにしてください（でないと線がくっつきます）。また、文字は子要素の中に置く必要があります（容器自体に文字を入れると、容器が押しつぶされます）。