v3 只解决了配色,这一版补的是「会动、会亮、在运转」的那一层
绑定 WebSocket 连接状态 和 进行中盘口数。 断线时点变黄、文字变「重连中」—— 它是个真状态指示器,不是装饰。
这是「我们的主角」—— 参考站摆的是 3D 机器人,我们摆自己的数据: 四角节点是池子 / 当前赔率 / 参与人数 / 抽水率,中心环是看多占比,走线上的光点表示资金正在汇入。 每个数字都是真实字段,没有一个是为了好看编的。
流光描边只给"距封盘 < 3 小时"的盘口 —— 它是倒计时的视觉形态,不是给每张卡的装饰。 一屏同时最多出现一张;全是流光就等于没有流光。
这是参考站 Worker Log 的同款机制,但内容换成我们真有的东西: 下注、池子变动、赔率调整、结算派彩 —— 全部来自已经在跑的 WebSocket 推送。 不做参考站那种「2272 次思考 / 4 个 Worker 在线」的计数器:我们的 AI 还是 mock,挂上去就是编数字。
三处加法:曲线坐在点阵网格上(不再是悬空的线)、线本身走一层 feGaussianBlur 辉光、 末端点加扩散脉冲表示"还在更新"。都是纯 SVG,不引图表库。
为什么不做萌系机器人:参考站是学习工具,萌系降低门槛;我们是真钱对赌,同一个手法会削弱资金安全感。
所以老 K 是几何体不是生物 —— 悬浮晶体 + 一条横向视觉带(有注视感,但不是眼睛)+ 两层反向旋转的数据环。
为什么叫老 K:K 线的 K,也是牌桌上的 K —— 正好落在「金融 + 对赌」这个交叉点上,就是 aiTickr 本身。
它会表态,所以是角色不是贴图:核心色跟判断走(看多转红/看空转绿),外环实线=高置信、虚线=低置信,
环转速=分析强度。晶体内部跑的是真实 K 线 —— 它在想什么是看得见的。
① 点阵背景 整屏 22px 点阵 + 顶部径向辉光,用 mask 渐隐 —— 一个 fixed 伪元素,不随滚动重绘。
② 呼吸状态点 绑 WebSocket 连接状态,断线变色。
③ HUD 四角角标 只给"正在运转"的卡。
④ 扫描线 3.4s 掠过一次,状态结束就停。
⑤ 流光描边 conic-gradient 绕圈,只给距封盘 < 3 小时的盘口。
⑥ 径向进度环 载入时 1.6s 走针,绑看多占比。
⑦ 数据节点环 + 走线光点 四角真实字段,光点表示资金汇入方向。
⑧ 实时事件流 等宽 + 分类色标签 + 新行闪一下。
⑨ 赔率刻度带 顶部刻度尺 + 进度条末端呼吸光。
⑩ 数字跳动 WS 推来新赔率时闪一下再归位。
· 每个元素必须绑真实数据。 参考站的「2272 次思考」背后有真任务,我们的 AI 还是 mock ——
所以那类计数器一个都不做。编出来的数字被用户拆穿一次,真钱产品的信任就没了。
· 动效有预算。 一屏同时最多一张流光卡 + 一条扫描线。全亮等于全不亮,而且中低端安卓会掉帧。
列表里的卡一律不开动画。
· 系统开了"减少动态效果"就全停。 已经写了 prefers-reduced-motion,这是硬要求不是加分项。