UD5工具箱
在线算盘 - 拖动算珠学习算术
模拟中国算盘，拖动算珠表示数字，辅助理解十进制和珠算。
标签： 演示文稿工具
共 88+ 款工具运动后效演示 - 瀑布错觉螺旋图案
全屏旋转螺旋图案，注视片刻后停止，感受静止图案出现反向运动的错觉。
视觉后像演示 - 盯图后看白墙
显示强色彩图片，盯着中心30秒后切换到白屏，体验补色后像错觉。
视错觉库 - 交互体验著名错觉
收录多幅动态与静态视错觉，可调节参数观察效果，附科学解释。
四季成因互动演示 - 地轴倾角与光照
3D地球展示地轴倾角与公转，调节月份直观理解太阳直射点移动如何形成四季。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
图像纹理合成演示器 - 基于样图生成大图
上传一小块纹理样本，利用简单模板匹配算法无缝扩展填充成一张大图。
内置Web组件演示 - 原生自定义元素
展示一些常用内置HTML元素和自定义元素例子，提供代码复制。
Navigation API 演示 - 现代前端路由导航
使用新的 Navigation API 拦截导航、管理历史条目，构建类 SPA 体验。
权限撤销流程演示 - 重置地理位置等授权
显示当前已授予的权限，并提供方法引导用户手动撤销或重置浏览器权限。
CORS问题演示器 - 跨域错误说明
模拟发起跨域请求并显示错误，解释CORS机制和解决方案。
Web NFC 写入演示 - 向 NFC 标签写数据
使用 NDEF 格式向 NFC 标签写入文本、URL 或自定义记录。
Web Worker计算演示 - 后台斐波那契不卡顿
在主线程和Worker中分别计算大斐波那契数，对比界面的响应度。
采样定理演示 - 欠采样与混叠现象
调节采样频率，观察对正弦波的离散采样和重建效果，演示欠采样导致的频率混叠。
画中画文档演示 - Document Picture-in-Picture API
打开一个始终置顶的小窗口，在其中显示自定义内容（例如笔记/时钟），实验新API。
触摸事件测试区 - 手势识别演示
在指定区域进行触摸操作，实时显示触摸点坐标和识别的基础手势（滑动、捏合等）。
斯巴达棒密码演示 - 绕棍子写解密
模拟古代斯巴达人将羊皮纸绕在棍上写信息的方法，输入文本解密。
人眼极限分辨率演示 - 角分辨测试
显示渐小条纹，测试你能分辨的最小视角，对照理论视网膜细胞密度。
数据分类演示器 - 手写数字k-NN模拟
在Canvas上手写数字，通过预训练的简单模型或k-NN演示实时预测数字标签。
加密媒体扩展演示 - EME 播放 DRM 内容示意
模拟 Encrypted Media Extensions 流程，展示如何请求许可证并播放受保护视频。
WebAuthn模拟器 - 创建与验证凭据
使用CTAP2模拟器或安全密钥在浏览器中体验无密码注册与认证流程。
结构化克隆演示 - 深拷贝支持类型
选择各种数据类型演示structuredClone的深拷贝能力，对比JSON.parse的限制。
自由手绘白板 - 无限画布与激光笔
使用鼠标或触控笔在无限画布上涂鸦，激光笔模式不留下痕迹，适合演示思路。
页面可见性检测演示 - Visibility API
实时显示当前页面可见状态，当切换标签页时记录时间并给出日志。
SQL注入演示平台 - 模拟漏洞与防护
构建一个虚拟的登录窗，演示SQL注入登录绕过，并展示参数化查询如何防范。
Web Component 生命周期演示 - 自定义元素钩子调用
创建一个自定义元素，展示 constructor、connectedCallback、attributeChangedCallback 等钩子的触发时机。
K-Means聚类演示器 - 交互式数据分类
在Canvas上随机撒点，运行K-Means算法，观察中心点迭代移动和簇的形成。
Credential Management演示 - 自动登录与存储
使用PasswordCredential和FederatedCredential存储用户登录信息，并实现一键自动登录。
文件系统访问演示 - File System Access API
使用现代浏览器文件系统访问API打开、编辑并保存本地文件，演示权限流程。
无障碍名称计算演示 - 元素的可访问名称来源
选择一个元素，展示浏览器如何根据 ARIA 属性、内容、label 等计算其可访问名称。
DOM 事件传播模拟器 - 捕获与冒泡阶段可视化
构建嵌套元素，触发事件并逐步显示事件流经路径，可切换捕获/冒泡模式。
航班动态查询模拟 - 演示航班延误信息
输入（虚拟）航班号，显示模拟的登机口、延误状态等，用于教学或演示。
SQL JOIN 类型交互演示 - 韦恩图与结果预览
选择表A和表B的样本数据，查看INNER/LEFT/RIGHT/FULL JOIN的韦恩图与实际输出结果。
ResizeObserver演示 - 响应元素尺寸变化
拖拽改变一个div的大小，通过ResizeObserver API实时显示其新的宽度和高度。
WebSocket 压缩扩展演示 - permessage-deflate 效果
建立带压缩扩展的 WebSocket 连接，对比压缩前后消息大小。
请求节流演示器 - 滑块/桶算法可视化
动画展示滑动窗口和令牌桶算法如何限制API请求速率，对比两者差异。
PWA安装横幅演示 - 触发beforeinstallprompt
演示如何拦截PWA安装事件并自定义安装按钮，查看浏览器原生安装提示效果。
滚动捕捉沙盒 - CSS Scroll Snap实验
调整滚动容器和子项的对齐方式、停止点，观察CSS Scroll Snap平滑滑动效果。
CSRF防护概念演示 - Token验证流程
模拟跨站请求伪造攻击以及如何通过CSRF Token进行防护的流程演示。
OAuth流程模拟器 - 授权码/PKCE演示
逐步演示OAuth 2.0授权码流程或PKCE流程，展示参数跳转和Token交换。
指针锁定 API 演示 - 3D 迷宫移动
使用指针锁定 API 在 3D 场景中控制视角移动，模拟 FPS 游戏鼠标控制。
发布订阅模式演示 - 自定义事件总线实现
可视化展示发布/订阅模式的运作，添加订阅者和发布者，查看事件流。
屏幕唤醒锁测试 - 保持常亮及事件监听
请求和释放屏幕唤醒锁，并监听释放事件，适用于视频播放或演示场景。
自动纠错演示 - 基于字典的拼写修复
输入错误文本，自动寻找最可能正确单词替换，展示编辑距离原理。
CSS级联层演示 - @layer优先级可视化
交互式调整@layer顺序和选择器，实时观察CSS级联层如何影响样式应用，学习现代特性。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
scheduler.postTask优先级演示 - 用户交互优先
使用scheduler.postTask API安排不同优先级的任务，并观察执行顺序。
可读流控制器 - 自定义ReadableStream
创建一个自定义ReadableStream，像生成器一样逐步推送数据，并用WritableStream消费。
WebGPU 计算着色器演示 - 并行矩阵乘法
使用 WebGPU 编写计算着色器执行矩阵乘法，对比 CPU 性能。
WebCodecs API 图像解码器 - 解码 JPEG/PNG 帧
使用 ImageDecoder API 解码图片并逐帧显示（若为动图），展示底层编解码能力。
在线要点演示器 - 类似PPT的极简演讲
输入Markdown风格要点列表，全屏展示时逐步放大当前项，类似非线性的展示。
HTML输入类型大全 - 所有type现场演示
展示所有HTML input type（text, password, date, color等）的渲染效果。
事件冒泡/捕获演示 - 交互模型可视化
嵌套的彩色方块，点击内层观察事件传播顺序，直观理解addEventListener的第三个参数。
页面生命周期事件演示 - freeze/resume等
展示页面从active到frozen等状态切换事件，记录日志，帮助理解浏览器优化机制。
数字滤波器设计器 - 低通/高通/带通
在Canvas上绘制理想频率响应，并应用简单FIR滤波器对合成信号进行滤波，听音效对比。
暗黑模式切换演示 - 三种实现对比
对比用CSS媒体查询、类名切换和localStorage持久化三种暗黑模式实现方式。
无限滚动演示 - Intersection Observer加载更多
演示如何用Intersection Observer实现滚动到底部自动加载内容的经典模式。
HTML Input 类型全览演示 - 每个type实时渲染
列出从text到color的所有input type，旁边实时展示控件的原生渲染，表单开发参考。
CSS颜色混合演示 - color-mix()实时预览
选择两个颜色和色彩空间，调整混合比例，实时预览并生成CSS color-mix()函数代码。
文本换行策略对比 - overflow/break演示
输入长单词或URL，切换overflow-wrap和word-break属性值，对比溢出自适应效果。