lucasmarkes/hairline

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

What it solves

Hairline provides a collection of 33 interactive, isometric line-based figures that respond to user pointer movement. It solves the problem of adding lightweight, performant, and visually consistent interactive UI elements to web applications without external dependencies.

How it works

The library uses a shared requestAnimationFrame loop to render isometric graphics into a DOM element. It supports React components or vanilla JavaScript/TypeScript. Each figure defines its own interaction logic—such as how it reacts to hover or movement—and allows developers to customize behavior via an intensity setting and CSS variables for theming. It also includes CLI-based "skills" for coding agents (like Claude Code or Cursor) to generate new figures or adapt existing SVGs into the Hairline format.

Who it’s for

It is designed for frontend developers and designers who want to add interactive, "live" isometric illustrations to their websites or dashboards. It is also for power users of AI coding agents who want to automate the creation of custom interactive UI components.

Highlights

  • Includes 33 pre-built interactive figures (e.g., card trays, rotating turntables, commit graphs, and mechanical locks).
  • Zero-dependency, ESM-only library with optional React support.
  • Highly performant: figures only consume resources when active or on-screen.
  • Accessible by default, with support for aria-label and keyboard navigation for specific components.
  • Includes AI agent skills (hairline-create and hairline-adopt) to generate or convert custom designs into interactive figures.

Related

  • Project
    lobehub/lobe-ui

    Lobe UI is an open‑source React component library (npm `@lobehub/ui`) that provides themed, animated UI elements, i18n support, and Tailwind‑compatible styling for building AI‑generated‑content (AIGC) web apps. Install via pnpm, wrap your app in `<ConfigProvider motion={…}>`, and use ready‑made components like `<Button>`. The library is ESM‑only, works with Next.js (add `transpilePackages`), and integrates with the broader Lobe ecosystem (Lobe Chat, Lobe Theme, etc.).

  • Project
    vibe-motion/skills

    vibe‑motion/skills is a catalog of visual‑effects plug‑ins (“skills”) that LLM agents can call to generate short animations, videos, or interactive HTML. Install via `npx skills add vibe-motion/skills`, then trigger a skill with natural‑language commands (e.g., “尺子进度动画”). Each skill wraps a Remotion/Three.js/p5.js pipeline, pulls in external repos, and outputs GIF/MP4/HTML. The repo is deprecated and points to motionface.cc.

  • Project
    AnxForever/stylekit

    An open-source visual style library for AI-generated webpages that provides design tokens and constraints to help AI agents create consistent, high-quality UI designs.

  • Project
    Caho1/open-claude-ui

    Open‑Claude‑UI is a reverse‑engineered, MIT‑licensed React component library that faithfully reproduces Anthropic’s Claude desktop UI. It provides 30 ready‑to‑use, high‑fidelity components, a Tailwind theme, motion presets, Web‑Audio synthesis, macOS desktop integrations, accessibility hooks, and an offline Storybook preview, all documented with a detailed reverse‑engineering guide.

  • Project
    threerocks/sweety-handdraw-video

    Sweety‑handdraw‑video is an open‑source skill that turns a topic, article or story into a hand‑drawn narrated video. An LLM‑based Agent writes the script, designs the storyboard and picks a style; local Python tools then draw each frame, render handwritten subtitles, sync with a locally‑generated voice‑over and export a 1920×1080 MP4 via FFmpeg. It includes 21 illustration styles, six hand‑arm presets, six built‑in voice profiles, and runs entirely on the user’s machine (macOS/Linux verified).