3 min
Shaders felt like black magic until I started collecting them
I used to see a React Native shader and have no idea how it was done. Here is what a shader actually is, and the shelf I use to get familiar with the variations.
I had no idea what I was looking at. A blob of light on a phone screen. It moved like liquid and I thought it was a black box. I did not even know shaders existed. Complete magic. Someone had opened a door I did not have a key for. I just watched it, and I could not name the thing.
React Native shaders are a program per pixel
What you are looking at is every pixel getting a color. That color comes from a tiny function. In React Native Skia the language is SkSL, close to GLSL. You compile it with RuntimeEffect.Make. main takes a position and returns a vec4. That is the whole trick, said cold. It still looks like magic the first time the canvas lights up.
A LinearGradient is not that. BlurView is not that. Those are filters with a fixed shape. A shader can draw a gradient. It can also warp an image, grow a noise field, smear chrome, or breathe because you passed time in as a uniform.
The first time I understood that, the black box opened a crack. Not because I could write one. Because I finally had a name for the layers.
A glow is three layers
Take a hero card that shimmers. An onboarding splash. A payment success that is not a Lottie file.
The first layer is the host. A Canvas, a Fill, a Shader. React Native Skia. The pixels live on the GPU.
The second layer is the source. vec4 main(vec2 pos). Distance. sin. mix. That is the fragment shader people mean when they say shader.
The third layer is uniforms. A float for time. Reanimated can tick that value. The program stays the same. The picture moves.
Sometimes the source is not a color at all. It samples another shader. An ImageShader of the card, then a sin on every x, and the picture melts. Same three layers. Different main.
There is another door. A GL view, Expo GL, raw GLSL. Heavier. You own a context. Fine for a visualizer. A lot of work for a card.
You cannot tell these apart from a screenshot. A still looks like a fancy gradient. You have to see it move.
The collection is how I stopped guessing
I put the ones I find in the Shader filter. I was already tagging. The collection is growing, and I am glad it is. It is a place to get familiar with the variations, with what a shader even is, with how it is done. I add more when I find them.
A facet does not write the SkSL for you. Some of what I collect is a video of the motion, not code you can paste. Paid kits stay that way. It removes the part where you do not know what you are looking at.
If you already know you want a Skia RuntimeEffect, or a GL view, skip the wide search and go look at that row.