✦ 交互体验 · 三维视觉 · 创意边界

星穹漫游

以代码为笔,在 三维空间 中绘制交互艺术的边界
融合粒子系统 · 动态光照 · 沉浸体验

探索能力 ↓ 查看作品
SCROLL

前端技术的边界

从三维渲染到交互动画,从视觉设计到性能优化——不断探索 Web 平台的极限

🌌

三维图形引擎

基于 Three.js 构建沉浸式 3D 场景,支持粒子系统、动态光照、自定义着色器与后处理特效

Three.jsWebGLGLSLShader

交互动画系统

流畅的 60fps 动画管线,支持鼠标追踪、视差滚动、元素入场动效与手势交互

CSS AnimationRAFIntersectionObserverPointerEvents
🎨

视觉设计体系

玻璃拟态、渐变光效、动态色彩系统、响应式布局——打造极致视觉体验

GlassmorphismCSS GradientsFlex/GridClamp()

性能优化策略

GPU 加速渲染、动画帧调度、懒加载与虚拟化——在华丽与流畅间取得平衡

GPU CompositingRequestAnimationFrameWill-changeLazy Loading
🔮

创意编码

生成式艺术、数据可视化、音频可视化——用代码创造无限可能

Creative CodingSVGCanvas 2DMath
🌐

全栈交付

从设计稿到生产部署,Cloudflare Pages 一键发布,CDN 加速全球访问

CloudflareCI/CDResponsiveSEO
0
框架经验
0
项目交付
0
FPS 渲染
0
年经验

精选项目

每一次探索都是对技术边界的突破

三维粒子宇宙

Three.js 粒子系统 · 10 万粒子实时渲染 · 交互式视角

交互动画系统

GSAP 驱动 · 滚动触发动画 · 视差效果 · 60fps 流畅体验

视觉设计系统

响应式布局 · 暗色主题 · 玻璃拟态 · 动态色彩体系

探索之路

从基础到前沿,持续拓展前端能力的边界

三维交互时代

Three.js · WebGL · 沉浸体验

将三维渲染带入 Web 端,实现实时粒子系统、动态光照与后处理特效

动画系统架构

60fps 管线 · 交互动画 · 性能优化

构建从帧调度到 GPU 加速的完整动画体系,确保复杂场景下的流畅体验

设计工程化

Design System · 响应式 · 组件化

将视觉设计转化为可维护的工程体系,实现从像素到代码的无缝衔接

全栈交付流水线

Cloudflare · CI/CD · 自动化部署

打通从开发到部署的全链路,EdgeOne 与 Cloudflare Pages 双平台分发