// shine's lab

玩一玩的
Demo 合集

记录一些有趣的前端实验、可视化项目和工具原型，想到啥就做啥。

0
DEMOS
∞
IDEAS
2026
SINCE
// projects
♫ AUDIO VIZ
Web AudioCanvasFFT
Audio Visualizer
WebGL 音频频谱可视化 — 圆形频谱、海波、粒子与矩阵四种渲染模式。
2026-06 →
● PHYSICS
Matter.jsPhysicsCanvas
Physics Playground
Matter.js 2D 物理引擎 — 点击生成物体，拖拽交互，重力切换与爆炸效果。
2026-06 →
◆ HOLO-CITY
WebGPURenderGroupBlendMode
Cyberpunk Holo-City
赛博朋克全息城市 — GPU 相机视差，全息扫描环，48栋霓虹建筑，20+ Photoshop 混合模式。
2026-06 →
◈ GLASSMORPHISM
BlurFilterGradient TextContainer Tint
Glassmorphism Dream
毛玻璃拟物幻境 — 6 张渐变磨砂玻璃卡片，动态径向渐变球体，层叠深度视差，hover 强化模糊。
2026-06 →
▣ NEON TERMINAL
SplitTextSVG GraphicsGradient Fill
Neon Terminal
霓虹赛博终端 — SplitText 逐字动画，Matrix 数据洪流，SVG 路径装饰，渐变文字，Glitch Overload。
2026-06 →
✨ FINGER FIREWORK
MediaPipeCanvas手势交互
Finger Firework
食指 + 拇指捏合，绽放烟花。基于 MediaPipe 手部检测的实时手势交互。
2026-06 →
♠ CARD MAGIC
数学原理算法魔术
Card Magic
基于数学原理的纸牌魔术 — 看似随机，实则确定。输入信息，见证数学的魔力。
2026-06 →
◈ RAY TRACING
Three.jsWebGL全局光照
Ray Tracing
实时全局光照 — 反射、折射、软阴影、环境光遮蔽。
2026-07 →
RETRO ARCADE
Canvas像素风5 合 1中文
复古街机厅 Retro Arcade
5 款复古像素小游戏 — 贪吃蛇 / 俄罗斯方块 / 太空侵略者 / 吃豆人 / 打砖块。键盘 + 鼠标 + 触屏全支持，默认中文界面，自动记录最高分。
2026-07 →
shine@demo.xuwx.top:~
❯whoami
  shine · Java 全栀工程师 · 11 年经验 · 湖北十堰
❯cat tech-stack.txt
  backend: Spring Boot · Spring Cloud · MyBatis-Plus
  frontend: Vue · React · Three.js · WebGL
  infra: Nacos · RocketMQ · Redis · MySQL
❯