Border BeamとLiquid GooeyでReactインターフェースに命を吹き込む
デザイナーはモックアップに小さなビジュアルアクセントを加えるのが好きです。時には料金カードの枠を滑らかに移動するネオンビームが必要だったり、ボタン同士がくっついて水銀の滴のように伸び縮みする必要があったりします。フロントエンド開発者がそのようなコンセプトを見ると、最初に考えることは大概同じです。「またか」と。カスタムSVGフィルターを書いたり、カラー合成マトリックスを弄ったり、1つのディテールのために重いCSSアニメーションを設定したり。
Jakub Antalíkはこの種のエフェクトをコンパクトなReactライブラリにパッケージ化することにしました。「Libraries」という名称のモノレポで、2つのすぐに使えるツールをまとめています：border-beamとliquid-gooeyです。どちらも不要な依存関係でプロジェクトを肥大化させることなく、1つの問題を正確に解決します。
リポジトリの中身
このリポジトリには2つの独立したnpmパッケージが含まれており、それぞれにインタラクティブなデモページがあります：
border-beam— 任意のブロックやカードの周囲を滑らかにスライドするアニメーション光のビークル。デモはbeam.jakubantalik.coinで公開されています。liquid-gooey— 粘性液体とモーフィングの物理エフェクト（いわゆるグーイーエフェクト）で、要素が移動しながら結合・分離します。デモはgooey. jakubantalik.comで公開されています。
両方のパッケージは個別にインストールできるため、テーブルのハイライトだけが必要であれば、不要なコードをバンドルに含める必要はありません。
Border Beamの仕組み
ボーダーランニングビームは、最新のSaaSサービスウェブサイトでよく見られます。通常、プレミアム料金ブロックや登録時のメール入力フィールドに設置されます。
パッケージのインストールは標準的な方法です：
npm install border-beam
内部的には、コンポーネントはアニメーショングラデーションレイヤーをレンダリングし、親コンテナの形状にクリップされます。角の丸みの座標を手動で計算したり、requestAnimationFrameでオフセットを計算したりする必要はありません。コンポーネントは速度、ビームサイズ、色、遅延のパラメータを受け取り、既存のレイアウトの上にすっきりと配置されます。
液体エレメントエフェクトの操作
グーイーエフェクトは、ブラー（feGaussianBlur）とコントラストカラー行列（feColorMatrix）の組み合わせで構築されています。生の状態では、ReactでこれらのSVGフィルターを設定するのは不便です。クロスブラウザ互換性の処理、再描画の最適化、正しいフィルターIDの受け渡しが必要です。
liquid-gooeyライブラリがこのようなルーティンを代わりに処理してくれます：
npm install liquid-gooey
要素のマージとフローエフェクトを作成するための готовые コンポーネントを提供します。変わったタブスイッチャー、インタラクティブなカーソル、フローティングアクションメニューを構築している場合、コンポーネントは標準的なブロックの動きをシームレスな粘性アニメーションに変換します。
便利なモノレポ構成
コンポーネント自体以外にも、リポジトリのアーキテクチャは見る価値があります。Jakubはnpm workspacesを使用し、2つのディレクトリに分割しています：ライブラリ用のpackages/と、デモショーケース用のsites/です。
packages/ опубликованные библиотеки (по папке на npm-пакет)
sites/ демо-сайты для каждой библиотеки
便利なワークフローが設定されています。デモサイトはdistのコンパイル済みバンドルを参照せず、TypeScriptのライブラリソースコードを直接エイリアス経由で参照します。著者がコンポーネントを編集すると事前の再ビルドなしで、ホットリロード経由でショーケースがリアルタイムで更新されます。
ローカルの起動はシンプルにできます：
npm install
# Запуск витрины для луча
npm run dev -w @sites/beam
# Запуск витрины для liquid-эффектов
npm run dev -w @sites/gooey
デプロイメントには2つの別のパイプラインが設定されています。CNAMEが添付されたGitHub Pagesでホストされているborder-beamショーケースと、Cloudflare Pagesで自動的にビルドされるliquid-gooeyです。npmへのパブリッシングは、GitHubのリリースタグによってトリガーされる別のワークフローを通じて行われます。
これらのコンポーネントを使用する意義
ビジュアルエフェクトは節度を持って使用するのが効果的です。ダッシュボードのすべてのカードをランニングビームで囲むと、インターフェースはクリスマスガーランドになってしまいます。しかし、これらのライブラリが大いに時間を節約できるシナリオもあります：
- ランディングページとプロモサイト。メインのコールトゥアクションや推奨サブスクリプションプランカードをハイライト表示。
- オンボーディング。要求されるステップや入力フィールドをソフトにハイライトしてユーザーの注意を引く。
- マイクロインターフェース。標準的なスムーズアニメーションでは物足りない、変わったタブ、アコーディオンメニュー、モードスイッチなど。
唯一のニュアンスは覚えておいてください：ブラーを伴うSVGフィルターはGPUに負荷をかけます。数百行の重いリストにはliquid-gooeyは適していませんが、コンパクトなコントロールエレメントには最適です。
ここで紹介したのは、よく繰り返されるデザインパターンを整ったReactコンポーネントにパッケージ化する実践的な例です。READMEのドキュメントはまだ簡潔ですが демо ページは機能の可能性を完全に把握できます。新しいプロモサイトを構築している場合や、慣れ親しんだフォームにインタラクティブ性を加えたい場合は、border-beamとliquid-gooeyは必ずブックマークする価値があります。
関連プロジェクト