星阳 Xingyang
state idle

品牌网页宠物 · v0.1

星阳

Xingyang

从 logo 里长出来的小家伙。点它会开心，双击会空翻，拖到哪都行，没人理它就睡觉。它是一个原生 Web Component，Vue、React 和普通页面都能直接用。

橙黄月牙 → 身体和脸圆身被偏右的奶油色脸裁出 logo 的 C 形开口
蓝色飞翼 → 一对翅膀保留 logo 翼下那道黄色弧线，挥手、扑腾都靠它
四角星 → 头顶的星灵状态指示器：思考时旋转，成功变金色，出错变灰
TypeScriptCustom ElementsSVG + CSS 动画0 依赖≈9 KB gzip

表情与状态

9 个状态，对应 Agent 的生命周期

点任意卡片，上方的星阳会切换到该状态。移动鼠标，所有的小家伙都会看着你。

试一试

接口演示

让它说话 say()

跟踪异步任务 track()

选项

开启“召唤桌宠”后，右下角会出现一只可拖拽的星阳，位置会记在本地。

事件流

对应 pet-state-change、pet-click、pet-dblclick、pet-drag-end。

集成

三种用法，同一个元素

核心是 <xy-pet> 自定义元素，Shadow DOM 隔离样式，不会污染宿主页面。React 和 Vue 包装层只负责把 props 和事件接上，并且 SSR 安全（Next.js、Nuxt 可直接用）。


      

    

  


  

    

      
API

      
属性、方法、事件

    

    

      
属性

        
state
idle · happy · wave · talking · thinking · sleep · surprised · celebrate · error

        
size
宽度像素，默认 120

        
floating / position
固定在视口角落，bottom-right 或 bottom-left

        
movable / persist-key
可拖拽，位置存入 localStorage

        
flip
水平镜像，面朝左

        
sleep-after
无操作 N 秒后睡着，0 关闭，默认 60

        
track-eyes="false" · idle-actions="false"
关闭视线跟随 / 随机小动作

      

      
方法

        
say(text, { duration, typeSpeed, state })
打字机气泡，返回 Promise

        
play(state, { duration })
临时切换状态，到时回到基础状态

        
think(text?) → stop()
进入思考，调用返回的函数结束

        
track(promise, messages)
进行中思考，成功庆祝，失败晕眩

        
setState(s) · sleep() · wake() · hideBubble()
基础控制

        
greetings: string[]
点击时随机说一句

      

      
事件与换肤

        
pet-click · pet-dblclick
可 preventDefault() 接管默认反应

        
pet-state-change
detail: { state, prev }

        
pet-drag-end
detail: { x, y }

        
--xy-orange · --xy-yellow · --xy-blue …
CSS 变量换肤，节日配色不用改代码

        
::part(bubble)
从外部覆盖气泡样式

      

    

  


  

    

      
技术选型

      
为什么先用 SVG + Web Component

      
造型来自扁平矢量 logo，SVG 能百分百还原，体积小，不依赖任何框架。以后要做更复杂的骨骼动作，可以只替换渲染层，外部 API 保持不变。

    

    

      

        
方案擅长代价

        
          
SVG + CSS + Custom Elements当前零依赖、框架无关、可换肤、SSR 安全；矢量无损缩放动作靠手写 CSS 关键帧，复杂的形变与骨骼动作不划算

          
Rive升级首选设计师在编辑器里做骨骼与状态机，代码只切 input；运行时 @rive-app/canvas 开源 (MIT)需要用 Rive 编辑器制作 .riv（商业软件，有免费档）；运行时 wasm 体积较大

          
LottieAE 导出，lottie-web / dotlottie-web 生态成熟，适合精致的一次性动效交互与状态切换偏弱，多状态要拆多个文件或依赖 dotLottie 状态机

          
Live2D二次元“看板娘”方案，pixi-live2d-display、live2d-widget 很常见Cubism SDK 不是开源许可；需要专门的 Live2D 建模，和扁平 logo 风格不搭

          
Spine / PixiJS游戏级骨骼动画与粒子特效Spine 运行时需要 Spine 编辑器授权；对网页宠物来说偏重