Blog
Latest posts from Upsampler.
Creating Interactive Animations from Manga, Manhwa, and Comic Panels with AI
This post explores a new concept of using Luma and Kling AI to animate manga, manhwa, and comic panels and create flip-book style interactive animations in the browser, featuring Berserk, Vagabond, One-Punch Man, Solo Leveling, Spider-Man, Attack on Titan, Kingdom, One Piece, and Naruto.
luca
@lucak5s
I used AI tools to animate some memorable panels from different manga, manhwa, and comics. With enough patience and budget, this could be an interesting new way to enjoy this type of media.
How I created the video
First, I collected the panels and upscaled them using the Dynamic Upscale tool on Upsampler. I then used both Luma AI (Ray 2) and Kling AI (version 1.6) to turn the panels into videos. On Luma, I used camera movements like Orbit Left, Orbit Right, and Crane Up. For Kling, I described the desired camera movement in the prompt and specified which parts of the image should move, such as hair and clothing in the wind. In my experience, Luma appears better at maintaining smaller details, like tiny faces, while Kling excels at making the animations more dynamic.
How I created the interactive animation
I wrote a simple Python script to extract the individual frames from the MP4 videos as JPG images. I uploaded these frames to an object storage service behind a Cloudflare CDN. To create the interactive animations in the browser, I detect scroll events and draw the corresponding image frames onto a canvas element. Separating the video into frames is the most robust approach, as manipulating video playback time directly using the video tag is too laggy. To make the animation appear longer, I iterate through the frames in ascending and then descending order, effectively doubling the animation's length.