TanStack
Featured
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.
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It combines high‑quality visual effects (domain‑warped fbm, ACES tonemapping) with extreme simplicity — no package install, just copy the source into your project — making premium shader art accessible to any developer.
Who it is for
- React developers building landing pages
- Design‑conscious front‑end engineers
- Developers who want quick, beautiful hero animations without heavy dependencies
- Creative coders exploring real‑time GLSL effects
Use cases
- Animated hero backgrounds for marketing sites
- Full‑page gradient overlays in web apps
- Dynamic banners or splash screens
- Interactive art installations that need flowing light
Strengths
- Zero‑install distribution via clipboard copy
- Highly customizable with 10 props (colors, rotation, zoom, etc.)
- Built on open‑source Paper Shaders and well‑known domain warping techniques
- Performant single‑pass WebGL2 fragment shader with ACES tonemapping
Considerations
- Requires WebGL2 support (not available in older browsers)
- Currently only provided as a React component (no vanilla JS or Vue version)
- Shader complexity may cause performance issues on low‑end devices if not tuned
README quick start
FoldGradient
Soft, flowing sheets of light for your next hero section. A custom Paper Shader, distributed the simplest way possible: you copy the source.
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 componentsrc/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
Description
Soft, flowing sheets of light. A custom Paper Shader you copy straight into your React app.
Related repositories
Similar projects matched by category, topics, and programming language.
vercel-labs
Featured
scriptc
scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.
Jakubantalik
Featured
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.