
活动通告
提示表面
精选媒体支撑的卡片模式,用于限时公告、状态面板和操作提示。


页面过渡WebGL 墨水飞溅 — 着色器驱动的覆盖与揭幕效果

交互式组件预览

交互式组件预览


胶带标题 & 标题条

区块标题

服装标签卡

按钮 & 徽章带墨水飞溅 SVG 箭头和主题配色的圆形弹性图标按钮。
6 种颜色主题 · 尺寸属性可覆盖变体默认值
弹压 · 脉冲 · 禁用 · 自定义图标


弹层 & 对话框模态对话框、侧边抽屉、上下文气泡,以及粉丝自制全屏墨水飞溅图案。
带旋转效果和警示胶带的纸张撕裂模态框
媒体内容专用沉浸式遮罩层 — 使用 fullScreen 属性
侧边抽屉、上下文菜单和提示


服装吊牌卡带有自定义剪裁背景路径、挂钩镂空、倾斜照片层和透明胶带的服装吊牌式容器。



用分层纸张、倾斜媒体和胶带细节呈现醒目的产品卡片。



为游戏模式、活动列表或粉丝门户区块展示可复用的内容卡片。


动画 & 反馈
Loading默认
Loading蓝色
Loading红色
Loading自定义

标签页按钮、卡片、对话框等
地图


撕裂纸张卡片用于密集公告卡片的宽幅撕裂纸背景变体。


使用此撕裂纸张卡片展示发布说明、设置技巧或简洁的功能介绍。


放入简短简介、功能描述或贡献者介绍。




更换纸张形状和颜色,同时保持相同的可读布局。


订书钉卡片
新闻网格
使用带角部订书钉和胶带点缀的新网格卡片布局构建。


新闻网格
非常适合促销活动、限量发售更新和季节性信息流卡片。



卡片网格带胶带框架的区块标题和网格布局,适用于充满活力的杂志风粉丝页面。


活动通告
精选媒体支撑的卡片模式,用于限时公告、状态面板和操作提示。


场景更新
响应式布局,包含固定比例图片井、涂鸦背景艺术和可复用徽章槽。
带自动列换行和一致间距的响应式卡片网格。

响应式图片背景网格单元

自动列换行

一致的区块节奏
密集布局模块


轮播专为墨水风画廊和粉丝门户调优的轮播组件。
滑动或点击以浏览堆叠的信息流卡片。

活动简报
使用精选公共媒体的图片信息流卡片。
精选媒体支撑的演示卡片


地图面板
带倾斜订书钉外壳和精选场景艺术的卡片。
精选媒体支撑的演示卡片


对战框架
用于堆叠轮播动效的响应式媒体裁剪。
精选媒体支撑的演示卡片


模式卡
密集粉丝门户的可复用信息流模式。
精选媒体支撑的演示卡片


画廊截图
精选艺术使演示贴近参考语言。
精选媒体支撑的演示卡片


涂鸦便签
用于紧凑更新的图形面板艺术。
精选媒体支撑的演示卡片

带旋转过渡和分页点的图片画廊,通过箭头控制顺序浏览。





Carousel frame using curated weapon reference artwork.





Rotated media shell with curated source imagery.





High-contrast gallery card for dense media pages.





Responsive photo frame with tape and sticker accents.





Sequential carousel state with fixed image rhythm.





Reusable feature card for component-heavy sections.
带图片分页的画廊。每个内容包都有独特的本地参考图标。



Frames, carousels, and gallery controls for image-heavy layouts.



Buttons, pagination, and navigation controls with bold silhouettes.



Cards, tags, torn-paper surfaces, and layered content panels.



Dialogs, sheets, popovers, and full-screen media flows.



Alerts, progress indicators, loaders, and stateful UI feedback.
使用精选武器参考艺术的连续滚动跑马灯,复制以实现无缝循环。




































































表单 & 反馈表单控件、提示和进度指示器。


此提示状态专为中性更新、验证说明和组件级状态消息调优。




破坏性提示为验证失败和关键组件状态保持高对比度。