ポインターの動きに反応する19種類の等角図形アニメーションを提供するReact/DOM用のTypeScriptライブラリです。

hairlineは、ポインターの位置や速度に応じて形が変わる19種類の等角図形コンポーネントを、Webページに組み込むためのライブラリです。npm i @lucasmarkes/hairlineでインストールし、Reactなら<Terrain />のようにコンポーネントとして使い、それ以外の環境ではterrain(element)のような関数を呼んでupdateとdestroyで制御します。この関数の形はSvelteのactionとも互換があると説明されています。intensity(反応の強さ)、theme、label、onReadという4つのオプションを各図形が共有しており、--hairline-plateなど6つのCSS変数で配色を調整できます。サーバーサイドレンダリング時はアスペクト比を保った空のボックスになり、描画自体はクライアント側のeffectやonMountで行う前提です。さらに、hairline-createという拡張機能を使うと、Claude CodeやCursorなどコーディングエージェントに指示を出して、既存19種と同じ仕組みで動く新しい図形を1つのHTMLファイルとして生成させることもできます。