【免费下载链接】blobatar项目地址https://gitcode.com/gh_mirrors/bl/blobatar点击查看免费下载blobatar是一个开源的确定性头像生成库任何字符串用户名、邮箱、ID都能稳定地渲染成一个几何小脸无需上传图片、不存储任何数据。而它的gaze视线跟随模块则让这个头像真的会看你——双眼平滑追踪鼠标指针带自然的加减速、近场回中和瞬目跳视是目前前端里几乎零成本实现头像盯着你效果的方案。1️⃣ 先认识 blobatar字符串 → 一张脸安装后只需传入一个字符串就会得到一张由哈希决定的脸bun add blobatar blobatar/reactimport { Blobatar } from blobatar/react; Blobatar name{user.email} size{48} /同一个字符串永远渲染同一张脸跨页面、跨设备完全一致。它内置 10 种轮廓round、organic、boxy、cloud、sun、triangle……和 14 种表情姿态一眼就能看出每个用户都是不同的生物 头像越大看你的效果越明显——gaze 是大尺寸头像的特性40px 的列表头像移动不到一个像素不值得开。2️⃣ gaze 视线跟随系统是怎么工作的gaze 是整个动画体系里唯一需要 JavaScript 的层其余呼吸、眨眼、idle 环视都是纯 CSS。它由两个文件组成packages/blobatar/src/gaze.ts视线驱动逻辑追踪、平滑、跳视判断packages/blobatar/src/gaze.css眼睛几何把方向翻译成眼睛的位移、透视缩短与收拢倾斜用大白话讲它模拟了真人眼球的三件事机制效果对应常量平滑追踪光标缓缓移动时眼睛以指数曲线追过去不会机械地 1:1 跟手SETTLE110ms 时间常数瞬目跳视saccade指针突然瞬移切 tab、滚动、跨屏眼睛直接弹过去而不是滑稽地慢慢滑SNAP近场回中光标正好压在头像脸上时眼睛自然回到正中——你站在它眼前它看着你DEADZONE核心参数只有一个travel视线最大幅度viewBox 单位整张脸宽 100 单位。官方建议范围1.5 ~ 43左右恰到好处的在看了更大眼睛可以转到轮廓边缘甚至翻过侧面像一张正在转头的脸默认是0不设置就永远不动后文 FAQ 会讲另外两个隐形但重要的行为它只写 CSS 自定义属性--mo-track-x/y等不碰框架管理的 class/属性所以在 React 的 diff 机制下不会被悄悄吞掉完全尊重prefers-reduced-motion并且只在精细指针鼠标/触控板设备上启用触屏设备不触发。3️⃣ React 快速开始4 步接入第 1 步安装motion.css和gaze.css随包提供直接 import 即可。第 2 步引入 gaze hook 与两份样式表。import { Blobatar } from blobatar/react; import { useGaze } from blobatar/react/gaze; import blobatar/motion.css; import blobatar/gaze.css; // 必须缺了它眼睛纹丝不动第 3 步用useGaze拿到 reflookAt: pointer声明跟着光标看const { ref } useGaze({ travel: 3, lookAt: pointer }); Blobatar ref{ref} namealainexample.com animatealways size{200} /;第 4 步完事。头像的眼睛现在开始追你的鼠标了 ⚠️ 注意两点必须配合animatehover或always。静态头像渲染成img样式表够不到里面的眼睛gaze 只在内联 SVG 上生效单个头像常驻动画用animatealways头像网格/列表用animatehover一次只有一个在动性能和观感都更好。4️⃣ 让头像看你指定的地方5 种 lookAt 目标gaze 不只是跟鼠标。lookAt()接受五种目标覆盖了几乎所有交互场景目标效果典型场景pointer跟随鼠标指针落地页、个人主页的大头像{ x, y }看向指定坐标盯着输入框光标打字时头像看着你Element盯着某个元素的中心滚动/缩放自动保持头像引导你看这个按钮的 onboardingrest定在脸的正中刻意的不看密码输入时头像假装没在看你 null收回注意力idle 环视恢复交互结束后头像回归自己的生活一个有意思的细节从rest切回pointer时idle 的随机环视会淡入淡出地交接而不是生硬切换——眼睛始终是同一个人在控制。5️⃣ 多框架接入React / Vue / Solid / Svelte / Preact每个框架适配器都有独立的/gaze子路径不 import 就完全不打包这部分代码驱动约 1.2 kB框架绑定方式子路径ReactuseGaze()返回refblobatar/react/gazePreact同样的 hookref 挂在elementRefblobatar/preact/gazeVueuseGaze(blobRef, …)传入你的 template refblobatar/vue/gazeSolidcreateGaze()本身就是 refblobatar/solid/gazeSvelte{attach eyes}附着blobatar/svelte/gaze以 Vue 为例script setup import { Blobatar } from blobatar/vue; import { useGaze } from blobatar/vue/gaze; import blobatar/motion.css; import blobatar/gaze.css; const blob ref(); useGaze(blob, { travel: 3, target: pointer }); /script template Blobatar refblob namealainexample.com animatealways :size200 / /template没有框架也可以直接驱动import { gaze } from blobatar/gaze后调用gaze(svgEl)拿到lookAt / remeasure / stop三个句柄。6️⃣ FAQ头像渲染完美但眼睛不动这是 gaze 唯一但很隐蔽的失败模式驱动在跑、属性在写、眼睛就是不动。按下面顺序排查忘了import blobatar/gaze.css—— 没有几何层方向写到哪里都没用没设置travel——--mo-track-travel初始值就是0px不设置等于没开启CSS 规则和 hook 撞车了—— 如果你在样式表里写了.hero .mo-eyes { --mo-track-travel: … }它会覆盖useGaze({ travel })的值元素自身声明 继承值。二选一别同时设animate没开—— 静态img头像没有可驱动的 DOMgaze 天然失效确认设备是精细指针且未开启系统级减少动态效果。✅ 性能可以放心驱动是事件驱动 自动停车的——指针不动、眼睛稳定后一帧都不跑requestAnimationFrame循环直接停摆静止状态下成本严格为零。7️⃣ 进阶一整面墙的头像都看你单个大头像200px 的页头、onboarding是 gaze 的主场。而当你有一整面墙、几百个头像时问题变成了光标附近的一小圈跟着看——注意力随距离衰减仓库里的调参网格 apps/demo 正是为此而建的400 个头像的实规模调场带near距离衰减门/all两种策略、衰减半径滑杆和每帧写次数读数。核心逻辑在 apps/demo/pointer.ts它复用的step/threshold等纯函数全部来自 gaze.ts#L57-L119——连视频渲染管线帧乱序执行都能跑同一套算术因为追踪被刻意拆成了纯数学 浏览器驱动两层。8️⃣ 延伸阅读想更深入这些仓库内资料按从浅到深排列官方用法总览含 gaze 两行集成示例packages/blobatar/README.md动画体系设计文档gaze 是 §4.5眼球球面投影是 §4.8packages/blobatar/docs/motion-spec.md视线驱动源码大量为什么这么写的注释packages/blobatar/src/gaze.ts几何层样式表packages/blobatar/src/gaze.cssReact hook 实现packages/react/src/gaze.ts行为回归测试峰值倾斜角、近场、跳视阈值packages/blobatar/test/gaze.test.ts把travel调到 3、给页头那唯一的头像加上useGaze——你的访客会发现这个头像一直在看他们 赞分享【免费下载链接】blobatar项目地址https://gitcode.com/gh_mirrors/bl/blobatar点击查看免费下载相关推荐14种表情随你调用blobatar表情系统happy/mad/thinking完整教程14种表情随你调用blobatar表情系统happy/mad/thinking完整教程 blobatar 是一个从任意字符串确定性生成几何头像的开源库而ESP32摄像头完整教程从零搭建物联网视觉系统ESP32摄像头完整教程从零搭建物联网视觉系统 ESP32摄像头模块为物联网项目提供了强大的视觉能力支持多种图像格式和分辨率设置。本文将详细介绍如何快速配置嵌入式驱动开发图像处理物联网硬件开发多摄像头实时目标跟踪系统搭建指南从零开始的完整教程多摄像头实时目标跟踪系统搭建指南从零开始的完整教程 在当今智能安防和智慧城市快速发展的时代 多摄像头目标跟踪 技术正成为实时监控系统的核心技术之一。本文将通计算机视觉AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考