Add an Effect

Ploy picks a Paper Shaders effect from its catalog, tunes the colors and motion to your design tokens, mounts it on your page, and checks reduced motion, fallbacks, and performance.

By PloyThe Ploy team
How it runs

Ploy runs this Ploybook in 5 phases.

  1. Choose the effect

    Pick from three families: backgrounds, image filters, and logo animations. Name the one you want, or compare rendered previews of a shortlist that fits your brand.

  2. Install the shader

    Ploy adds the Paper Shaders package if your site needs it and reads every prop and preset from the installed package.

  3. Fit it to your brand

    Colors come from your design tokens. Speed, intensity, and framing are set to your brand’s energy and kept clear of your copy.

  4. Mount it on the page

    The effect sits behind or around your real content, which stays visible when JavaScript is slow or WebGL is unavailable.

  5. Check motion and performance

    Ploy confirms the effect loads on a fresh visit, holds still for reduced-motion users, keeps text legible, and runs one canvas per page.

Expected outputs

You want an animated background behind a hero or section, a treatment on a product photo, or motion on your logo. You want an effect tuned to your brand’s colors and pace instead of shipped with its demo preset.

  • A shader effect on your page

    An animated background, image filter, or logo animation built into an existing section.

  • Brand-matched colors and motion

    Your token colors and a pace that suits your brand replace the demo preset.

  • Safe fallbacks

    Reduced-motion support, a static fallback when WebGL is off, and a pixel cap for mobile performance.

Frequently asked

Workflow questions

Ploy picks a Paper Shaders effect from its catalog, tunes the colors and motion to your design tokens, mounts it on your page, and checks reduced motion, fallbacks, and performance.
You want an animated background behind a hero or section, a treatment on a product photo, or motion on your logo. You want an effect tuned to your brand’s colors and pace instead of shipped with its demo preset.
A shader effect on your page. An animated background, image filter, or logo animation built into an existing section. Brand-matched colors and motion. Your token colors and a pace that suits your brand replace the demo preset. Safe fallbacks. Reduced-motion support, a static fallback when WebGL is off, and a pixel cap for mobile performance.
Yes. A Ploybook is a reusable guide that adapts each run to the inputs you provide. You can run it on demand or customize a workspace copy for recurring work. Review and test that copy before scheduling it. Runs use AI credits, and required services must be connected for the account running the workflow.
About the expert

Ploy

The Ploy team

Built by the team at Ploy — the same people who set the design, performance, and SEO standards every Ploybook runs to, so the output ships on-brand and production-ready.

More from Ploy
Run together

Ploybooks that pair with Add an Effect.

Run Add an Effect today.

Ploy picks a Paper Shaders effect from its catalog, tunes the colors and motion to your design tokens, mounts it on your page, and checks reduced motion, fallbacks, and performance.