UX Sandbox
交互与质感的实验场。全部是单文件、示例数据，可拖、可点。A playground for interaction and material. Single files, sample data; drag, click, explore.
产品动线牌桌（3D 卡牌）Product flow card table (3D)
每个项目一张牌：有问题的沿弧线摊开、正常的叠成牌堆；点牌堆在空间里摊成扇面翻牌；点牌飞上时间轴看每一步；点某一步放大成步骤页。毛玻璃牌与发光边，大屏可轮播。One card per project: troubled ones fan out along an arc, healthy ones stack; tap a stack to fan it open in space; a card flies onto the timeline; a step zooms into its own page. Frosted glass, glowing edges, big-screen carousel.
销售大屏 · 收入预测概念Sales big screen · revenue forecast concept
大屏从「今天卖得怎么样」变成「今天卖得够不够、跑在往常前面还是后面」：今日预测与达成、往常此时刻度、金色虚线 = 预测的统一视觉语言，底部全城 8 天收入条带的出现 / 收起动画可点。The big screen goes from “how are sales today” to “are we ahead of or behind the usual pace”: today’s forecast and attainment, the usual-by-now tick, one visual language (gold dashes = forecast), and a clickable show / hide animation for the 8-day revenue strip.
私人助理消息分组Assistant message grouping
助理主动发来的消息怎么分组、怎么折叠、处理完去哪：按事情而不是按时间聚合，待办与已处理分开，上下文随消息一起带着。桌面版已上线。How the assistant’s proactive messages group, collapse and clear: clustered by matter rather than by time, to-do apart from done, context travelling with each message. Shipped on desktop.
销售大屏 · 3D 城市Sales big screen · 3D city
官网首页那张 3D 城市地图的来源：门店是玻璃方块，内核亮度随收入，实时成交逐笔回放，左列 KPI 与分时曲线，右上全城面板。示例数据。Where the homepage’s 3D city map comes from: stores as glass cubes whose cores glow with revenue, live transactions replayed one by one, KPI column and intraday curve, city panel top right. Sample data.
GlassUI · 真 3D 的 Liquid Glass 注册表单GlassUI · a real-3D Liquid Glass sign-up form
整张注册表单画在 three.js 的 canvas 里，不用 DOM：按钮是有厚度的透明玻璃块，颜色从玻璃内部发出来，影子投在底板上，底板倒映按钮。拖动旋转看厚度；WebGPU，不支持时自动回落 WebGL2。开源框架 ThreeDUI 的第一个样张。A whole sign-up form drawn inside a three.js canvas, no DOM: buttons are transparent glass blocks with real thickness, colour glows from inside the glass, shadows fall on the panel, the panel reflects the buttons. Drag to see the depth; WebGPU with automatic WebGL2 fallback. First sample of the open-source ThreeDUI framework.
大屏天气镜头Weather lens for the big screen
晴、阴、雨、雪在同一张城市地图上的镜头效果，点击和拖动看细节。Sun, overcast, rain and snow as camera moods over the same city map; click and drag for detail.
零售岗位与权限Retail roles and permissions
谁是什么岗位、管哪几家店。按组织给只对组织的直接成员生效，不往子组织传；点名用来补个例。Who holds which role and runs which stores. Grants by organisation apply to direct members only; named grants cover the exceptions.
动线玻璃实验台Glass material lab
同一套动线场景里的四件玻璃：透明立方体、琥珀长方体、磨砂 3D 字母、8 mm 薄玻璃。七盏灯可单独开关，四种灯光预设看玻璃在不同光下的样子。Four pieces of glass in the flow scene: a clear cube, an amber slab, frosted 3D letters, 8 mm thin glass. Seven lights, four presets, to see how glass behaves in different light.
发送键思考动画Send-button thinking animation
聊天发送键在空闲、思考、输出三种状态下的动画，用来定助理「正在想」的手感。The chat send button idle, thinking and streaming: the feel of an assistant that is working.
旧金山一日地形路线San Francisco in a day, on terrain
一天的路线铺在真实地形上：站点、海拔剖面、时间轴与故事卡，桌面四角 HUD，手机底部抽屉。A one-day route laid over real terrain: stops, elevation profile, timeline and story cards; corner HUD on desktop, bottom sheet on phones.
私人助理消息分组 · 手机版Assistant message grouping · phone
同一套分组规则搬到手机上：单列、底部动作、滑动处理，和桌面版保持同一种心智。The same grouping rules on a phone: single column, bottom actions, swipe to handle, the same mental model as desktop.
产品动线三种概念Three concepts for the product flow
最早的三个方向：楼层 = 阶段的立体楼、流水线传送带、河流分叉。都从「看板」出发而不是从用户要做的事出发，被否掉；卡牌方案由此而来。The three earliest directions: a building where floors are stages, a conveyor belt, a branching river. All started from the board rather than from the work; the card deck came out of rejecting them.
产品动线牌桌（2D 卡牌）Product flow card table (2D)
卡牌想法的第一版：平面牌桌、按状态 / 步骤 / 负责人 / 更新时间分堆、点开看步骤时间线。后来因为不够 3D、牌堆交互不对而重做。The first card version: a flat table, stacks by status / step / owner / last update, a step timeline on open. Redone because it was not spatial enough.