Gratis-Download

Shader Effects As Components

Ein kostenloser Setup-Guide für Shaders, eine Open-Source-WebGPU-Komponentenbibliothek von Shader Effects Inc. (MIT): Glaslinsen, flüssiges Metall, Neon, Polarlicht und Tinte, die dem Cursor folgt, gestapelt wie Ebenen in React, Vue, Svelte oder reinem JavaScript. Wie Ebenen funktionieren, Setup, ein Starter mit sieben Szenen, den ich gebaut und aufgenommen habe, vier Rezepte, der Agent-Skill und MCP für Claude Code, Prompts, eine EU-Checkliste (Telemetrie, Schriften, Konto) und was kostenlos ist und was Pro.

Der Download startet sofort, der Link kommt auch per Mail.

Ohne Newsletter-Haken bekommst du genau eine Mail mit deinem Link, die Adresse wird nach 7 Tagen gelöscht.

Was drin ist
  • How layers work Generatoren und Effekte, die Reihenfolge, auf die es ankommt, Props, die ohne Animationscode dem Cursor folgen.
  • starter/ Sieben Szenen: Hero, Polarlicht, Glas, flüssiges Metall, Neon, Tinte, Lichtbänder. npm install, npm run dev.
  • Four recipes Hero-Hintergrund, Glas über einem Logo, unscharfes Foto hinter einer Überschrift, maskierte Enthüllung.
  • Claude Code Der Agent-Skill, der MCP-Server, llms.txt und sechs Prompts.
  • EU checklist Telemetrie aus, keine Google Fonts über die Text-Ebene, kein Konto nötig.
  • Free vs Pro Was die MIT-Bibliothek abdeckt und was die kostenpflichtige Preset-Bibliothek dazu bringt.

Node.js 20+ und Chrome oder Edge auf dem Desktop (WebGPU). Funktioniert mit React, Vue, Svelte, Solid oder reinem JavaScript; der Starter nutzt Vite und reines JavaScript. Für die kostenlosen Komponenten brauchst du kein Konto. Der Guide ist auf Englisch.

Fabian Faraz Farid · Impressum · Datenschutz