Products

开源线稿插画库 Figures:33 个纯 SVG 图形带丝滑鼠标交互

这是我最近看到最漂亮最惊艳的项目 https://t.co/TOM7D0fYop 之前我就非常喜欢 linear 的互动效果,但是用几个 agent 实现都不那么完美。 现在有了这个库,里面有33 个...

Why we picked it

做官网总羡慕 Linear 那种微交互?这个库有 33 个纯 SVG 线稿 figure,鼠标靠近就有丝滑动效,还能调 intensity 强度,比让 agent 手写代码省事多了,前端和设计师直接拿来用。

开发者 Lucas Markes 发布了 Figures 线稿插画库(hairline.lucasmarkes.com/figures),收录 33 个线稿 figure,按主题排列,每个图形均为纯 SVG 绘制。鼠标靠近时会触发响应式交互动画,开发者可通过 intensity 参数调节反应强度。博主 vikingmute 表示之前用多个 agent 复刻 Linear 风格的互动效果都不理想,而这个库的效果让他感到惊艳。

Image · Viking
Body

技术实现上,这批 figure 不依赖 Canvas 或 WebGL,全部以 SVG 绘制,因此体积小、可直接嵌入网页并随分辨率缩放。交互层通过监听鼠标位置驱动形变动画,丝滑程度接近 Linear 官网标志性的微交互风格。

对前端开发者和 UI 设计师来说,这是一个可直接取用的动效素材库,省去让 AI 生成微交互代码再反复调优的过程。做产品官网、落地页或营销页时,把这类线稿 figure 放进 hero 区即可获得接近 Linear 质感的视觉细节。

Original · Viking

这是我最近看到最漂亮最惊艳的项目 https://t.co/TOM7D0fYop 之前我就非常喜欢 linear 的互动效果,但是用几个 agent 实现都不那么完美。 现在有了这个库,里面有33 个...

这是我最近看到最漂亮最惊艳的项目 hairline.lucasmarkes.com/figures 之前我就非常喜欢 linear 的互动效果,但是用几个 agent 实现都不那么完美。 现在有了这个库,里面有33 个线稿插画的 figure, 按主题排列,每个 figure 都是纯 SVG 绘制,鼠标靠近时会有响应非常丝滑的交互,可以调节 intensity 控制反应强度。 光靠描述感觉不到,去这个网站的 demo 里面感受一下,这是我最近最喜欢的一系列的效果了。

Industry Coordinates & Source Verification

This report is categorized under AITOP's "Products" desk. Within our cross-regional analytical framework, it directly maps to AI developer toolchains, coding agents, and engineering workflows. Key entities and technical topics under continuous tracking include SVG, Figures, Linear, UI design.

Source attribution: curated from Viking (@vikingmute).