蜘蛛光标:跟着鼠标走、会拉丝的蜘蛛

做一个首屏:一只用代码画出的蜘蛛顺着一根丝垂下来,用八条有关节、会踩地迈步的腿跟着鼠标走,在页面物件之间拉起蛛丝;鼠标停下时它在物件之间闲逛,点一下会固定当前这根丝。纯代码,不调用模型,没有媒体文件:2D 画布、反向运动学的腿和下垂的蛛丝。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。

蜘蛛光标:跟着鼠标走、会拉丝的蜘蛛

准备好品牌、一个大字、标题、链接、最多四个页面小物件、蜘蛛的样子、配色和语言。Skill 会交付一个完整的落地页(index.html)、一段可以粘进现有网站的区块和一个 React 组件,附带开源字体。

使用方法

  1. 构建脚本写出页面:文字是真实文字,物件做成小卡片,同时生成可粘贴的区块和 React 组件。

  2. 在浏览器里,一块画布每帧画出蜘蛛:每条腿用反向运动学从髋部求解到踩住的脚,身体走得够远时,两组腿轮流迈步。

  3. 蜘蛛身后拖着一根丝;经过物件、拉得太长或点击时,这根丝固定下来,会下垂、轻轻摆动。

常见问题

页面会调用模型吗?

不会。它是纯代码:HTML、一个脚本和两种字体。做一个页面不花钱。

能换一只蜘蛛吗?

可以:在 site.json 里选 tiger、widow 或 garden 三种样子,并设置大小和速度。

蜘蛛会挡住点击吗?

不会。它的画布不接收鼠标,下面的链接和按钮照常能点。

为什么这里点链接没反应?

示例运行在沙盒框架里,链接被禁用了。在你自己的页面里,链接会指向你在 site.json 里填的地址。

手机上能用吗?

能。用手指拖动就能引着蜘蛛走。已在 390 像素宽的手机视口里检查过。开启减少动态效果时,它会挂在丝上不动。

为什么没有在线生成?

生成新场景需要在沙盒里注入模型 Key,后端暂时还不支持。目前请用你自己的 Agent 运行这个 Skill。