Hero Shader Pack: 5 WebGL Hero Section Backgrounds for React and Vanilla JS

Give your landing page a hero that stops the scroll. The Hero Shader Pack is five WebGL2 hero backgrounds, each mouse reactive and built to hold 60fps: aurora-silk (flowing iridescent silk), liquid-chrome (molten reflective metal), raymarch-blob (a liquid metaball sculpture), particle-field (a glowing constellation with a pointer gravity well), and waves-caustics (sunlit underwater light).Every hero ships four ways: a vanilla ES module, a React 18+ component, a demo.html drop-in, and a static fallback image. Drop them into any stack with no build step, no dependencies, and no three.js. Tune colors, speed, intensity, and pointer influence with a simple options object.PERFORMANCE IS BAKED INDevice pixel ratio is capped at 2, the render loop pauses on blur and when the tab is hidden, prefers-reduced-motion renders a static frame, and the WebGL context is released on unmount. If WebGL2 is unavailable the canvas gets a fallback class so you can show a static gradient or the included image, never a blank hero.LICENSESingle-buyer commercial license: use these in unlimited personal and commercial projects, including client work, and modify them freely. You may not resell or repackage the components themselves. One purchase covers you or your company.

Found on Devadex — the discovery index for independent software the big search engines bury. More from gumroad.

Report this listing