Harmony Of Code

Pokemon Cards with Skia – Summary

HarmonyOfCode — Sun, 29 Mar 2026 15:43:37 +0000

CONTENTS: Summary This was my first project where I have dug deeper into react-native-skia. I think this is a wonderful technology. The goal was to demonstrate that you can actually render 60 FPS animation with a composable view that responds to user and device input while having multiple images, layers and transformations at the same …

Pokemon Cards with Skia – Summary Read More »

Pokemon Cards with Skia – Sensors and General Optimisations

HarmonyOfCode — Sun, 29 Mar 2026 15:42:26 +0000

▶ 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: Here we will talk about how we can optimize the sensor’s …

Pokemon Cards with Skia – Sensors and General Optimisations Read More »

Pokemon Cards with Skia – Gesture and Motion Optimisations

HarmonyOfCode — Sun, 29 Mar 2026 15:35:41 +0000

GESTURE AND MOTION As you have probably noticed the gesture component is a component that is above the canvas since it needs to detect the gesture and motion changes and then pass them into the canvas to render the card tilt, gloss and holo change and affect the styles that are computed in canvas component …

Pokemon Cards with Skia – Gesture and Motion Optimisations Read More »

Pokemon Cards with Skia – Shader Optimisations

HarmonyOfCode — Sun, 29 Mar 2026 15:06:29 +0000

in this part we will focus no how we can optimse the shader component and the process of animating the shader. CONTENTS: ▶ 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 …

Pokemon Cards with Skia – Shader Optimisations Read More »

Pokemon Cards with Skia – Canvas Optimisations

HarmonyOfCode — Sun, 29 Mar 2026 14:34:32 +0000

As mentioned before in this article we will take a look at how we have optimised the canvas component that is responsible for rendering the shader background and the images. Some of the images render dynamically based on the device movement and gestures (holo layer and shine). Other are created dynamically based on the image …

Pokemon Cards with Skia – Canvas Optimisations Read More »

Pokemon Cards with Skia

HarmonyOfCode — Sun, 29 Mar 2026 14:22:14 +0000

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: You can find my project here: Demo Gallery ▶ Full Video ▶ Reel 📟 Pokédex GIF Gallery Click …

Pokemon Cards with Skia Read More »