活动通告
提示表面
精选媒体支撑的卡片模式，用于限时公告、状态面板和操作提示。
页面过渡
WebGL 墨水飞溅 — 着色器驱动的覆盖与揭幕效果
演示中心
交互式组件预览
演示中心
交互式组件预览
WebGL 着色器Simplex 噪声墨水覆盖/揭幕着色器研究
胶带标题 & 标题条
TapeTitle
非对称 SVG 胶带装饰搭配彩色背景 — 专为醒目的粉丝站区块标签打造。
观看演示
观看演示
观看演示
HeadingTape
白色背景配响应式贴纸装饰 — 单一样式，用于区块标题。
区块标题
服装标签卡
按钮 & 徽章
带墨水飞溅 SVG 箭头和主题配色的圆形弹性图标按钮。
变体 & 尺寸
6 种颜色主题 · 尺寸属性可覆盖变体默认值
carousel
primary
yellow
accent
ghost
outline
sm 40px
md 48px
lg 60px
行为
弹压 · 脉冲 · 禁用 · 自定义图标
弹压
脉冲
禁用
自定义图标
液滴按钮
液态填充数学 & 弹性旋转物理
按钮组
分组操作，同时保留每个按钮的液态填充动画
贴纸徽章
带偏移阴影和倾斜效果的墨色徽章
黄色蓝色红色绿色贴纸撕纸
60px 圆形无边框弹压动画主题配色
弹层 & 对话框
模态对话框、侧边抽屉、上下文气泡，以及粉丝自制全屏墨水飞溅图案。
涂鸦对话框
带旋转效果和警示胶带的纸张撕裂模态框
全屏对话框
媒体内容专用沉浸式遮罩层 — 使用 fullScreen 属性
抽屉 & 气泡
侧边抽屉、上下文菜单和提示
服装吊牌卡
带有自定义剪裁背景路径、挂钩镂空、倾斜照片层和透明胶带的服装吊牌式容器。
搭配检查！
用分层纸张、倾斜媒体和胶带细节呈现醒目的产品卡片。
模式卡
为游戏模式、活动列表或粉丝门户区块展示可复用的内容卡片。
动画 & 反馈
InView 动画
滚动触发动画 — 试试向下滚动再滚回来
左
上
右
弹出
下落
慢落
交错 1
交错 2
交错 3
交错 4
加载器
本地鱿鱼字形资源搭配墨色背景
Loading默认
Loading蓝色
Loading红色
Loading自定义
Loading变形
Loading游泳蓝
标签页
标签切换器
带斜切标签触发器和墨色主题样式
按钮、卡片、对话框等
地图
撕裂纸张卡片
用于密集公告卡片的宽幅撕裂纸背景变体。
组件套件加成
使用此撕裂纸张卡片展示发布说明、设置技巧或简洁的功能介绍。
- 用强力标题配短正文实现快速浏览。
- 当公告需要多个具体细节时使用列表内容。
- 将装饰性胶带和贴纸放在阅读顺序之外。
- 在不改变卡片结构的情况下按区块调整颜色主题。
这是一张个人资料卡
放入简短简介、功能描述或贡献者介绍。
……这是另一个变体
更换纸张形状和颜色，同时保持相同的可读布局。
订书钉卡片
新闻网格
网格新闻卡
使用带角部订书钉和胶带点缀的新网格卡片布局构建。
新闻网格
辅助故事块
非常适合促销活动、限量发售更新和季节性信息流卡片。
卡片网格
带胶带框架的区块标题和网格布局，适用于充满活力的杂志风粉丝页面。
场景更新
媒体块
响应式布局，包含固定比例图片井、涂鸦背景艺术和可复用徽章槽。
带自动列换行和一致间距的响应式卡片网格。
媒体特写
响应式图片背景网格单元
自动流
自动列换行
间距令牌
一致的区块节奏
杂志堆叠
密集布局模块
轮播
专为墨水风画廊和粉丝门户调优的轮播组件。
信息流轮播
滑动或点击以浏览堆叠的信息流卡片。
活动简报
使用精选公共媒体的图片信息流卡片。
精选媒体支撑的演示卡片
地图面板
带倾斜订书钉外壳和精选场景艺术的卡片。
精选媒体支撑的演示卡片
对战框架
用于堆叠轮播动效的响应式媒体裁剪。
精选媒体支撑的演示卡片
模式卡
密集粉丝门户的可复用信息流模式。
精选媒体支撑的演示卡片
画廊截图
精选艺术使演示贴近参考语言。
精选媒体支撑的演示卡片
涂鸦便签
用于紧凑更新的图形面板艺术。
精选媒体支撑的演示卡片
Slide 3 of 6
武器画廊
带旋转过渡和分页点的图片画廊，通过箭头控制顺序浏览。
Loadout Panel 1
Carousel frame using curated weapon reference artwork.
Loadout Panel 2
Rotated media shell with curated source imagery.
Loadout Panel 3
High-contrast gallery card for dense media pages.
Loadout Panel 4
Responsive photo frame with tape and sticker accents.
Loadout Panel 5
Sequential carousel state with fixed image rhythm.
Loadout Panel 6
Reusable feature card for component-heavy sections.
Slide 1 of 6
商店画廊
带图片分页的画廊。每个内容包都有独特的本地参考图标。
Media Kit
Frames, carousels, and gallery controls for image-heavy layouts.
Control Kit
Buttons, pagination, and navigation controls with bold silhouettes.
Surface Kit
Cards, tags, torn-paper surfaces, and layered content panels.
Overlay Kit
Dialogs, sheets, popovers, and full-screen media flows.
Feedback Kit
Alerts, progress indicators, loaders, and stateful UI feedback.
Slide 1 of 5
无限跑马灯
使用精选武器参考艺术的连续滚动跑马灯，复制以实现无缝循环。
Slide 1 of 22
表单 & 反馈
表单控件、提示和进度指示器。
输入 & 选择
带粗边框和墨水主题点缀的表单控件
语言
队列
涂地真格打工
提示框
带胶带和贴纸装饰的撕裂纸提示卡
表面通知
此提示状态专为中性更新、验证说明和组件级状态消息调优。
需要操作
破坏性提示为验证失败和关键组件状态保持高对比度。