OpenShaderLibraryDashboard
OpenShaderLibrary
Dashboard

How it works

Pick an effect, tune it live, export compiling source for React, React Native, and SwiftUI. Three steps, one shader.

01

Pick an effect

Open the library and click something you like. 117 effects, grouped by what they are: agent states, type, minimal fields, orbs, liquid, glass, gradients, avatars. Search by name or by feel. Every card is the real shader, and the preview in the browser is the same code you will ship.

02

Tune it live

Every effect has its own controls: colour stops, motion, structure, light. Layer an animation preset over it, drag the stage to try the interaction, switch the stage to an iPhone to see the SwiftUI framing, and copy the URL when it feels right. That link is the preset.

03

Export for your platform

Sign in and download a zip. Inside are three folders: React (WebGL2), React Native (Skia), and SwiftUI (Metal). Keep the one you need and add the files to your project. Your slider state is baked in, and a licence naming you is in every download.

Platforms
What is in the zip, per folder

React

GLSL ES 3.0 · WebGL2

Files
A GLSL ES 3.0 fragment shader as a TypeScript module, plus a React component that mounts it on a WebGL2 canvas. Works in Next.js, Vite, Astro or a plain canvas.
Use
Copy both files into your project and render the component like any element. Or take the shader string and drive it from your own WebGL2 setup: it takes time, pointer, tap and the animation preset.
Requires
Any WebGL2 canvas (Next.js, Vite, Astro, vanilla)

React Native

SkSL · @shopify/react-native-skia

Files
An SkSL runtime shader and a React Native component built on @shopify/react-native-skia. Needs a dev build, not Expo Go.
Use
Your app needs Skia and Reanimated. Copy the files in and render the component with a width and height. Same inputs as the React version: time, pointer, tap, animation.
Requires
React Native 0.71+ · Expo SDK 49+

SwiftUI

Metal Shading Language · SwiftUI Shader API

Files
A .metal shader file and a SwiftUI View. No packages, no build settings: add both files to the target and build.
Use
Use the view like Color or Circle and give it a frame. The shader paints every pixel, so size it to what you actually show.
Requires
Xcode 15+ · iOS 17 / macOS 14
Questions
The ones we get asked

Do I install a package?

No. There is no npm package or Swift package to add. You export a zip from the editor and copy the files for your platform into your project: a shader plus a component for React and React Native, a .metal file plus a SwiftUI view for Apple platforms. Nothing else to depend on, nothing to update.

Does every effect work on every platform?

Yes. Each effect is one shader kernel written in a shared dialect and rendered three ways: GLSL on WebGL2 for React, SkSL on Skia for React Native, and Metal for SwiftUI. Every zip carries all three folders.

Is the preview the same as what I export?

Yes. The browser preview runs the same kernel body the export is generated from, and your slider values are baked into the download, so the effect you tuned is the effect you ship.

What do I need on each platform?

React: any WebGL2 canvas, in Next.js, Vite, Astro or plain HTML. React Native: 0.71 or newer, or Expo SDK 49 or newer, with @shopify/react-native-skia and Reanimated in a dev build. SwiftUI: Xcode 15 or newer, iOS 17 or macOS 14.

What is free and what is Pro?

Browsing, tuning and sharing a configuration link are free. Pro is $6 a month and unlocks the source export for every effect in the library, licensed for unlimited commercial apps. Downloads stay licensed if you cancel.

Can I change an effect after exporting?

Yes. Every parameter you tuned is a plain value at the top of the exported component, and the shader source is right there in the file. Or come back to the share link, retune, and export again.

Browse the effects. Every card is live. Start there.→Pricing. Free to browse and tune, Pro to export.→