lucasmarkes/hairline

选用指南

AI 根据 README 整理 · 2026/10/16 22:21:54

使用方式

可通过 npm 安装，支持 React 组件或直接操作 DOM 的函数式使用。

查看 README 依据

 Live, with a slider for `intensity`: **[hairline.lucasmarkes.com](https://hairline.lucasmarkes.com)** ## Install ```sh npm i @lucasmarkes/hairline ``` No dependencies. ESM only. React 18 or later is an optional peer, needed only by `@lucasmarkes/hairline/react`. With shadcn, which adds the package and a wrapper that reads your theme's tokens: ```sh

npx shadcn@latest add https://hairline.lucasmarkes.com/r/hairline.json ``` ## Use ### React ```tsx import { Terrain } from "@lucasmarkes/hairline/react"; export function Hero() { return <Terrain />; } ``` The figure fills its parent's width at a 5:4 aspect ratio. The entry is a client module, so a Server Component can render it with no `"use client"` of its own. Every component takes the options below and every `<div>` attribute, and forwards its ref to the `<div>`. ### Anything else ```ts import { terrain } from "@lucasmarkes/hairline";

部署要求

需要 ESM 环境，React 18 或更高版本为可选依赖，仅在使用 React 组件时需要。

查看 README 依据

 Live, with a slider for `intensity`: **[hairline.lucasmarkes.com](https://hairline.lucasmarkes.com)** ## Install ```sh npm i @lucasmarkes/hairline ``` No dependencies. ESM only. React 18 or later is an optional peer, needed only by `@lucasmarkes/hairline/react`. With shadcn, which adds the package and a wrapper that reads your theme's tokens: ```sh

已知限制

函数式用法需要 DOM，服务端渲染时组件为空框。

查看 README 依据

- **Server rendering.** On the server a component is an empty box with a 5:4 aspect ratio, so nothing shifts when it draws. The functions need a DOM: call them in an effect, in `onMount`, or in a script after the element. - **Shadow DOM.** A figure mounted inside a shadow root styles itself there. ## Make your own