Keyframer

Build animations visually. Ship Reanimated code.
A browser-based keyframe editor for React Native.

[Catalin Miron - keyframer.dev @mironcatalin]

Made some progress on @keyframer_dev Reanimated animation debugger.
What do you think? Are you willing to beta test it?

[Catalin Miron - keyframer.dev @mironcatalin]

Working on a way to debug animations in React Native 👀

Record a gesture on device, scrub it from the browser, see where the UI or JS thread dropped frames.

@keyframer_dev inspector: a babel plugin + <MotionScan /> for an on-device overlay

[Catalin Miron - keyframer.dev @mironcatalin]

I'm excited to announce that @keyframer_dev is now in beta.

[Catalin Miron - keyframer.dev @mironcatalin]

The @keyframer_dev lightbox its done

[Catalin Miron - keyframer.dev @mironcatalin]

I am proud to release Chalk Puzzles
9 addictive puzzles and board games
No account, fully offline, 60fps everywhere 🧵

Built with @expo
Animations with Reanimated by @swmansion
9 language support
Custom app icons
Widgets
Sounds and haptics
Multiplayer - Same phone, multi peer/nearby and AI
Reminders - local notifications
Legend State and SQLite for shared state app - widgets

Thanks a lot for your support! Sharing this will help me :)

[Catalin Miron - keyframer.dev @mironcatalin]

WebMCP anyone?

🔜 https://t.co/s1KpP19gg6

[Catalin Miron - keyframer.dev @mironcatalin]

Live @keyframer_dev preview recipe:
Squircle Ring + CountUp node-graph

- yes, this is running Reanimated 4 on web, no fake animations :)

[Catalin Miron - keyframer.dev @mironcatalin]

Countup - the animated text node graph on @keyframer_dev

[Catalin Miron - keyframer.dev @mironcatalin]

Give it a try

https://t.co/0fA99Lxub8

[Catalin Miron - keyframer.dev @mironcatalin]

CountUp node-graph @keyframer_dev

The good thing? Any text element has this, and it's updated in real-time

[Catalin Miron - keyframer.dev @mironcatalin]

Another @keyframer_dev node graph: Text reveal

https://t.co/ew7jrj5fXW

[Catalin Miron - keyframer.dev @mironcatalin]

👑 if this is not awesome, I don't know what it is :)

Skia node-graph -> Android - iOS - Web -> Instant feedback (durable objects ftw)

Clean code that you can copy - paste

[Catalin Miron - keyframer.dev @mironcatalin]

Imagine building Skia shaders visually with a node graph. 👀

@keyframer_dev

[Catalin Miron - keyframer.dev @mironcatalin]

Some things are difficult to do in React Native, well not anymore, I give you the Motion Path node-graph.

https://t.co/P5kNczKbX5

[Catalin Miron - keyframer.dev @mironcatalin]

A new node-graph: Repeater

https://t.co/gR6zxBAjF4

[Catalin Miron - keyframer.dev @mironcatalin]

thanks to AI we have a blog playground

All animations run on Reanimated v4 and Gesture Handler - thanks to the robust @keyframer_dev engine that is really scalable.

https://t.co/SZxSwQv1U2

[Keyframer @keyframer_dev]

@mironcatalin I trust you!

[Catalin Miron - keyframer.dev @mironcatalin]

I will create the best animation playground as blog posts with the help of AI where you can play with different interactions but also extend them via the full editor.

🔜 https://t.co/44HlGbN3tD

[Catalin Miron - keyframer.dev @mironcatalin]

The talk about Keyframer - The Reanimated Visual editor it's up.

🎥 Watch it here: https://t.co/wXzawwCKtv

PS: I had only 1 day to prep for the @appjsconf talk but it was really fun :)

[Catalin Miron - keyframer.dev @mironcatalin]

I'm building a visual editor for Reanimated.

It's still early, but I'd love for you to try it and tell me what's missing, confusing and exciting :)

👉 https://t.co/44HlGbN3tD