📌 项目地址：github.com/lucasmarkes/hairline | 星数：806+ | 语言：TypeScript | 协议：MIT | 演示：hairline.lucasmarkes.com（带 intensity 滑杆）
landing page 的视觉焦虑有个轻量解：Hairline——27 个等距线框图形组件，会回应指针移动：鼠标滑过，线条有机地跟随变化。零依赖、纯 ESM、React 可选 peer、还提供 shadcn 一键添加（自动读你的主题 token）。适合不想上重型 WebGL 又想让页面「活」起来的场景。Rust 侧组件库见 Ely GPUI Components教程，设计方法论见 Oil UI教程。
| 特性 | 说明 |
|---|---|
| 27 个等距图形 | 统一风格的等距线框家族，按需取用 |
| 指针回应 | 图形对鼠标移动有机反应，hero 区瞬间有生命感 |
| 零依赖 ESM | 纯 ESM 包，React 18+ 仅为可选 peer |
| shadcn 支持 | 一条命令添加并读取主题 token |
| intensity 滑杆 | 在线演示可实时调交互强度 |
# 方式一：npm
npm i @lucasmarkes/hairline
# 方式二：shadcn 一键（自动加主题包装器）
npx shadcn@latest add \
https://hairline.lucasmarkes.com/r/hairline.json
# React 用法
import { Terrain } from "@lucasmarkes/hairline/react";
export function Hero() {
return <Terrain />;
}27 个会回应指针的等距线框图形组件（lucasmarkes/hairline，806 星，MIT）：为 React 和一切有 DOM 的环境打造——鼠标移动时线框图会有机地回应。零依赖、纯 ESM；React 18+ 是可选 peer（仅 @lucasmarkes/hairline/react 入口需要）。在线演示带 intensity 滑杆可玩。
两种：① npm i @lucasmarkes/hairline（零依赖 ESM）；② 用 shadcn 一键添加：npx shadcn@latest add https://hairline.lucasmarkes.com/r/hairline.json——会自动装包并加一个读取你主题 token 的包装器，与现有设计系统无缝融合。
landing page 的 hero 区视觉、文档站配图、产品页装饰——等距线框风格安静克制，交互响应带来『活』的感觉但不喧宾夺主。React 用 <Terrain /> 等组件直接嵌，非 React 项目走 DOM 版。