Plain Text Community Mock

极简帖子流中的身份组件预览

Live interactive prototype

Telegram Premium Motion

3D 交互式动态头衔组件

两款头衔均为纯 CSS + Vanilla JS：鼠标 3D 视差倾斜、静止呼吸悬浮、45° 动态流光扫过。把鼠标放上去移动可看到空间折射和投影反向移动。

3D 金属质感「超管」盾牌

金色/黄铜浮雕 · 厚重 text-shadow · 金属反射波纹

Shield
超管

盾牌主体用 clip-path 塑形，多层 inset + 外部阶梯阴影模拟厚度；文字通过 translateZ 比背景更靠前。

微雕玻璃拟态「论坛主」胶囊

透明毛玻璃 · 双层 1px 边框 · 蓝紫渐变文字

Capsule
论坛主 Forum Master

JS 根据鼠标坐标写入 --rx / --ry / --mx / --my / --sx / --sy，玻璃底部投影会随倾斜反向偏移。

3D Badge Marketplace

泓聊社区个人信息面板 · 20 款动态头衔全景试穿

左侧完整还原社区个人页信息结构；右侧点击任意头衔，用户名下方会瞬间替换，并保留原生 JS 60fps 3D 视差、流光、浮动和材质动画。

✒ TA 的帖子 3

把社区的高级头衔放进真实个人页里
admin_lhj · 12分钟前 · 浏览 216 · 评论 8

点击右侧市场任意款式后，这里用户名下方的头衔会立即切换，保持真实个人面板的信息层级。

轻量纯文本环境中的跨次元反差
admin_lhj · 今天 03:24 · 浏览 86 · 评论 2

页面主体克制、稀疏、像普通论坛；头衔材质则使用高强度 3D、流光、粒子和镜面光影。

← 返回首页