UD5工具箱
OffscreenCanvas性能演示 - Worker中绘图对比
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画，对比FPS和流畅度。
实时协作画板 - 通过WebSocket同步
📖 常见问题
默认使用浏览器原生 BroadcastChannel API 实现同一浏览器多标签页之间的实时通信。打开多个标签页访问同一房间即可体验协作。如需跨设备协作，可通过
window.collabPaint.setWebSocketUrl('wss://你的服务器') 配置WebSocket中继服务器，实现真正的远程多人协作。
支持画笔（自由绘制）、橡皮擦（透明擦除）、直线、矩形、圆形/椭圆和文字工具。可通过顶部工具栏切换，也支持键盘快捷键（P/E/L/R/C/T）。颜色和线条粗细均可自定义。
在同一浏览器中打开两个或多个标签页，访问相同的房间ID（默认为"public"），即可看到实时协作效果。在一个标签页绘制，另一个标签页会同步显示。不同标签页的用户光标也会实时展示。
支持。使用 Ctrl+Z 撤销，Ctrl+Y 重做，或点击工具栏的撤销/重做按钮。画布最多保存40步历史记录。注意：撤销操作会在协作会话中广播，其他用户也会看到撤销效果。
完全支持。画板针对移动端触摸操作进行了优化，支持手指绘制、形状拖拽等操作。工具栏在移动端会自动缩小适配屏幕，确保在手机和平板上都能流畅使用。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点，颜色平滑插值形成类似矢量网格渐变的梦幻背景。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
BroadcastChannel同步器 - 同源跨标签页通信
打开多个同源页面，通过Broadcast Channel API实时同步消息或状态变化。
图片幻灯生成器 - 序列帧转视频WebM
上传一组图片，设定每张展示秒数和转场，生成WebM视频幻灯。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
Web App Manifest 图标预览 - 模拟主屏图标效果
上传图标文件并设置背景色，模拟在 Android/iOS 主屏幕上的添加效果，检查视觉适配。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
多尺寸Favicon导出器 - 生成全平台图标包
上传一张原图，智能裁剪并输出从16x16到512x512的各尺寸ICO/PNG，适合网页与PWA。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
滚动驱动动画沙盒 - Animation Timeline演示
绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
Web Share API 实践器 - 调用系统分享对话框
触发系统原生分享，支持分享文本、链接与文件，检查浏览器兼容性与支持级别。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
无障碍多选下拉框生成器 - 复选框风格
创建带有复选框或标签的多选下拉列表，支持删除已选项，键盘可全控。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
流线绘制器 - 点选种子查看向量场
在预设向量场中点击放置种子，绘制通过该点的流线，表现场的方式。
范围滑块样式生成器 - 自定义input range外观
可视化配置范围滑块的轨道、滑块、填充颜色，生成跨浏览器的CSS代码。
宾果卡批量生成器 - 自定义内容主题卡
定义一组词汇或短语，批量生成不重复的5x5宾果卡片，适合活动或教学使用。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。