The demo is open source (along with 110+ React Native animations).
That's the output of a pure vibe coding session 🫣 but the code might still be useful if you'd like to extend it with new ideas.
github.com/enzomanuelm...
I've been playing with React Native WebGPU recently and it's really flipping my perspective on animations.
This animation is made with React Native - my first attempt with React Native WebGPU (Claude helped quite a lot). It's open source and you can access it along with 100+ other React Native animations at reactiive.io/demos
The idea was to build a forest from real GitHub contribution data (my last 9 years) - but I liked how it looked with some made-up data so much that I kept a toggle for visual purposes. The main goal, though, was to make it look good with real data
What if every GitHub commit planted a seed?
I still can't believe that these are just plain Skia paths animated with Reanimated
8. If you enjoy React Native animations and would like to learn more, check out my course! (AI section coming soon)
→ reanimate.dev
7. Yes, AI helps a lot, but you should treat it like a multiplier. I would have loved to have the option to use Claude a few years ago 😅
bsky.app/profile/rea...
6. Small tip: blur masks will make a huge difference!
5. Now you can prototype as much as you'd like until you land on a result that's good enough for you.
4. At this point, it's all just path interpolation with Skia.
3. Once the mascot was ready, Claude was kind enough to read it directly from Paper via MCP and translate it into Skia paths.
2. What I did was "vibe-prototype" the mascot with @paper.design + Claude. Mostly just asking questions and iterating until I landed on the design I liked
1. The real answer is to use Rive/Lottie with a hand-crafted design, but I just lack the creative skills to pull that off 🙈
It’s easier than ever to bring your React Native app to life.
Here’s how 🧵
Design tip: always start with a donut.
Source code → reactiive.io/demos
Best part: useAnimatedProps gives you fully native animations with zero extra renders. Source code: github.com/enzomanuelm...
SwiftUI modifiers landing in Expo 55 is quietly one of the best updates.
Interactive demos speak louder than words.
Finally reworked reanimate.dev to make the concepts click faster.
3. The website is built with @expo.dev and powered by Skia, it ships to the web and still runs natively. That’s the best part.
2. Customize colors, style, and logo - then copy the snippet straight into your project. It works with react-native-qrcode-skia.
1. Some of you might remember the v1. This is a complete redesign strongly inspired by ray.so (which is great for creating beautiful code snippets)
Creating a QR code in React Native should be fun.
→ qrcode.reactiive.io
Shape morphing animations are so addictive.
Just added a few to enzo.fyi
12/ If you found this useful, the full talk goes deeper on each of these 👀 youtu.be/cbTsg8GggzA
11/ Skia can feel overwhelming to learn, but I’ve found that over the past three years, more than 50% of my Skia animations were built on a Skia Path, which has proven to be the most flexible component I’ve ever used.
10/ ✦ Skia is the signature of memorable animations.
9/ To prioritize consistency and delight in tap interactions, I created (and use) pressto - a very simple package built on top of Reanimated and RNGH that provides consistent defaults. bsky.app/profile/rea...
8/ That's especially true with React Native where the default way of building an animated touchable is still the TouchableOpacity.
