3D全景地球
Three.js WebGPU 电影级 3D 地球全景 — 带日食、城市灯光和实时调参的网页特效这是一款电影级 3D 地球效果，基于 Three.js WebGPU 技术实现。地球可以自由拖动旋转，白天能看清地形和海洋反光，转到夜晚就是密密麻麻的城市灯光，云层会在地面投下影子，边缘还有一圈...
3D魔方
Three.js 3D 魔方全息画廊 - 支持切换多个面自动复原魔方，并展示复原全过程动画这是一款魔方全息画廊效果，基于 Three.js + Canvas API + CSS3 技术实现。页面中央是一个可自由旋转的 3D 魔方，六个面分别对应一套用 Canvas 程序化生成的数字画...
霍普夫纤维化
沉浸式 3D 数学可视化背景 | 基于 Three.js 与 GLSL 着色器的实时渲染组件这是一款以霍普夫纤维化（Hopf Fibration）为核心的沉浸式 3D 数学可视化组件，基于 Three.js + GLSL 着色器 技术实现。它通过对 S³ 球面纤维的实时立体投影，将高维...
倾斜高亮文本标记
CSS 动态倾斜渐变下划线与荧光笔高亮文本交互效果这是一款动态倾斜渐变高亮与下划线文本交互效果，基于 CSS（渐变背景与悬停动画） 技术实现。默认状态下，文字下方呈现带有倾斜切角炫彩下划线；当鼠标悬停时，下划线会平滑展开为覆盖整段文字的倾斜荧光...
斜向轮播
HTML中实现斜向轨迹画廊轮播| 动态空间感卡片切换效果这是一款斜向轨迹画廊轮播（Diagonal Carousel）组件，基于 React + Motion (Framer Motion) 技术实现。打破了传统水平或垂直轮播的沉闷感，卡片在切换时沿...
文件夹相册
支持收纳与弧形展开交互动画的毛玻璃质感文件夹相册（CSS+JS）这是一款相册文件夹展开收拢交互动画效果，基于 React 与 Motion (Framer Motion) 技术实现。点击文件夹时，拍立得风格的照片会沿着弧形轨迹优雅地展开呈网格排列；再次点击时...
调色盘
CSS color-mix() 与 OKLCH 色彩空间交互式混色调色盘这是一款动态色彩混合与实时预览交互效果，基于 CSS color-mix() 函数 (OKLCH 色彩空间) 与 JS 技术实现。用户只需选择颜色对并拖动滑块，即可实时调配两种颜色的融合比例并同...
TRPG辅助工具
View Transitions API 实战：森林风 DnD 跑团角色卡交互界面这是一款森林奇幻风格的 DnD 5e 数字角色卡界面，基于 HTML5 + CSS + JS (View Transitions API) 技术实现。它将复杂的跑团数据表拆分为多个清晰模块，并通...
手绘抖动动画
Rough.js 实现手绘线条抖动动画（Line Boil）| Canvas 动态涂鸦效果这是一款手绘风线条抖动（Line Boil）效果，基于 Canvas + Rough.js 技术实现，能够将原本平实的矢量图标实时重绘为充满质感的草图形态。通过持续刷新路径产生微小的随机抖动，巧...
文本高亮
CSS Custom Highlight API 实现无 DOM 污染的文本分类高亮效果这是一款动态多色文本分类高亮效果，基于 JS (CSS Custom Highlight API) 与 CSS 技术实现。它无需像传统方案那样在页面中插入大量 <span> 标签，就能以原生的方...
太空射击网页小游戏
基于HTML5 Canvas实现的原生 JS 太空射击小游戏这是一款经典的太空陨石射击HTML网页小游戏，基于HTML5 Canvas与原生JavaScript技术实现。画面采用极简的复古矢量线框美术风格，搭配流畅的物理碰撞、爆炸粒子动画、动态背景音效以...
提线木偶特效
HTML5网页提线木偶交互特效 | CSS3与SVG动态视觉舞台这是一款提线木偶交互舞台效果，基于 CSS3、SVG 与 JavaScript Canvas 技术实现，通过实时计算 SVG 贝塞尔线条连接木偶关节，结合光影粒子与状态机驱动丰富多样且生动的肢体...