Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

WebGPU visual effects for web pages v1.0.0

Use this resource to build an animated background or GPU visual effect on a web page

New

  • 344 downloads
  • 164 likes
  • 236 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install shaders-webgpu-effects

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent builds effects from components stacked like layers: gradients, noise, glass, blur, cursor trails, transitions. It follows four recipes ready to adapt (hero background, glass over a logo, blurred image behind text, masked reveal) and applies the performance rules. You get a component that works in React, Vue, Svelte, Solid or vanilla JavaScript.

Mostly picked by

Updated November 2, 2026

Animated gradient page background with grain and a cursor trail.

Details

Works in
Install guides
Generates with
Shaders (WebGPU)
Uses
  • Node.js
  • shaders npm package
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: setup, composition rules, dynamic props, recipes and performance rules
  • components.md: a one-line description of each of the 200 components, marking effects that need an input

Good fit for

  • Adding an animated background to a site hero
  • Putting a glass or blur effect on a logo or photo
  • Creating a transition or cursor effect without writing raw WebGL

Not for

  • A 3D scene with models and a camera
  • Projects that must support browsers without WebGPU
  • Server-side rendering

Tags

  • webgpu
  • shader
  • animation
  • background
  • effects

About

You say

"Add an animated purple gradient behind my home page hero, with a little grain and a trail that follows the cursor."

Animated gradient page background with grain and a cursor trail.

Skill published by shader-effects-inc under the MIT license.

Show more

Prerequisites

You bring
A description of the effect you want and A web project in React, Vue, Svelte, Solid or JavaScript
Dependencies
Node.js and shaders npm package

How to use it

  1. Describe the look you want
  2. The agent assembles the components and sets the props
  3. Open the page in a WebGPU browser and tweak the colors

Content preview

Files

  • components.md22.5 KB
  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md14.6 KB

Origin and licence

Modified by PalateKit

Author
shader-effects-inc
Source
github.com/shader-effects-inc/shaders/tree/eb3df5cedc826008be8e1037c1182e649037c74a/skills/shaders
Licence
MIT

Notice

Version modifiée de « shaders » (shader-effects-inc, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Is a subscription required?

The components are free (MIT license). Only installing presets from the online library needs Shaders Pro; the skill then falls back to composing the effect by hand.

Which browsers work?

Those with WebGPU. Effects do not render on the server and must stay client-side.