Visionページにおいて、「デジタルデータとアナログな手触りの境界」というコンセプト（Primitive Spectrum）を視覚化するため、初期段階では背景に微細な「ノイズ（ざらつき）」を実装しようと試みた。しかし、ここでの技術選定の誤りが、無駄な工数とパフォーマンスの低下を招く結果となった。
最初の試行では、JavaScriptのCanvas API（WebGL）を用いた動的なノイズ生成アプローチを採用した。useRef でキャンバス要素を取得し、requestAnimationFrame を回してピクセル単位でランダムな数値を生成、毎フレーム描画を更新するという手法だ。Next.jsのReactコンポーネント内にこのロジックを組み込み、コンポーネントのマウント時にのみクライアントサイドで実行されるようライフサイクルを調整した。
しかし、このアプローチは完全にオーバースペックな「技術的オーバーキル」だった。第一に、文字を読ませるための静的なページであるにもかかわらず、背景のノイズ描画が継続的にデバイスのリソースを消費し続けた。モバイル端末での検証ではバッテリー消費の懸念が生じ、スクロール時のフレームレートにも微小な悪影響が見られた。
ノイズの粒度やフレームの更新頻度（FPS）を意図的に落とすスロットリング処理の追加、さらにはReactの再レンダリングを防ぐための React.memo や useMemo の過剰な配置など、丸二日を費やしてパフォーマンスチューニングのコードを継ぎ足していった。だが、そこまで手間をかけて出力された画面のノイズは「過剰にデジタル的な砂嵐」の域を出ず、本来意図していたネオレトロな静謐さからは程遠いものだった。手段（Canvasの制御）が目的化し、UI/UXの本質を見失っていた状態だ。
結局、苦労して書いたCanvas制御のロジックはすべて破棄した。最終的な解決策は、JavaScriptを1行も使わない「静的なSVGフィルター」と「CSS」への回帰である。
具体的には、<filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter> というSVGを定義し、それをTailwind CSSのクラスやインラインスタイルから mix-blend-mode と低い opacity で背景色に重ね合わせただけだ。これだけで、ブラウザのネイティブなレンダリングエンジンによって、完璧にノイズが表現された。パフォーマンスの懸念はゼロになり、コードの記述量も劇的に削減された。
視覚的な「ざらつき」やアナログ感を表現するのに、毎秒計算される乱数は必要なかったのだ。複雑なロジックや高度なAPI（WebGLなど）を使える環境にあるからといって、安易にそれを採用してはならない。実装が複雑化してきた時は、機能要件そのものを疑い、「静的なHTML/CSSで代替できないか」と立ち止まるフェーズを設計プロセスに組み込むべきである。無駄に消費した時間とコードは、その原則を再確認するための遠回りになった。