ShaderDrop Starter: Free WebGL Hero and Custom Cursor Effects

Add a living background and pointer motion to your site in minutes, for free. The ShaderDrop Starter gives you three drop-in components: an animated WebGL mesh gradient hero, a soft trailing cursor glow, and an animated film grain overlay. Copy one file, call one function, and it runs. No build step, no dependencies, no three.js.

Every component ships in two formats: a vanilla ES module and a React 18+ component. The hero renders an animated website background in WebGL2; the cursor glow and grain overlay use Canvas 2D so they run everywhere.

Performance is handled for you. Device pixel ratio is capped at 2, the render loop pauses on tab blur and when the tab is hidden, prefers-reduced-motion is respected with a static frame, and everything cleans up on unmount so nothing leaks. If WebGL2 is missing, the hero swaps to a static gradient fallback so the section is never blank.

The Starter is MIT licensed: use it in personal and commercial projects, modify it, ship it in client work, no attribution required. When you want more, the Hero Shader Pack and Cursor FX Pack pick up where this leaves off.