lucasmarkes/hairline

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

해결하는 문제

Hairline은 사용자의 포인터 움직임에 반응하는 33개의 인터랙티브 아이소메트릭 라인 기반 도형 컬렉션을 제공합니다. 외부 의존성 없이 웹 애플리케이션에 가볍고 성능이 뛰어나며 시각적으로 일관된 인터랙티브 UI 요소를 추가하는 문제를 해결합니다.

작동 방식

이 라이브러리는 공유 requestAnimationFrame 루프를 사용하여 아이소메트릭 그래픽을 DOM 요소에 렌더링합니다. React 컴포넌트 또는 바닐라 JavaScript/TypeScript를 지원합니다. 각 도형은 호버나 움직임에 반응하는 방식과 같은 고유한 상호작용 로직을 정의하며, 개발자는 intensity 설정 및 CSS 변수를 통해 동작을 사용자 정의할 수 있습니다. 또한 Claude Code나 Cursor와 같은 코딩 에이전트가 새로운 도형을 생성하거나 기존 SVG를 Hairline 형식으로 변환할 수 있도록 CLI 기반의 '스킬'을 포함하고 있습니다.

대상 사용자

웹사이트나 대시보드에 인터랙티브하고 '살아있는' 아이소메트릭 일러스트를 추가하려는 프론트엔드 개발자와 디자이너를 위해 설계되었습니다. 또한 사용자 지정 인터랙티브 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) 웹 앱을 구축할 수 있습니다. 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 검증됨).