@ blobatar/ 反应
反应适配器 斑点 ——决定性 任意字符串生成的几何化相 .
bun add @blobatar/react blobatar
blobatar 是一个对等依赖:适配器不携带自己的渲染器.
import { Blobatar } from "@blobatar/react";
<Blobatar name={user.email} size={48} />
动画blobatars需要样式表,并渲染为内置的 SVG 而不是一个
<img> —— 说 :hover 永远不要在内部开火 <img>,所以这两种模式不能是
合并:
import "blobatar/motion.css";
<Blobatar name={user.email} animate="hover" />
完全选项参考生活 主读取器。 。 。 .
跟着指针
眼睛可以跟踪光标. 那层是运动系统的一部分 需要JavaScript,所以它是一个单独的子路径,除非您 导入 :
import { Blobatar } from "@blobatar/react";
import { useGaze } from "@blobatar/react/gaze";
import "blobatar/motion.css";
import "blobatar/gaze.css"; // required — the eyes hold still without it
const { ref } = useGaze({ travel: 3 });
<Blobatar ref={ref} name={user.email} animate="always" size={200} />;
travel 是外出,是选择地层的地层
--mo-track-travel 开始于 0px,所以一个带有样式表的页面
游览无处可去 司机跑来跑去 眼睛也动不了 这是在
视图框单位——blobatar为100横,所以 3 是面额的3%
大约1.5到4读取良好.
别管它了 样式表却拥有它 这是更好的路线 从财产继承开始 或为了什么 响应 :
.hero .mo-eyes { --mo-track-travel: 3px; }
选择一个,而不是两个。 这样的规则胜过 travel而不是另一边
圆: 钩子将属性写入 <svg> 和眼睛继承
从那里开始,关于元素本身的声明 总是比继承的要好
但是,该值被写入。 两者兼而有之 规则就是得到的,
静静地,症状是一张 完美而永不移动的脸.
没有默认,所以除非你选择两者,否则两者永远不会相撞.
一个blobatar在瞄准目标之前什么都看不见, "pointer" 包含。 在那个地方
绝不改变
const { ref } = useGaze({ travel: 3, lookAt: "pointer" });
lookAt 也因为目标有改变而被交还 两者都一样
事物:客户端坐标的一个点,一个元素(lookAt(button.current), (中文(简体) ),
"pointer" 为光标, "rest" 把眼睛停在中间
恢复,或 null 无所事事,使浮游者无所顾忌
回来 选项在每次更改和函数获胜时都会重新应用
之间,所以一个组件可以宣布其通常的目标,并且仍然手动瞄准.
lookAt 财务报告和审定财务报表 remeasure 整个过程都稳定. useGaze({ settle, snap })
调和追捕.
没有附着在下面 prefers-reduced-motion 或者没有很好的指针,和
两人都受到监视,而不是一次抽样。 这是大型效应:
40px相机是像素的一分之一, 它能赢得它的位置在一个大
blobatar 的一页.
带有阴影/ ui
有个登记项目用Shadcn的 Avatar, (中文(简体) ),
当用户没有配置图像时, 返回到blobatar :
npx shadcn@latest registry add @blobatar=https://blobatar.dev/r/{name}.json
npx shadcn@latest add @blobatar/avatar
import { Blobatar } from "@/components/ui/blobatar";
<Blobatar name={user.email} src={user.avatarUrl} />;
那个 Blobatar 是包装纸,不是这个,它需要一个 src 与
name,上面的每个选项都用 blobatar 道具 (英语). shadcn add 安装
这个软件包,所以一个同时使用 导入其中之一的项目
另一个名字.
版本
套装中的每个软件包都发布相同的版本,主要名称为:
生成 ——被冰冻的种子对视映射. @blobatar/react@2 调制
gen2, 确切为 blobatar@2 已经 升级主机是选入
用户的外观正在改变, 因此对等范围在 blobatar 是一个准确的 主要的
而不是说 ^:混合对不是版本 skew,而是错误的图片.
来自 blobatar/react
blobatar/react 仍然存在,而且依然有效。 这个包裹再出口,所以
两者是同一组成部分,而不是两份,不能漂移。 那个子路径
在v3中被贬低并删除——没有急事,也没有等待的风险.
bunx blobatar-codemod .
bun add @blobatar/react
代码重写 blobatar/react 在进口中发现的规格,
require,动态 import() 并且能安全地跑两次 没有
安装任何设备; 该命令属于您 .