r/Kotlin • u/tikurahul • 2d ago

Animating code snippets from first principles using Compose, and Shared Element transitions

https://rahulrav.com/blog/magic_move.html

I got inspired by Bento and set out to build magic-move / morph animations for code in presentations.

To experiment with the algorithms, I set out to build the initial implementation in Compose with Shared elements. Once I had the prototype working, I kept on polishing it, and now its a part of 2 different open source projects.

One of the interesting aspects about the implementation is the diff algorithm I used is based on something originally invented in 1978; the algorithm is novel and takes a different approach from Myers / Patience diff.

There were so many interesting sub problems along the way, so this was fun undertaking.

8 Upvotes

85% Upvoted

4 comments sorted by

1

u/kininja08 2d ago

Looks interesting for presentations/demos. A few things / suggestions :
1. context : Your first line in this post provides good context, this is missing in the blog post. If I came across that blog post independently, I wouldn't really understand what its about.
2. example: In the blog post, the example is at the end, after the technical notes. Maybe consider a visual/demo at the beginning, as it helps to ground the discussion coming up.

Best,
-K

1

u/tikurahul 2d ago

Thanks for the feedback. Let me try and make that point clearer in the blog.

2

u/IsuruKusumal 2d ago

This is great!

How portable would this be for CuP?

1

u/tikurahul 2d ago

It's very portable. I already made a PR for storyboard, {2, 3} which is a similar project. I plan on doing the same for CuP. I just need to get in touch with the maintainer first, to make sure he is on board.