It has a free plan and paid plans, according to its own description.

Do I need to know how to code to use Shaders?

Yes. You need to write code to use it.

What does Shaders work with?

According to its own documentation, it works with React, Vue, Svelte, Solid, Framer, and Claude Code.

What is Shaders good for?

Adding animated gradients and glass effects to a website, creating cursor trail and distortion effects on a page, and designing visual effects in a browser editor and exporting code.

Shaders

Shaders is a library of WebGPU visual effect components for web developers building animated backgrounds and cursor effects for websites.

What it is good for

Adding animated gradients and glass effects to a website
Creating cursor trail and distortion effects on a page
Designing visual effects in a browser editor and exporting code

At a glance

Who it is for

Setup

Requires programming

Level 5 of 5. You need to write code to use it.

Cost

Free tier plus paid plans

Type

Framework or SDK

Tasks

Works with

React, Vue, Svelte, Solid, Framer, Claude Code

Momentum

Rank this week: #30 in builder tools
Best rank: #1 week 41, 2026
Stars gained last week: +299
GitHub stars: 5,779

GitHub numbers as of Nov 2, 2026. Updated weekly.

GitHub stars for Shaders: 0 on Sep 24, 2026, 5,779 on Nov 2, 2026. Source: GitHub.

Ranking history

First ranked in week 41, 2026.

Official links

Setup steps are on the official pages. We do not repeat them here, since they change.

Questions

Is Shaders free?: It has a free plan and paid plans, according to its own description.
Do I need to know how to code to use Shaders?: Yes. You need to write code to use it.
What does Shaders work with?: According to its own documentation, it works with React, Vue, Svelte, Solid, Framer, and Claude Code.
What is Shaders good for?: Adding animated gradients and glass effects to a website, creating cursor trail and distortion effects on a page, and designing visual effects in a browser editor and exporting code.

Similar agents

Impeccable
Impeccable is a set of design commands for coding agents that steers, reviews, and polishes interfaces to avoid generic AI-looking design.
Appwrite
Appwrite is an open-source backend platform that gives apps and AI agents auth, databases, storage, functions, and hosting in one place.
AI Website Cloner Template
AI Website Cloner Template is a skill that recreates an existing website as a Next.js app for people who want a copy of a site's design and layout.
stitch-skills
Stitch-skills is a library of skill add-ons that teach coding agents to turn Google Stitch designs into code, design systems, and assets for designers and developers.
Skills
Skills is a collection of agent skill folders that teaches Codex, Claude, and Cursor how to build landing pages, 3D scenes, and UI prompts for designers and builders.
OpenPencil
OpenPencil is a vector design tool that turns text prompts into UI on a canvas, with AI agent teams working in parallel for designers and developers.

Are you the maker? Get your badge

Add a badge to your site or README. It links to this page, and once our weekly check finds it, your listing gets a Verified mark and a followed link back to you. How badges work.

HTML for your website

<a href="https://viralagent.si/agents/shaders/"><img src="https://viralagent.si/badge/shaders/featured-light.svg" width="170" height="36" alt="Shaders is featured on Viral Agent"></a>

Markdown for a README

[![Shaders is featured on Viral Agent](https://viralagent.si/badge/shaders/featured-light.svg)](https://viralagent.si/agents/shaders/)

Put the badge in your page's HTML (a footer works well). Our checker reads raw HTML and does not run JavaScript, so a badge added only by a script cannot be found. The link may carry rel="nofollow" if you prefer; that does not affect your listing.