A personal project.
A visual playground for exploring and customizing paper-shaders - beautiful WebGL shader components for React.
- 14+ Shader Effects - Mesh gradients, metaballs, noise patterns, and more
- Real-time Preview - See changes instantly as you adjust parameters
- Preset System - Save and load custom shader configurations
- Image Library - Upload and manage images for image-based shaders
- AI Gradient Extraction - Drop an image to extract gradient colors using Gemini AI
- Code Export - Copy React component code with your customizations
- Code Import - Paste shader code to load configurations
- Node.js 18+
- npm or pnpm
# Clone the repository
git clone https://github.com/your-username/PaperRun.git
cd PaperRun
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:5173
Create a .env file in the project root:
# Optional: Gemini API Key for AI gradient extraction
# Get your key from https://aistudio.google.com/apikey
VITE_GEMINI_API_KEY=your-api-key-hereThe Gemini API key is optional - the app works without it, but AI gradient extraction from images will be disabled.
| Shader | Description |
|---|---|
| Mesh Gradient | Animated flowing mesh gradient |
| Static Mesh Gradient | Non-animated mesh gradient |
| Static Radial Gradient | Radial gradient with customizable colors |
| Grain Gradient | Gradient with film grain texture |
| Color Panels | Animated color panel transitions |
| Simplex Noise | Organic noise patterns |
| Perlin Noise | Classic Perlin noise visualization |
| Neuro Noise | Neural network-inspired patterns |
| Voronoi | Voronoi cell patterns |
| Metaballs | Animated blob-like shapes |
| Warp | Image warping effect |
| Swirl | Swirling animation effect |
| Dot Orbit | Orbiting dot patterns |
| God Rays | Volumetric light rays |
| Heatmap | Heat map visualization |
| Liquid Metal | Metallic reflection effect |
- Select a Shader - Click the shader selector at the top to browse available shaders
- Customize Properties - Use the sliders to adjust shader parameters
- Change Colors - Click color swatches to open the color picker
- Edit Gradients - Click the gradient bar to modify gradient colors
Some shaders (Warp, Swirl, Liquid Metal, etc.) accept images:
- Upload Image - Click the dropzone or drag & drop an image
- Use Library - Click the library tile to select from saved images
- Save to Library - Uploaded images are automatically saved
- Save Preset - Click the
+button in the presets carousel - Load Preset - Click any preset thumbnail to apply it
- Presets persist - Saved using IndexedDB in your browser
The CODE section shows the React component code for your current configuration:
<MeshGradient
colors={["#FFC391", "#E491FF", "#6270C8", "#133B94"]}
distortion={0.8}
swirl={0.1}
speed={1}
/>- Copy code - Click "Copy code" to copy to clipboard
- Paste - Click "Paste" to import shader code from clipboard
src/
├── components/ # React components
│ ├── Canvas.tsx # Main shader preview
│ ├── Sidebar.tsx # Control panel
│ ├── controls/ # Slider, color picker components
│ └── ...
├── shaders/ # Shader configurations
├── lib/ # Utilities
│ ├── db.ts # IndexedDB for persistence
│ ├── gemini.ts # AI gradient extraction
│ └── ...
└── store.ts # Zustand state management
- React 19 - UI framework
- TypeScript - Type safety
- Vite - Build tool
- Tailwind CSS 4 - Styling
- DaisyUI - UI components
- Zustand - State management
- Framer Motion - Animations
- paper-shaders - WebGL shader components
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint- Push to GitHub
- Import project in Vercel
- Add environment variables if using AI features
- Deploy
npm run build
# Output in dist/ folderMIT