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.

GLSL shader recipes for the web v1.0.0

Use this resource to build an animated background or image transition with a GLSL shader

New

  • 510 downloads
  • 185 likes
  • 110 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install glsl-shader-recipes

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 writes fragment shaders for animated gradients, organic noise, crisp shapes, distortions and image transitions, wired into Three.js. It delivers one HTML file with a frozen-frame mode to check the render at start, middle and end. A full cookbook comes with the method.

Mostly picked by

Updated November 2, 2026

GLSL code excerpt for an animated gradient next to its full-screen render.

Details

Works in
Install guides
Generates with
Three.js
Uses
  • WebGL-capable browser
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: building blocks, transitions, Three.js wiring, mobile performance and a verification checklist
  • references/glsl-cookbook.md: noise, SDF shapes, palettes, domain warping and complete transition shaders
  • An output contract: one HTML file, a frozen-frame mode and prefers-reduced-motion support

Good fit for

  • An animated gradient or noise background for a landing page
  • A transition between two images (dissolve, displacement, glitch)
  • A distortion or chromatic aberration effect on a visual

Not for

  • Complex 3D scenes with models and lighting
  • Simple animations that CSS can handle

Tags

  • glsl
  • shader
  • three.js
  • animation
  • webgl

About

You say

"Create an organic animated gradient background for my homepage in a single HTML file, in blue and coral tones."

GLSL code excerpt for an animated gradient next to its full-screen render.

Skill published by iart-ai under the MIT license.

Show more

Prerequisites

You bring
A description of the effect and palette you want and If needed, the two images for a transition
Dependencies
WebGL-capable browser

How to use it

  1. Describe the effect, the colors and where it will be used.
  2. The agent writes the shader and the Three.js HTML file.
  3. Check the frozen frames at start, middle and end, then adjust.

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/glsl-cookbook.md8.2 KB
  • SKILL.md10.4 KB

Origin and licence

Modified by PalateKit

Author
iart-ai
Source
github.com/iart-ai/webgl-animation-skills/tree/50697d659fbf70152f48f9f8aadf1efe78bbdde1/skills/shader-glsl
Licence
MIT

Notice

Version modifiée de « shader-glsl » (iart-ai, 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

Do I need to install anything?

Not for the shader: Three.js loads from a CDN. For automatic screenshots the skill suggests Playwright; otherwise open the file in a browser with ?t=2, for example.

Are the helper scripts it mentions included?

No, only SKILL.md and the cookbook ship. Verification is done by hand with the ?t=N mode described in the skill.