Today we’re excited to ship Ploy Effects: animated backgrounds, image filters, and logo animations that Ploy can add to any page it builds. The first release brings all 30 of Paper’s Shaders into Ploy, running natively, with more to come.
Ploy could already do simple web animation. A real shader, like a liquid-metal wordmark or water rippling over a photo, took a library, WebGL, and hand-tuned colors. Now you ask for it in chat.
What are shaders?
Shaders are small programs that run on the graphics card and decide the color of every pixel, every frame. They started in film: Robert Cook described “shade trees” at Lucasfilm in 1984, and Pixar’s RenderMan made programmable shading the standard for films like Toy Story. Games came next. NVIDIA’s GeForce 3 brought programmable shaders to PCs and the original Xbox in 2001, and Half-Life 2 became famous for its water. WebGL put shaders in the browser, and Shadertoy gave people a place to share them. Paper’s Shaders bring that game-grade look to websites and apps.
Why Paper
Paper’s shaders are among the most admired in today’s design industry, and they show up across portfolios, product pages, and brand sites. Designers value them for their taste as much as their technical quality: rich gradients, tactile textures, and refined motion. That’s why we wanted them in Ploy.
What’s in the library
The 30 shaders fall into the same three groups Paper uses:
- Backgrounds (20). Mesh and grain gradients, noise fields, god rays, metaballs, and swirls. They go behind a hero or a section.
- Image filters (7). Halftone, dithering, fluted glass, water, lens distortion, and paper texture. They go over a photo your site already has.
- Logo animations (3). Liquid metal, heatmap, and gem smoke. They go on your brand mark.
How it works
- In a chat on your site, open the + menu and choose Effects. Or just ask: “put a halftone on the product photo” or “make it pop.” You don’t need to name Effects.
- Pick a kind: background, image filter, or logo animation.
- Pick an effect. Ploy suggests three that fit your site. You can also open the full catalog, where each effect plays as a short clip, so you see the motion before you choose.
- Ploy installs the shader, sets it up for your brand, and shows you the finished page.
Name a specific effect (“add a liquid-metal animation to my logo”) and Ploy goes straight to step 4.
Fitting it to your site
Ploy doesn’t just drop an effect in. It configures the shader’s properties around your site, your brand and your vibe:
- Colors come from your site’s design tokens.
- Speed and intensity follow the brand. A quiet brand gets slow, subtle motion. A louder one can take more.
- Scale and position keep the busy part of the effect away from your text.
Want to fine-tune by hand? You can adjust any shader’s settings manually in the Paper playground, then paste the settings into Ploy as a screenshot and Ploy will apply them to your site.
Performance and accessibility
Every shader is a WebGL canvas, so we were careful about what it costs a visitor:
- Visitors who turn on reduced motion get a still version.
- Image filters and logo animations keep the original image underneath, so it shows while the shader loads, or instead of it where WebGL isn’t available.
- There’s one canvas per page by default, and it pauses when it scrolls out of view or the tab is hidden.
- Ploy reloads the page to confirm the effect runs, then checks it on desktop and mobile.
Demo site gallery
We used Ploy to build a site for every shader, each for a made-up brand: an audio company with a liquid-metal wordmark, a fragrance house behind fluted glass, a culture magazine in CMYK halftone, and 27 more. The brands are totally fictional. The sites and effects are real.