Recently I was working on a demo app that uses react-native-skia to make cards with a shine and a glare. I found some projects on the internet implementing this functionality. These projects were inspired by pokemon cards:
- https://poke-holo.simey.me/#%E2%9A%93-top
- https://github.com/DongGukMon/TiltHologramCard
- https://github.com/jerinjohnk/RNShaderCard
You can find my project here:
Demo Gallery
▶ Full Video |
▶ Reel |
📟 Pokédex GIF Gallery
Click any card to open the file.
#001 Pikachu |
#002 Bulbasaur |
#003 Jolteon |
#004 Charizard Big |
#005 Pikachu |
#006 Chardizard |
#007 Pikachu |
#008 Squirtle |
#009 Marill |
#010 Mew |
#011 Mew Controls |
🟡 ??? Coming soon |
CONTENTS:
- Pokemon Cards with Skia
- Canvas Optimisations
- Shader Optimisations
- Gesture and Motion Optimisations
- Sensors and General Optimisations
- Summary
Goals
Goal of the project. Combine multiple shader and image effects into one while maintaining high rendering performance.
- dynamic shaders,
- static background,
- dynamic image switch,
- hologram on top of the card,
- dynamic hologram colour palette,
- card gloss,
- dynamic outline for image (no additional images just morphology computation)
- outline with a punchout for (who’s that pokemon fancy outline)
- outline with holo glare or gif image,
- RGB split effect,
- semitransparent hologram mask for image,
- gif background mask that is the invert of the image transparent pixels,
I really liked the effect but in my opinion this could be taken to another level. I wanted to optimize the code as much as possible in order to achieve a nice 60 FPS with multiple effects combined. One of the projects used expo which has some extra installation steps.
I still think that I could have done a better job but I need to work on projects that pay the bills!
Below you can find the project’s demo gallery.
Optimisations
React and react native is a beast based on virtual tree and thai should be the first place you should be looking for your base optimisations. In my first implementation multiple changes (including the gesture and motion) caused unnecessary re-renders of components. The base goal is to remove all unnecessary re-renders and then focus on optimising the animation and shader code. Animations are created using react-native-reanimated and for shader and image manipulation (outline morph, masking, blending ) I use react-native-skia. Let us go step by step what and how was optimised. First we will start with canvas and shader component optimisations. Then we will show how you can optimize the gesture, motion and sensors. At the end I will show a few optimisations that you can apply across different projects (react including).
This is the first time I was working with such a rendering library. The last time I was working on something similar was something like 10 years ago when I was playing around with https://pixijs.com/ (great library btw. you should try it).
I kindly ask for your understanding. Feel free to reuse and modify this project.
🤝 Sponsors
💛 Thanks to our partners for supporting this project