Ploy Effects
Add eye-catching WebGL effects to heroes, photos, and logos using Paper Shaders.
Ploy Effects installs shaders from Paper Shaders (npm package @paper-design/shaders-react) and tunes them to your site's design tokens. You pick an effect, and Ploy's Agent installs it, hydrates it in your Astro site, and checks reduced-motion behavior and performance.
Effects is rolling out. If you do not see the Add an Effect Ploybook or the effects browser yet, it is not enabled for your workspace.
What you can add
| Category | Use for | Examples |
|---|---|---|
| Backgrounds | Behind a hero or section | Mesh gradient, grain gradient, warp, swirl, noise fields |
| Image filters | Over a photo or product shot | Halftone, dither, fluted glass, water, paper texture |
| Logo animations | On a brand mark (transparent PNG) | Liquid metal, heatmap, gem smoke |
The first release includes 30 shaders from Paper Shaders. See live demos at shaders.paper.design.
Full catalog
| Category | Shaders |
|---|---|
| Backgrounds (20) | Mesh Gradient, Static Mesh Gradient, Static Radial Gradient, Grain Gradient, Dithering, Dot Orbit, Dot Grid, Warp, Spiral, Swirl, Waves, Neuro Noise, Perlin Noise, Simplex Noise, Voronoi, Pulsing Border, Metaballs, Color Panels, Smoke Ring, God Rays |
| Image filters (7) | Paper Texture, Fluted Glass, Water, Image Dithering, Halftone Dots, Halftone CMYK, Lens Distortion |
| Logo animations (3) | Heatmap, Liquid Metal, Gem Smoke |
How to add an effect
Ask Ploy's Agent
Describe the effect you want in a chat:
- "Add a mesh gradient background to the hero"
- "Put a halftone filter on the product photo"
- "Make the logo feel more alive with liquid metal"
- "Make the hero pop"
When your ask is open-ended, Ploy's Agent helps you choose an effect.
Run the Ploybook
Open Add an Effect (shader-effects) from Ploybooks for the guided flow. You pick a category, shortlist or browse the catalog, and install the effect. Ploy's Agent then fits its props to your brand and verifies the result.
Tips that keep effects looking on-brand
- One showpiece per view. Do not stack an animated background and an animated logo in the same viewport.
- Match brand energy. Restrained brands usually want slow mesh or grain gradients, or a static gradient. Bold brands can carry warp, swirl, or dither.
- Prefer static when you only need color. Static Mesh Gradient and Static Radial Gradient add color without ongoing GPU cost.
- Mount at most one WebGL canvas per page.
- Image filters and logo animations need an image. Filters wrap a photo. Logo animations need a transparent-ground PNG of the mark.
- Colors come from your design tokens. See Site Builder for how your design system works.
Effects vs other motion
Use Effects for distinctive shader showpieces. For scroll reveals, fade-ups, staggered grids, and split-text heroes, ask Ploy's Agent for an ordinary animation instead.
Attribution
Effects are powered by Paper Shaders from Paper, licensed under Apache-2.0. Ploy installs the package rather than copying shader source.
FAQ
I do not see Add an Effect or the effects browser
Effects is enabled per workspace during rollout. If your workspace does not have it yet, the Ploybook and the effects browser do not appear.
Can I use more than one effect on a site?
Yes, across different pages or sections. Keep to one WebGL canvas per page, and avoid competing motion in the same view.
Will it work with prefers-reduced-motion?
Ploy's Agent checks reduced-motion behavior when it installs an effect. Catalog previews fall back to still images when reduced motion is on.
Where can I preview every shader?
Visit shaders.paper.design, or use the in-product effects catalog once Effects is enabled for your workspace.
What's Next?
- Understand your site: Read Site Builder to learn how pages, sections, and design tokens fit together.
- Run guided workflows: See Ploybooks for how to find and run templates like Add an Effect.
- Go live: Read Publishing & Deploys when your effect is ready to ship.