# @enigmax/primitives 中文文档 规范地址：https://npmcn.com/package/%40enigmax/primitives/ 版本：0\.28\.0 npm 元数据更新时间：2026-09-28T19:41:22.170Z 中文译文更新时间：2026-11-14T09:52:37.234Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40enigmax/primitives 原文对照：https://npmcn.com/package/%40enigmax/primitives/?lang=original 项目主页：https://github.com/FJRG2007/enigma#readme 源码仓库：https://github.com/FJRG2007/enigma ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.6 MB，208 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=18 - 运行依赖：0 个 - peer 依赖：next \>=13，react \>=18，fuse\.js \>=6，react-dom \>=18，react-router \>=7，@github/relative-time-element \>=4 - 首次发布：2026-08-13T17:20:55.591Z - 最新版本发布：2026-09-28T19:41:21.753Z - 近 30 天下载量：2086（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：33（近 12 个月 33 个） ## 中文简介 无头组件:行为,时间和无障碍,没有自己的风格. 框架不可知核外加薄适配器. ## 安装 ```sh npm install @enigmax/primitives ``` 也可以使用：`pnpm add @enigmax/primitives`、`yarn add @enigmax/primitives`、`bun add @enigmax/primitives` ## README # @enigmax/ 原始内容 无头互动原始:行为,时机和可取性,没有自己的风格. **马克以像素每秒的速度取出,从不持续.** 环行的一圈和它的内容一样长,所以持续的时间可以使速度 `content / duration` 而每增加一个项目,该行运行得更快. 从奇长阵列分出两行,相同 `--duration: 20s`,测量了53.2 px/s和66.5 px/s,并意在看起来像一对. 固定50年代的提供铁路在10个、15个和20个物品上测得45个、67个和87个px/s,因为没有人在增加一个提供商时编辑时间。 取出一个速度并得出持续时间:同一条铁路随后在所有三个计数中测出67.0px/s. ## 安装 ```sh npm install @enigmax/primitives # or, to copy the source in and own it: enigma add marquee --copy ``` ## 用这个 反应 : ```tsx import { useMarquee } from "@enigmax/primitives/react"; function LogoWall({ logos }) { const { laneRef, trackRef, copies, dragging } = useMarquee({ speed: 80, hoverScale: 0.15 }); return (
{Array.from({ length: copies }, (_, copy) => (
0} style={{ display: "flex", gap: 32 }}> {logos.map(logo => {logo.name})}
))}
); } ``` 香草, Astro, 或其他任何能给你两个元素的东西: ```js import { createMarquee } from "@enigmax/primitives"; const marquee = createMarquee(document.querySelector("[data-lane]"), document.querySelector("[data-track]"), { speed: 80, hoverScale: 0.15 }); ``` 核心克隆了赛道上第一个灌道的孩子. 在反应中,钩子报告 `copies` 倒数取而代之,因此React保留了DOM的所有权. ## 选项 | 选项 | 默认 | 含义 | | --- | --- | --- | | `speed` | `60` | 以像素为每秒. 没有时间. | | `reverse` | `false` | 向起起入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入入. | | `vertical` | `false` | 在Y轴上滚动. | | `draggable` | `true` | 抓住并抛出行. | | `hoverScale` | `1` | 速度乘以 a **鼠标** 卧倒在一行. `0` 暂停. | | `decay` | `0.12` | 一秒后剩下的速度差距的分数. `0.35` 有点拖累. | | `manageStyles` | `true` | 应用行为需要的样式。 永远不要主题风格. | ## 为何明显执行错误 其中3个每只要一个生产错误。 这些是这一一揽子方案存在的原因,而不是片段. **`setPointerCapture` 默然地打破了行中的每一个链接.** 一个指针捕获重瞄准兼容鼠标事件,所以 `click` 平面媒体在车道上而不是按住的卡片上到达,卡片的链接从不打开. 一条九条道的旋转木马悄悄地停止了九条链路 而源头里什么也没有看错 此套件绑定 `pointermove` 编号 : `pointerup` 编号 : `pointercancel` 改为 `window`,这是所有抓取的 - 鼠标下拉已经在 OS 级别上抓取了鼠标,所以浏览器窗口外的放出仍然到达. **`touch-action` 决定手机能否滚动页面.** 没有它,浏览器就拥有了水平的刷子,拖曳处理器从不看到. 与 `none`,访问者无法再通过开始行上手势来滚动页面,这在手机上是屏幕宽度的大部分. 车道得到 `pan-y` (或 `pan-x` 当垂直时. **忽略的悬浮效应 `pointerType` 永远保持接触.** 水龙头大火 `pointerenter` 也一样,在触摸上... ... ..... `pointerleave` 所以在第一次水龙头之后,"在徘徊上慢下来" 就会以15%的速度永远离开排位 这里每条徘徊道都是被锁住的 `pointerType === "mouse"` - 光是这个门是不够的,需要CI故障:铬跟随 _兼容性_ 索赔的指针事件 `pointerType: "mouse"`它在Linux上而不是在Windows上发出它们,所以天真之门通过一台机器而失败在另一台机器上. 因此,一触也抑制了徘徊一秒钟 `pointerleave` 清除状态, 不论指针类型如何, 因为无法消除的悬浮是错误 . 简而言之,其余的:圈由两个拷贝之间的台阶来测量,而不是由项目宽度来计算;转换由一个驱动 `requestAnimationFrame` 循环而不是 CSS 键框,它在每个重写者上重新启动; 一个整数器携带了巡航,徘徊和动力,所以没有人能作为切入而来; 拖过~6px在捕获相中取消了点击; 右键从不开始拖动; 指针在放出前仍被拖出~90ms; 在拖动时会减少自動放出, 因为拖动是对指针的回答,而不是页面自己主动的动作. ## 样式 原始船只没有视觉风格 它只规定行为需要什么`overflow`, (中文(简体) ), `touch-action`, (中文(简体) ), `user-select`, (中文(简体) ), `will-change`, (中文(简体) ), `transform`)并曝光状态作为主题要钩入的数据属性: ```css [data-enigma-marquee] { cursor: grab; } [data-enigma-marquee][data-dragging] { cursor: grabbing; } [data-enigma-marquee][data-hovering] { --logo-opacity: 1; } [data-enigma-marquee][data-reduced-motion="true"] { /* autoplay is off */ } [data-enigma-marquee-track] { display: flex; } [data-enigma-marquee-copy] { display: flex; gap: 2rem; } ``` ## 测试 套房驱动真实的浏览器和样本 `new DOMMatrixReadOnly(getComputedStyle(track).transform).m41` 而不是问引擎它相信什么. ```sh npm run test:install # once, fetches Chromium npm test ``` | 检查 | 通行条件 | | --- | --- | | 2,9,11,20项的速度相同 | 测量的px/s在1%以内 | | 沿着指针拖曳 | 200px 刷新移动行 200.0px | | 释放 | 单调地在巡航上衰变, 没有显示翻转 | | 4个视图调整大小 | 帧不移动多于一帧 | | 在链接上拖动结束 | 0个导航 | | 完全点击并点击链接 | 每架1个导航 | | 触动 | 排行不坚持徘徊速度 | | 电话垂直刷卡 | 页面仍然滚动 | | `prefers-reduced-motion` | 0.00px 闲放漂移,拖放还行 | | 别动,然后释放 | 不飞 | 两种欺骗自己的方法, 这两种方法都产生了虚假的警报 当它被写: 不要测量大小 改变像之前/之后,因为 `setViewportSize` 需要几百毫秒 在此期间,行 合法地继续移动 - 抽样每个帧 寻找一个异常的一。 并丢弃前几个样本,因为安装了取样器后的第一个RAF三角洲接近于零并产生无意义的px/s突起. ## 常见问题 ### @enigmax/primitives 是什么？ 无头组件:行为,时间和无障碍,没有自己的风格\. 框架不可知核外加薄适配器\. ### 如何安装 @enigmax/primitives？ 在项目目录运行 npm install @enigmax/primitives，或使用 pnpm add / yarn add / bun add。 ### @enigmax/primitives 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @enigmax/primitives 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @enigmax/primitives 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @enigmax/primitives 可以商用吗？ @enigmax/primitives 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @enigmax/primitives 的下载量有多少？ 根据 npm 官方下载统计，@enigmax/primitives 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,086 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @enigmax/primitives 还在维护吗？ 最新版本 0\.28\.0 发布于 2026/09/29（1 个月前）；至今共发布 33 个版本，其中过去 12 个月发布了 33 个；首次发布于 2026/08/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。