为什么值得关注

它将高质量视觉效果（域扭曲 fbm、ACES 色调映射）与极致简洁相结合——无需安装包，直接复制源码即可——让高级着色器艺术对任何开发者都触手可及。

适合谁使用

构建落地页的 React 开发者
注重视觉的前端工程师
希望快速获得漂亮英雄动画且不增加依赖的开发者
探索实时 GLSL 效果的创意编码者

典型使用场景

营销网站的动态英雄背景
Web 应用中的全屏渐变覆盖层
动态横幅或启动画面
需要流动光的交互式艺术装置

项目优势

通过剪贴板复制实现零安装分发
10 个属性（颜色、旋转、缩放等）高度可定制
基于开源 Paper Shaders 和成熟的域扭曲技术
单通道 WebGL2 片段着色器，含 ACES 色调映射，性能良好

使用前须知

需要 WebGL2 支持（旧浏览器不可用）
目前仅提供 React 组件（无原生 JS 或 Vue 版本）
着色器复杂度可能在低端设备上引发性能问题（需调整参数）

README 快速开始

FoldGradient

Soft, flowing sheets of light for your next hero section. A custom Paper Shader, distributed the simplest way possible: you copy the source.

Live demo →

How to use it

No npm package. On the demo site, hit Copy for your agent — your clipboard gets a self-contained prompt with the full component and shader source. Paste it into your coding agent (Claude Code, Cursor, etc.) and it installs itself into your project.

Prefer to do it by hand? Grab the two files and one dependency:

pnpm add @paper-design/shaders-react

src/FoldGradient.tsx — the React component
src/foldGradientShader.ts — the GLSL

Props

Prop	Default	Description
`colors`	Grain palette	Up to 5 stops, darkest → hottest. Bright sheet edges reach the last stop.
`bgColor`	`#121212`	Colour of the dark gaps between sheets
`shadowColor`	`#0a1c2a`	Tint that bleeds into shadowed edges
`softness`	`1`	0–2, higher is softer
`saturation`	`1`	0–2, 0 is mono
`rotation`	`52`	Drape angle in degrees
`zoom`	`9`	4–18, higher means bigger sheets
`ribbon`	`0`	0–1, blends in discrete strip cuts
`ribbonWidth`	`1`	Strip width multiplier for ribbon mode
`speed`	`1`	Animation speed, 0 freezes

How it works

A single-pass WebGL2 fragment shader mounted on Paper's open-source ``:

Three levels of domain-warped fbm (fbm(p + 1.76·fbm(p + 4·fbm(p)))), the technique popularized by Inigo Quilez
Derivative-based lighting with a directional smear for the raked-light look
ACES tonemapping, linear-light palette blending, ordered dithering

Running the demo locally

pnpm install
pnpm dev

Credits

Built on Paper Shaders by Paper — open source and free, as of their v1 release
Aesthetic inspired by Raycast's wallpapers (this project is not affiliated with Raycast)
Domain warping after Inigo Quilez
Dev controls by DialKit

MIT — do what

项目描述

Soft, flowing sheets of light. A custom Paper Shader you copy straight into your React app.

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

TanStack

精选

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web 开发前端框架

14,861

vercel-labs

精选

scriptc

scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.

开发者工具代码质量与构建

1,985

Jakubantalik

精选

thinking-orbs

A React component library that renders six hand-tuned animated thought orb loading indicators on a plain 2D canvas, with two purpose-tuned sizes and automatic theme detection for AI and agent UIs.

AI 与机器学习AI 智能体

1,191