Free download

Shader Effects As Components

A free setup guide for Shaders, an open-source WebGPU component library by Shader Effects Inc. (MIT): glass lenses, liquid metal, neon, aurora and ink that follows the cursor, stacked like layers in React, Vue, Svelte or plain JavaScript. How layers work, setup, a seven-scene starter I built and recorded, four recipes, the agent skill and MCP for Claude Code, prompts, an EU checklist (telemetry, fonts, account) and what is free versus Pro.

The download starts right away; the link also comes by email.

Without the newsletter box you get exactly one email with your link; the address is deleted after 7 days.

What is inside
  • How layers work Generators and effects, the order that matters, props that follow the cursor without animation code.
  • starter/ Seven scenes: hero, aurora, glass, liquid metal, neon, ink, light strands. npm install, npm run dev.
  • Four recipes Hero background, glass over a logo, blurred photo behind a headline, masked reveal.
  • Claude Code The agent skill, the MCP server, llms.txt and six prompts.
  • EU checklist Telemetry off, no Google Fonts through the Text layer, no account needed.
  • Free vs Pro What the MIT library covers and what the paid preset library adds.

Node.js 20+ and Chrome or Edge on a desktop (WebGPU). Works with React, Vue, Svelte, Solid or plain JavaScript; the starter uses Vite and plain JavaScript. No account needed for the free components. The guide is in English.

Fabian Faraz Farid · Imprint · Privacy