5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:Tc96,

Shaders brings stunning WebGPU effects directly into Framer.

Explore a growing library of 1,000+ customizable shader presets including animated backgrounds, logo effects, image effects, liquid glass, ASCII, dithering, and more.

Search hundreds of available presets and customize

Install presets directly into your Framer project in seconds, then customize key properties in the edit panel. Add animated backgrounds that match your brand, logo effects built around your company logo, or image effects that transform your media with motion and interactivity.

Ship stunning shader effects to your next project

Perfect for:

Landing pages
Hero sections
Portfolio sites
Startup websites
Product launches
Creative brands
Interactive UI design

Features:

Hundreds of shader presets
Background, logo, and image effects
One-click installation
Customizable key props for all presets
WebGPU-powered rendering
Frequently updated preset library

Preview for free, then upgrade to Pro

All presets can be installed and customized for free as watermarked previews. Once you're happy with the result, upgrade to Shaders Pro to unlock production-ready installs. Any preview presets already used in your project will automatically unlock after purchase.

Pro users unlock the Design Editor at shaders.com

Pro users can also create their own custom shader effects at shaders.com using the powerful Design Editor, then one-click import them into Framer, ready to ship.

External Data

Shaders connects to shaders.com to power its features. Signing in authenticates against your shaders.com account. No design content, project data, or personal Framer data is ever sent to shaders.com beyond what's needed for these operations.

Support / Community

Need help or want to share your work? Join the Shaders community on Discord or email us at support@shaders.com

59:[["$","$L5c",null,{"post":{"id":"019e2775-fb91-7cbb-a24d-41abb12c9f88","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"eafc0c30-a3c3-4ff0-bc97-27020474d2f7","name":"Shaders","slug":"shaders","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/eafc0c30-a3c3-4ff0-bc97-27020474d2f7/pp7bk9s7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1168","resolved":true,"title":"Shaders","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Shaders brings stunning WebGPU effects directly into Framer."}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Explore a growing library of 1,000+ customizable shader presets including animated backgrounds, logo effects, image effects, liquid glass, ASCII, dithering, and more."}]},{"type":"customImage","attrs":{"alt":"Search hundreds of available presets and customize","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1168-shaders-jFih4lh6QP7TgLgOrlzKFTOCwe24t7","link":null,"caption":"Search hundreds of available presets and customize","uploadId":null}},{"type":"paragraph","content":[{"type":"text","text":"Install presets directly into your Framer project in seconds, then customize key properties in the edit panel. Add animated backgrounds that match your brand, logo effects built around your company logo, or image effects that transform your media with motion and interactivity."}]},{"type":"customImage","attrs":{"alt":"Ship stunning shader effects to your next project","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1168-shaders-yQNtf5n1fdOgvNXYLZeSSHcdvc9cmD","link":null,"caption":"Ship stunning shader effects to your next project","uploadId":null}},{"type":"customHeading","content":[{"type":"text","text":"Perfect for:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Startup websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative brands"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive UI design"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hundreds of shader presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background, logo, and image effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One-click installation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable key props for all presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGPU-powered rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frequently updated preset library"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Preview for free, then upgrade to Pro"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"All presets can be installed and customized for free as watermarked previews. Once you're happy with the result, upgrade to Shaders Pro to unlock production-ready installs. Any preview presets already used in your project will automatically unlock after purchase."}]},{"type":"customImage","attrs":{"alt":"Pro users unlock the Design Editor at shaders.com","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1168-shaders-I6kzcHRn5dTWhubWdWr8TyBHpKFYsJ","link":null,"caption":"Pro users unlock the Design Editor at shaders.com","uploadId":null}},{"type":"paragraph","content":[{"type":"text","text":"Pro users can also create their own custom shader effects at "},{"type":"text","text":"shaders.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://shaders.com","class":null,"target":"_blank"}}]},{"type":"text","text":" using the powerful Design Editor, then one-click import them into Framer, ready to ship."}]},{"type":"customHeading","content":[{"type":"text","text":"External Data"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Shaders connects to "},{"type":"text","text":"shaders.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://shaders.com","target":"_blank"}}]},{"type":"text","text":" to power its features. Signing in authenticates against your "},{"type":"text","text":"shaders.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://shaders.com","target":"_blank"}}]},{"type":"text","text":" account. No design content, project data, or personal Framer data is ever sent to "},{"type":"text","text":"shaders.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://shaders.com","target":"_blank"}}]},{"type":"text","text":" beyond what's needed for these operations."}]},{"type":"customHeading","content":[{"type":"text","text":"Support / Community"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Need help or want to share your work? Join the Shaders community on "},{"type":"text","text":"Discord","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://discord.gg/Mfqmb2jCQT","class":null,"target":"_blank"}}]},{"type":"text","text":" or email us at support@shaders.com"}]}]},"introduction":"The design platform for shaders","slug":"shaders","author":{"framerUserId":"eafc0c30-a3c3-4ff0-bc97-27020474d2f7","name":"Shaders","slug":"shaders","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/eafc0c30-a3c3-4ff0-bc97-27020474d2f7/pp7bk9s7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1168-isayS1fYl0m4by7xxZN8AXEzSgXL4P","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-14T02:46:18.934Z","updatedAt":"2026-09-10T14:03:26.872Z","publishedAt":"2026-09-10T14:03:26.853Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"a95r49poqmeuyoz3768cm70ph","paid":true,"categories":[{"id":"676f63da-b192-4974-930d-73185802088a","name":"Media","slug":"media"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-14T17:08:24.081Z","updatedAt":"2026-05-14T17:08:24.081Z","reported":false}}],"$L5e"]

Suggested for you