# FX Lab

> 99 个零依赖网页特效（WebGL2 着色器 / Canvas2D / DOM），每个都是可粘贴即用的代码片段。Canvas 特效以 draw(ctx,w,h,t,mx,my,state) 逐帧绘制，坐标为 CSS 像素（无悬停时 mx,my = -9999）；着色器编译时共用 PRE 头，提供 iResolution / iTime / iMouse；DOM 特效暴露 init(root)->{step,stop}。先按氛围（vibe）挑选，再抓取对应 .md 获取片段与运行约束。

氛围标签 vibe（先按意图匹配）：calm · ambient · meditative · minimal · elegant · cozy · energetic · playful · hypnotic · psychedelic · dramatic · aggressive · organic · geometric · technical · cultural · retro · futuristic。

## 生成
- [Gradient Flow](https://fx.rosuh.me/effects/gradient.md): 域扭曲 FBM · 跟随光标
- [Dot-Matrix Wave](https://fx.rosuh.me/effects/dots.md): 点阵波动 + 光标隆起
- [Metaballs](https://fx.rosuh.me/effects/metaballs.md): 有机融合光球
- [Aurora Ribbons](https://fx.rosuh.me/effects/aurora.md): 极光丝带
- [Ripple Grid](https://fx.rosuh.me/effects/ripple.md): 光标涟漪位移
- [Voronoi Cells](https://fx.rosuh.me/effects/voronoi.md): 细胞晶格 · 自然分形
- [Truchet Tiles](https://fx.rosuh.me/effects/truchet.md): 程序化迷宫纹
- [Kaleidoscope](https://fx.rosuh.me/effects/kaleido.md): 万花筒 · 曼陀罗
- [Raymarch SDF](https://fx.rosuh.me/effects/raymarch.md): 光线步进 · 旋转环面

## 后处理·印刷
- [Vaporwave Grid](https://fx.rosuh.me/effects/vapor.md): 落日 + 透视霓虹网格
- [Chromatic Glitch](https://fx.rosuh.me/effects/glitch.md): RGB 分离 + 扫描线

## 世界纹样
- [青海波](https://fx.rosuh.me/effects/seigaiha.md): 和风波纹
- [几何](https://fx.rosuh.me/effects/girih.md): 八角星镶嵌 · 金线
- [Celtic Knot](https://fx.rosuh.me/effects/celtic.md): 交织绳结 · 流光
- [Dot Painting](https://fx.rosuh.me/effects/aboriginal.md): 同心点画 · 大地色
- [水墨](https://fx.rosuh.me/effects/inkwash.md): 晕染笔触 · 跟手

## 设计流派
- [Op-Art Moiré](https://fx.rosuh.me/effects/opart.md): 莫尔条纹 · 错视
- [Bauhaus](https://fx.rosuh.me/effects/bauhaus.md): 三原色几何构成
- [Memphis 80s](https://fx.rosuh.me/effects/memphis.md): 撞色碎片 · 波普

## 数据·系统
- [Flow Field](https://fx.rosuh.me/effects/field.md): 粒子星座 · 光标搅动
- [Matrix Rain](https://fx.rosuh.me/effects/matrix.md): 片假名数字雨
- [Oscilloscope](https://fx.rosuh.me/effects/scope.md): 示波器波形 · 荧光
- [Starfield Warp](https://fx.rosuh.me/effects/starfield.md): 星空跃迁

## 交互
- [Decode Text](https://fx.rosuh.me/effects/scramble.md): 乱码归位
- [Magnetic Cursor](https://fx.rosuh.me/effects/magnetic.md): 磁吸自定义光标
- [Kinetic Type](https://fx.rosuh.me/effects/kinetic.md): 可变字重波动
- [Marquee Ticker](https://fx.rosuh.me/effects/marquee.md): 无缝跑马灯
- [3D Tilt Card](https://fx.rosuh.me/effects/tilt.md): 透视倾斜 · 跟手
- [Spotlight Mask](https://fx.rosuh.me/effects/spot.md): 光标聚光揭示

## 几何·曲线
- [Phyllotaxis](https://fx.rosuh.me/effects/phyllotaxis.md): 向日葵螺旋 · 黄金角
- [Rose Curve](https://fx.rosuh.me/effects/rose.md): 玫瑰线 · 玫瑰花形
- [Spirograph](https://fx.rosuh.me/effects/spiro.md): 万花尺 · 内旋轮线
- [Lissajous](https://fx.rosuh.me/effects/lissajous.md): 李萨如图形
- [Superformula](https://fx.rosuh.me/effects/superformula.md): 超公式 · 万象有机形
- [Hex Grid](https://fx.rosuh.me/effects/hexgrid.md): 六边形波动网格
- [Concentric](https://fx.rosuh.me/effects/concentric.md): 同心方 · 色相轮转
- [Spiral](https://fx.rosuh.me/effects/spiralarc.md): 阿基米德螺线
- [Chevron](https://fx.rosuh.me/effects/chevron.md): 人字折线 · 流动
- [Herringbone](https://fx.rosuh.me/effects/herringbone.md): 鱼骨拼贴
- [Polka Dots](https://fx.rosuh.me/effects/polka.md): 波点 · 呼吸
- [Houndstooth](https://fx.rosuh.me/effects/houndstooth.md): 千鸟格
- [Tartan Plaid](https://fx.rosuh.me/effects/plaid.md): 苏格兰格纹
- [Starburst](https://fx.rosuh.me/effects/starburst.md): 放射扇面
- [Wave Lines](https://fx.rosuh.me/effects/wavelines.md): 叠层正弦波带

## 分形·混沌
- [Lorenz](https://fx.rosuh.me/effects/lorenz.md): 洛伦兹蝴蝶
- [Dragon Curve](https://fx.rosuh.me/effects/dragon.md): 龙形曲线
- [Fractal Tree](https://fx.rosuh.me/effects/fractaltree.md): 分形树 · 风动

## 元胞·物理
- [Boids Flocking](https://fx.rosuh.me/effects/boids.md): 鸟群 · 跟手
- [Double Pendulum](https://fx.rosuh.me/effects/pendulum.md): 双摆混沌
- [Orbits](https://fx.rosuh.me/effects/orbits.md): 行星轨道

## 世界纹样 II
- [麻の葉](https://fx.rosuh.me/effects/asanoha.md): 麻叶几何
- [Kolam](https://fx.rosuh.me/effects/kolam.md): 点格环线
- [Greek Key](https://fx.rosuh.me/effects/greekkey.md): 回纹 · 流动
- [Aztec Step-Fret](https://fx.rosuh.me/effects/aztec.md): 阶梯回纹
- [Kente Cloth](https://fx.rosuh.me/effects/kente.md): 肯特织锦
- [Talavera](https://fx.rosuh.me/effects/talavera.md): 陶砖花
- [云纹](https://fx.rosuh.me/effects/cloud.md): 祥云回旋
- [Koru](https://fx.rosuh.me/effects/koru.md): 蕨芽螺旋
- [佩斯利](https://fx.rosuh.me/effects/paisley.md): 火腿纹 boteh

## 屏幕·信号
- [Copper Bars](https://fx.rosuh.me/effects/copperbars.md): 铜条 · Amiga
- [7-Segment](https://fx.rosuh.me/effects/sevenseg.md): 数码管 · 实时钟
- [LED Matrix](https://fx.rosuh.me/effects/ledmatrix.md): 点阵屏波动
- [Radar Sweep](https://fx.rosuh.me/effects/radar.md): 雷达扫描
- [EKG Monitor](https://fx.rosuh.me/effects/ekg.md): 心电图 · 滚动

## 交互·生成 II
- [Cursor Trail](https://fx.rosuh.me/effects/cursortrail.md): 彩虹拖尾
- [Crosshair HUD](https://fx.rosuh.me/effects/crosshair.md): 准星 + 坐标读出
- [Iron Filings](https://fx.rosuh.me/effects/ironfilings.md): 磁场铁屑
- [Vortex](https://fx.rosuh.me/effects/vortex.md): 粒子漩涡
- [Confetti](https://fx.rosuh.me/effects/confetti.md): 纸屑飘落
- [Fireworks](https://fx.rosuh.me/effects/fireworks.md): 烟花 · 点击放
- [Bokeh](https://fx.rosuh.me/effects/bokeh.md): 焦外光斑
- [Nebula](https://fx.rosuh.me/effects/nebula.md): 星云叠加
- [Lightning](https://fx.rosuh.me/effects/lightning.md): 闪电分叉
- [Neon Pipes](https://fx.rosuh.me/effects/neonpipes.md): 发光管线
- [Loaders](https://fx.rosuh.me/effects/spinners.md): 加载动画集
- [Wave Grid](https://fx.rosuh.me/effects/wavegrid.md): 透视波点阵
- [Audio Bars](https://fx.rosuh.me/effects/audiobars.md): 频谱律动

## 可选（重型 / 小众）
CPU 较重或非移动端友好的特效——上下文有限的 agent 可跳过。
- [Halftone CMYK](https://fx.rosuh.me/effects/halftone.md): 网点半调 · 套色
- [ASCII Field](https://fx.rosuh.me/effects/ascii.md): 字符明度场
- [Topographic](https://fx.rosuh.me/effects/topo.md): 等高线地形 · 跟手
- [Quasicrystal](https://fx.rosuh.me/effects/quasicrystal.md): 五重对称干涉
- [Interference](https://fx.rosuh.me/effects/interference.md): 双源波纹干涉
- [Mandelbrot](https://fx.rosuh.me/effects/mandelbrot.md): 曼德博集合 · 缩放
- [Julia Set](https://fx.rosuh.me/effects/julia.md): 朱利亚集 · 漂移
- [Clifford Attractor](https://fx.rosuh.me/effects/clifford.md): 奇异吸引子
- [De Jong](https://fx.rosuh.me/effects/dejong.md): 德容吸引子
- [Barnsley Fern](https://fx.rosuh.me/effects/fern.md): 分形蕨
- [Sierpinski](https://fx.rosuh.me/effects/sierpinski.md): 谢尔宾斯基三角
- [Game of Life](https://fx.rosuh.me/effects/life.md): 康威生命游戏
- [Brian's Brain](https://fx.rosuh.me/effects/briansbrain.md): 三态元胞
- [Langton's Ant](https://fx.rosuh.me/effects/langton.md): 兰顿蚂蚁
- [Doom Fire](https://fx.rosuh.me/effects/doomfire.md): 毁灭战士火焰
- [Falling Sand](https://fx.rosuh.me/effects/sandfall.md): 落沙模拟 · 跟手
- [Tunnel](https://fx.rosuh.me/effects/tunnel.md): 棋盘隧道
- [Plasma](https://fx.rosuh.me/effects/plasma.md): 经典等离子
- [Rotozoom](https://fx.rosuh.me/effects/rotozoom.md): 旋转缩放贴图
- [Water Ripple](https://fx.rosuh.me/effects/ripplewater.md): 水波高度场
- [Gooey Blob](https://fx.rosuh.me/effects/blobcursor.md): 融合光标
- [Heatmap](https://fx.rosuh.me/effects/heatmap.md): 噪声热力 · 跟手