hairline：33 个会回应指针的等距线框组件

产品页的视觉装饰大多停在两个极端：一张不会动的插画，或者一套谁都在用的组件库动效。10 月 13 日一篇公众号文章专门夸了 hairline 的审美——细线、等距透视、大量留白、一点橙绿强调——说它把电脑、打字机、磁带机这些寻常物件统一成了一套干净的视觉语言。hairline（TypeScript，MIT，截至 2026-10-14 1924 star）更特别的地方是这些图全是「活」的：33 个等距线框 figure，每一个都回应指针。

核心功能

• 每个 figure 都有物理：卡片盘 riffle 里指针下的卡片立起来、方向键能翻卡；terrain 的 81 根柱子随指针隆起；terminal 能把历史滚回来、当前行抬起、邻行跟着动；turntable 甩一下带着惯性，停在最近的四分之一圈；branches 里指针下的提交会带着自己的历史一起升起来。
• React 只是可选：核心是零依赖 ESM，terrain(document.getElementById(...)) 就能跑，Svelte 的 action 写法 use:terrain={{ intensity }} 直接可用；React 18+ 包装是可选 peer，而且 Server Component 渲染不需要自己加 “use client”。
• shadcn 一条命令接入：npx shadcn@latest add https://hairline.lucasmarkes.com/r/hairline.json 会装上包和包装组件，包装组件读你主题的 tokens。
• 强度可调：每个 figure 都接 intensity 选项——涟漪扩散更远、柱面隆起范围更宽、指针轨迹停留更久；官网的 live demo 带滑杆，效果先试再定。
• 尺寸规矩简单：figure 画进你给的元素，占满元素宽度，固定 5:4 宽高比，update() 改选项、destroy() 拆干净。

典型使用场景

• 落地页 hero 想要一个「能玩」的视觉锚点的前端工程师：放一个 <Terrain /> 或 <Turntable />，访客的第一次 hover 就有了反馈。
• 要统一插画风格的文档和产品站：一套细线视觉覆盖卡片、终端、笔记本、手机、提交图，不用再从三四个插画包里拼。
• 不用 React 的团队：Svelte action 或原生 DOM API 照常接入，框架迁移时代码不用重写。

快速上手

npm i @lucasmarkes/hairline

import { Terrain } from '@lucasmarkes/hairline/react';

export function Hero() {
  return <Terrain />;
}

组件占满父容器宽度、按 5:4 呈现；先去 hairline.lucasmarkes.com 拖着 intensity 滑杆试一遍，再决定放进哪个版位。

小结

适合想让页面「被记住」的前端：hero、空状态、产品介绍页的装饰位；不适合需要承载信息的图表场景——它的动效是装饰性的，也不适合塞进非要别的宽高比的版位。语言 TypeScript，协议 MIT，截至 2026-10-14 是 1924 star，最近推送 2026-10-08，仓库由个人维护，长线更新要看作者节奏。

一个使用前要知道的点：所有 figure 固定 5:4 宽高比并占满父容器宽度，布局时要给它们留出这个比例的空间；动画本身没有进度控制 API，play 之外的可玩配置就是 intensity。等距视觉这件事，animate 技能 把同一套语言带进了 agent 生成的静态图里，hairline 则把它带进了真实 DOM——一个管画出来，一个管动起来；diagram-design-agent-skill 记录的则是「让 agent 画图有品味」的另一个做法。