2026 · PERSONAL FRONTEND TECH LAB

前端技术
实验室

THREE.JS × ANIME.JS × GSAP × WEBGL SHADER

SCROLL
0
沉浸式实验
0
核心技术栈
0
FPS 流畅渲染
0
单场景粒子数

技术矩阵
THE MATRIX

每个实验舱都是一页全屏沉浸式 Demo,实时渲染、可交互。点进去,亲手玩玩这些前沿前端技术。

EXP·01 01
粒子星云 · 真实画面

粒子星云

PARTICLE GALAXY

6 万颗 GPU 粒子组成的螺旋星系,加法混合发光,鼠标移动产生视差,感受 WebGL 的暴力美学。

Three.jsGLSL ShaderPoints
进入实验 →
EXP·02 02
Shader 艺术 · 真实画面

Shader 艺术

FRAGMENT SHADER ART

纯数学画出来的迷幻万花筒:分形噪声 + 余弦调色板,每个像素都是实时算出来的,鼠标参与构图。

WebGLfbm 噪声Kaleidoscope
进入实验 →
EXP·03 03
anime.js 实验室 · 真实画面

anime.js 实验室

ANIME.JS PLAYGROUND

点阵涟漪、SVG 描边动画、可拖拽的弹性小球 —— 把 anime.js 最招牌的玩法一次秀个够。

anime.jsStaggerSpring 物理
进入实验 →
EXP·04 04
文字动效 · 真实画面

文字动效

TEXT IN MOTION

字符级拆散重组:鼠标磁场波、Scramble 乱码解码、无限波浪字 —— 让文字本身成为主角。

字符动画Scramble鼠标交互
进入实验 →
EXP·05 05
交互球体 · 真实画面

交互球体

DISTORTION SPHERE

顶点着色器 + 3D 单纯形噪声实时扭曲的赛博球体,菲涅尔边缘光,可以上手拖拽旋转。

Vertex ShaderSimplex NoiseFresnel
进入实验 →
EXP·06 06
粒子文字 · 真实画面

粒子文字

PARTICLE TYPOGRAPHY

上千颗粒子从四面八方飞来,自动聚拢成文字;鼠标一扫立刻炸开四散逃窜,松手又被弹簧一颗颗拽回原位。像素采样 + 弹簧物理 + 鼠标力场,全场最解压的交互,没有之一。

Canvas 2D弹簧物理像素采样鼠标力场
进入实验 →
THREE.JS✦ANIME.JS✦GSAP✦WEBGL✦GLSL SHADER✦LENIS✦