Viscose-carousel 是一个基于 Next.js、React、Three.js 和 WebGL Shader 的创意作品集轮播项目。它不是传统 DOM 卡片轮播，而是将整个卡片环、黏连效果、拉丝线程、玻璃折射边缘和鼠标标签放在一个全屏 fragment shader 中渲染，实现类似“黏性液体/纤维拉丝”的视觉交互效果。用户可以通过滚动、拖拽、滑动、悬停和点击来旋转作品环，适合用作高视觉冲击力的个人作品集、创意工作室官网首页或 WebGL 动效实验参考。
适用领域
前端开发 / WebGL / Three.js / Shader 编程 / 创意交互 / 作品集网站 / 视觉设计 / Next.js 应用 / 动效设计 / 数字艺术
配置难度
中高级。普通 React/Next.js 开发者可以完成安装和内容替换，但如果要深入修改视觉效果、shader、SDF 融合逻辑、响应式参数和性能表现，需要具备 Three.js、GLSL/WebGL、动画调试和图形学基础。
商业价值
该项目的商业价值主要体现在高端视觉展示和品牌差异化上。它适合用于设计师、创意工作室、影视/动态设计团队、艺术家和高端数字产品官网，能够快速形成强烈的第一屏记忆点。作为源码学习项目，它也有较高技术参考价值。不过直接商业化前必须替换未授权图片和字体，并补齐详情页跳转、无障碍、移动端适配、性能优化和测试保障。
01
技术亮点
- 整个轮播主体由单个全屏 fragment shader 渲染，技术实现非常有辨识度
- 卡片之间通过 SDF 和 smooth minimum 实现黏连、融合、拉丝效果，不是简单的 CSS 或 Canvas 动画
- 支持滚动、拖拽、滑动、悬停、点击居中等多种交互
- 视觉效果强，适合高端作品集、创意官网和技术展示
- 开发环境内置 lil-gui 参数面板，便于实时调试视觉细节
- 项目结构清晰，核心模块包括 Carousel、projects、params、atlas、meta、shader 等
- 加载过程与入场动画结合，首张卡片优先加载，视觉体验更完整
- README 对实现思路、资源许可、已知问题和自定义方式说明较详细
- MIT 许可覆盖源代码，便于学习和二次开发
02
目标用户
- 希望打造高级作品集网站的前端开发者
- 熟悉 React/Next.js 并想学习 WebGL Shader 的开发者
- 创意开发者、互动设计师、视觉工程师
- 设计工作室、动画工作室、品牌官网开发团队
- 想研究 SDF、smooth minimum、gooey effect、WebGL 单 draw call 渲染的技术人员
- 希望复用或改造高端视觉轮播组件的独立开发者
03
配置要求
- Node.js 版本要求：20+
- 主要技术栈：Next.js 16、React 19、Three.js r185、GSAP、Tailwind CSS v4
- 项目数据配置位于 components/ring/projects.js，可替换作品图片、名称、类型和年份
- 图片资源放在 public/ 目录中，并在 projects.js 中引用
- 视觉参数集中在 components/ring/params.js 中，包括卡片尺寸、环半径、动效、鼠标交互、玻璃效果、honey 拉丝效果等
- 开发环境下会动态加载 lil-gui 调试面板，可实时调节约 136 个参数
- 字体声明在 app/globals.css 中，同时在 components/ring/params.js 中按字体名引用，替换字体时两处都需要同步修改
- 商业使用前必须替换未授权的示例图片和 PP Neue Montreal 字体
- 修改 shader 后需要在浏览器中实际运行验证，因为 GLSL 错误可能不会在 npm run build 阶段暴露
04
适用场景
- 个人作品集首页，用于展示设计、摄影、动态影像、品牌项目等
- 创意工作室官网首屏交互展示
- WebGL Shader 动效学习案例
- Three.js 与 React/Next.js 集成示例
- 研究如何用单个 fragment shader 渲染复杂 UI/视觉效果
- 作为视觉特效原型，用于商业官网、艺术展览页面或品牌 Campaign 页面
- 学习基于 signed distance fields 的卡片融合、拉丝和玻璃折射效果
05
部署与配置
- 确保本机安装 Node.js 20 或更高版本
- 克隆仓库：git clone https://github.com/Yousuf-developer/viscose.git
- 进入项目目录：cd viscose
- 安装依赖：npm install
- 启动开发服务器：npm run dev
- 浏览器打开：http://localhost:3000
- 生产构建：npm run build
- 启动生产版本：npm start
- 代码检查：npm run lint
06
风险与注意事项
- 仓库元数据中 license 为 NOASSERTION，但 README 声称源码为 MIT；实际使用前应确认 LICENSE 文件内容
- public/ 中的示例图片不是作者原创，也不受 MIT 许可覆盖，不能直接用于商业项目
- PP Neue Montreal 字体仅供本地开发和评估，不允许随项目商业使用，商业上线必须购买授权或替换字体
- 目前点击卡片只会居中，不会跳转到详情页，业务闭环尚未完成
- 没有 reduced-motion 支持，对晕动敏感用户和无障碍体验不友好
- 没有键盘控制，无法通过方向键或项目列表导航
- 移动端尤其是 500px 以下宽度适配不够稳定
- 没有测试，主要依赖 build、lint 和浏览器运行验证
- GLSL shader 只在运行时编译，构建通过不代表 shader 没有错误
- 高度依赖 WebGL 和 GPU 性能，低端设备或旧浏览器可能出现性能问题
- 视觉参数较多，深度定制需要理解 shader、坐标系统和项目响应式模型
2026-08-22
第26名
新收录 · github_search
