OpenShaderLibrary

01

Pick an effect

Open the gallery and click something you like. The preview in the browser is the same shader you will get in Metal, Skia, and WebGL. Same math, same look.

02

Tune it

Move the sliders until it feels right. The preview updates as you go. When you land on a look, copy the URL. That link is the preset.

03

Export the source

Sign in and download a zip. Inside are SwiftUI + Metal, React Native + Skia, and a WebGL2 shader you can run from Next.js, Astro, or anything else with a canvas.

Requirements

SwiftUI needs Xcode 15+ and iOS 17 or macOS 14; React Native needs 0.71+ or Expo 49+ with Skia and Reanimated (dev build, not Expo Go). Web is GLSL on WebGL2, so Next.js, Astro, Vue, or a plain canvas all work.

Install

Keep the folder for your platform and delete the other two. On the web, compile the GLSL into whatever you already use; the React component is only there if you want it.

Use

On Apple and React Native, drop in the view like anything else. On the web, drive FRAGMENT_SHADER with your own WebGL2 setup, or use the included React helper.

Layout

Give it a frame the way you would Color or Circle. The shader paints every pixel, so size it to what you actually show.