lucasmarkes/hairline

Isometric line figures that answer the pointer. For React and for anything with a DOM.

解決する課題

Hairlineは、ユーザーのポインターの動きに反応する33種類のインタラクティブなアイソメトリック線画のコレクションを提供します。外部依存関係なしで、軽量かつ高性能で視覚的に一貫したインタラクティブなUI要素をWebアプリケーションに追加するという課題を解決します。

仕組み

このライブラリは、共有の requestAnimationFrame ループを使用してアイソメトリックグラフィックスをDOM要素にレンダリングします。ReactコンポーネントまたはバニラJavaScript/TypeScriptをサポートしています。各図形は独自のインタラクションロジック（ホバーや移動への反応など）を定義しており、開発者は intensity 設定やCSS変数を使用して動作をカスタマイズできます。また、Claude CodeやCursorなどのコーディングエージェント向けに、新しい図形を生成したり、既存のSVGをHairline形式に適応させたりするためのCLIベースの「スキル」も含まれています。

対象ユーザー

Webサイトやダッシュボードにインタラクティブで「ライブ」なアイソメトリックイラストを追加したいフロントエンド開発者やデザイナー向けに設計されています。また、カスタムのインタラクティブUIコンポーネントの作成を自動化したいAIコーディングエージェントのパワーユーザーにも最適です。

ハイライト

  • 33種類の構築済みインタラクティブ図形（カードトレイ、回転ターンテーブル、コミットグラフ、メカニカルロックなど）を収録。
  • ゼロ依存、ESM専用ライブラリで、オプションでReactをサポート。
  • 高パフォーマンス：図形はアクティブな時、または画面上にある時のみリソースを消費します。
  • デフォルトでアクセシビリティに対応しており、aria-label や特定のコンポーネントでのキーボードナビゲーションをサポート。
  • AIエージェントスキル（hairline-create および hairline-adopt）が含まれており、カスタムデザインを生成またはインタラクティブな図形に変換可能。

関連

  • プロジェクト
    lobehub/lobe-ui

    Lobe UI は、オープンソースの React コンポーネントライブラリ（npm `@lobehub/ui`）で、テーマ対応、アニメーション対応の UI 要素、i18n サポート、Tailwind 互換のスタイリングを提供し、AI 生成コンテンツ（AIGC）Web アプリを構築できます。pnpm でインストールし、アプリを `<ConfigProvider motion={…}>` でラップして、`<Button>` などの既製コンポーネントを使用します。ライブラリは ESM 専用で、Next.js と互換性があり（`transpilePackages` を追加）、より広範な Lobe エコシステム（Lobe Chat、Lobe Theme など）と統合されます。

  • プロジェクト
    vibe-motion/skills

    vibe-motion/skills は、LLM エージェントが呼び出して短いアニメーション、ビデオ、またはインタラクティブな HTML を生成できる視覚効果プラグイン（「スキル」）のカタログです。`npx skills add vibe-motion/skills` でインストールし、自然言語コマンド（例：「尺子进度动画」）でスキルをトリガーします。各スキルは Remotion/Three.js/p5.js パイプラインをラップし、外部リポジトリを取得して、GIF/MP4/HTML を出力します。このリポジトリは非推奨で、motionface.cc を指しています。

  • プロジェクト
    AnxForever/stylekit

    AI が生成するウェブページ向けのオープンソース視覚スタイルライブラリで、デザイントークンと制約を提供し、AI エージェントが一貫性のある高品質な UI デザインを作成できるようにします。

  • プロジェクト
    Caho1/open-claude-ui

    Open‑Claude‑UI は、Anthropic の Claude デスクトップ UI を忠実に再現した、リバースエンジニアリングされた MIT ライセンスの React コンポーネントライブラリです。30 のすぐ使える高忠実度コンポーネント、Tailwind テーマ、モーションプリセット、Web‑Audio 合成、macOS デスクトップ統合、アクセシビリティフック、オフライン Storybook プレビューを提供し、詳細なリバースエンジニアリングガイドも付属しています。

  • プロジェクト
    threerocks/sweety-handdraw-video

    Sweety‑handdraw‑video は、トピック、記事、ストーリーを手描きナレーション付きビデオに変換するオープンソースのスキルです。LLM ベースのエージェントがスクリプトを作成し、ストーリーボードを設計し、スタイルを選択します。ローカルの Python ツールが各フレームを描画し、手書き字幕をレンダリングし、ローカル生成の音声と同期し、FFmpeg で 1920×1080 の MP4 をエクスポートします。21 のイラストスタイル、6 つの手アームプリセット、6 つの内蔵音声プロファイルが含まれ、完全にユーザーのマシン上で動作します（macOS/Linux で検証済み）。