Paper Shaders

项目概述

Paper Shaders 是由 Paper Design 团队开源的零依赖 WebGL 着色器组件库。无需安装庞大的 Three.js 依赖，仅凭轻量级 GLSL 片元着色器，即可为 React 网站注入工作室级的流体噪波、光影折射与动态生成背景。

核心特性

• ⚡️ 零外部运行依赖：底层直接操控 WebGL 上下文，打包体积比传统 Three.js 缩减 90%。
• 艺术级流体生成背景：提供液体流光、网格噪波（Mesh Noise）、色散渐变与光标引力波纹。
• Next.js 与服务端渲染原生支持：严格遵循 'use client' 客户端渲染约定，水合顺畅。
• 🎨 丰富参数自由调色：支持通过 React Props 直接调节着色器速度、噪波频率与多阶段渐变色。

快速上手与示例代码

npm install @paper-design/shaders-react

import { FluidShader } from '@paper-design/shaders-react';

export default function HeroSection() {
  return (
    <div className="relative w-full h-[400px] overflow-hidden rounded-2xl">
      <FluidShader color1="#3b82f6" color2="#8b5cf6" speed={0.6} />
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：现代 SaaS 产品首页 Hero 大背景、AI 工具创意主页、设计工作室官网及高端作品集。
• 不适用场景：低配移动设备或无 GPU 算力支持的纯文本静态页面。