I was once again experimenting with shaders and SwiftUI. What started as a small test for version 2 of Storma ended up as an open-source Swift package.
The result: Sticker, a tool that lets you add a "Pokémon card" effect to any view. Available now on my GitHub, this package is easy to use. If you like the result, give it a try, share your feedback, and feel free to drop a star on the repo. ⭐
While developing Sticker, I aimed to make shaders more accessible, as shader code can be daunting. If you're just starting, I highly recommend experimenting with visual editors like Godot or Unity, where you can connect blocks visually, making the process much easier to grasp. For the curious, here’s how you can recreate this effect step by step.
1. Create a Color Gradient
Start by writing a pseudo-random function based on pixel positions.
Then use sine and cosine to add some dynamic shifts to the gradient.
2. Add a Diamond Grid
To enhance realism, create a grid of squares and rotate it 45°.
3. Add Grain Texture
To add texture to your effect, generate some noise.
4. Prepare to Mix
Define a function to calculate a color’s brightness.
Create a utility function to blend two colors based on the brightness of the base color.
Lastly, define a function to increase contrast.
5. Mix It All Together
Combine everything in the following order:
Blend the input color with your gradient, taking input brightness into account.
Add the diamond grid effect using a contrast-increasing mix.
Add the noise texture with another contrast-increasing mix.
The result is a more pronounced effect on bright colors and a subtle shimmer on darker colors, adding realism to your design.
Comparison of icons with and without the effect. Notice the stronger effect on lighter colors.
Feel free to experiment and let me know what you create with it!