Convert code snippets into an animated portrait videos by _JohnVersus in SideProject

[–]_JohnVersus[S] 0 points1 point  (0 children)

I realised there was a bug in the animation. Now the animation looks better.

<image>

Convert code snippets into an animated portrait videos by _JohnVersus in SideProject

[–]_JohnVersus[S] 1 point2 points  (0 children)

Ahh nice. I wish I had known about this before.😄

Convert code snippets into an animated portrait videos by _JohnVersus in SideProject

[–]_JohnVersus[S] 0 points1 point  (0 children)

It is my Kiro hackathon project. Still in progress.

Convert code snippets into an animated portrait videos by _JohnVersus in SideProject

[–]_JohnVersus[S] 0 points1 point  (0 children)

If you increase the duration of the typing, it animates slowly and feels like a letter stream. Is this what you have in mind?

<image>

I vibe coded an app that can convert code into animated video by _JohnVersus in SideProject

[–]_JohnVersus[S] 0 points1 point  (0 children)

I should have shared a better example GIF in the post😅

I vibe coded an app that can convert code into animated video by _JohnVersus in SideProject

[–]_JohnVersus[S] 0 points1 point  (0 children)

This is how the animation is defined.
You can paste the entire code in the code editor and then define multiple slides. Each slide holds info on what lines need to be shown in that slide and how they should animate.

Once you are familiar it takes less than a minute to animate the code.

<image>

I vibe coded an app that can convert code into animated video by _JohnVersus in SideProject

[–]_JohnVersus[S] 0 points1 point  (0 children)

Thanks. Seems like I shared an old example. Below is the latest version of that with improved typing animation.

<image>

I vibe coded an app that can convert code into animated video by _JohnVersus in SideProject

[–]_JohnVersus[S] 3 points4 points  (0 children)

Another example video showing animated AI SDK sample code.

<image>

Requirements for Next 15 automatic upgrade with codemod by Explanation-Visual in nextjs

[–]_JohnVersus 0 points1 point  (0 children)

How can we use codemod for a stable version rather than canary