How to create animations as a vibecoder !!

@thisguyvibecodes

1.2K followers · usually 1.5K views a post

Views

6.9K

Likes

471

Comments

27

Shares

42

SoundTikTok sound · Like This (Lofi)

Promoted product

Reporia

2 videos

Why it worked

The video effectively combines a tutorial on animation tools with a personal devlog, making it relatable and informative. The creator's use of multiple tools and technologies to build their own app, Reporia, provides a practical demonstration and a clear call to action to follow their journey.

Summary

The video showcases four tools for creating animations as a "vibecoder": Jitter AI, Rive MCP, Figma Motion Lottie Plugin, and native language coding. It also introduces Reporia, a memory app built using a combination of these tools and technologies.

Structure

1Introduction to vibe coding and animation tools
2Showcasing Jitter AI for animation
3Introducing Rive MCP for interactive animations
4Demonstrating Figma Motion Lottie Plugin for exporting animations
5

Original caption

How to create animations as a vibe coder (Devlog day 15 ☁️☁️) #devlog #buildinpublic #claude #vibecoding

More from @thisguyvibecodes

Product placement

Jitter AI (Acts: animation tool, allows editing via timeline and AI agent, imports Figma designs. Removing it would change the video's focus on animation tools.) Rive MCP (Acts: tool for making interactive animations that run natively in apps, allows use of AI agents like Cloud Code. Removing it would change the video's focus on animation tools.) Figma Motion Lottie Plugin (Acts: plugin for Figma to export files into Lottie animations. Removing it would change the video's focus on animation tools.) Swift (Acts: programming language used to build animations natively. Removing it would change the video's focus on animation tools.) Reporia (Acts: a logistic memory app that allows users to log meals and track nutrition, and uses AI for memory recall. Removing it would change the video's focus on the app's features and onboarding.)

Call to action

Follow Along ~~ @thisguyvibecodes

On-screen text

How to create animations as a vibecoder !! (a complete guide) step 1. animate this auto mode on step 2. The best vibe animation tools 1. ??? 2. ??? 3. ??? 4. ??? The 4 best tools to vibe animate (a complete guide) animate this auto mode on Tool #1 Jitter AI Jitr Jitter timeline Jitter templates Jitter -> Figma Import your Figma designs Jitter AI Chat Tool #2 Rive MCP RIVE * MCP Rive Engine Rive MCP Rive MCP Tool #3 Figma Motion LottieFiles - Discover, Create & Export Lottie animations Interactive Motion Design LottieFiles Figma Motion Lottie Plugin Tool #4 Native Language Motion Swift What should we call you? A first name or a nickname, whatever feels like you. Your name Continue So glad you're here, Sam. What do you most want to hold onto? Remember my everyday moments Keep an eye on what I eat Look back at anything I did An AI assistant for my memory Continue There it is. Your first sticker. Snapped, bordered, and saved. It just landed on today. See it on my calendar Every plate, counted. ramen, downtown tue - 7:40 pm 620 kcal 30g protein of 120g 72g carbs of 250g 22g fat of 70g Keep this meal Here is your day, all counted. The rings you starred up top. The rest you picked, just below. Tuesday June 9 - 4 things eaten 1,690 calories of 2,200 92g protein of 120g 198g Ask about any day. The moment shows up. Reporia reads back through everything you have snapped, and answers with the very moment it means. what did I eat on tuesday? A good day for eating. A green curry bowl at lunch, then pancakes in the evening. Looks INK HAZE DUSK REEL MARINE Dusk Strength 80% Your first week is on us. The whole keepsake, open for seven days. Stickers, macros, AI chat, and film looks. Yearly save 29% Monthly Today. Unlock everything. Day 5. A little nudge. Day 7. Your trial ends. Devlog DAY 15 Follow Along ~~ @thisguyvibecodes

Transcript

How to create animations as a vibe coder !! (a complete guide) step 1. animate this auto mode on step 2. The best vibe animation tools 1. ??? 2. ??? 3. ??? 4. ??? The 4 best tools to vibe animate (a complete guide) animate this auto mode on The first tool is called Jitter AI. It's a nice editing timeline in a mature library of templates. Jitter AI is perfect for those who use Figma because you can just copy and paste over your designs. As for vibe animating, they have an in-house agent in which you can talk to in order to edit your designs. Tool #2 Rive MCP RIVE * MCP Rive Engine Drive is a tool for making stateful active animations that run natively in your app. And if you caught wind of their earlier release, they actually release an MCP where you're able to use AI agents like Cloud Code, cursor or code, cursor or code to native create ripple animations. Tool #3 Figma Motion LottieFiles - Discover, Create & Export Lottie animations Interactive Motion Design LottieFiles Figma Motion Lottie Plugin The third tool is figma motion and specifically using this plugin in order to export files into lo. Lastly, you can go to standard route and just build your animations squarely in whatever language are coding in. Tool #4 Native Language Motion Swift For Reporia's onboarding, I use a mix of rive MCP and native 60y. It's I don't design a figma and I mock up things in HTML and CSS. That workflow made it really easy to translate straight to code. Devlog DAY 15 Follow Along ~~ @thisguyvibecodes My name is Brandon and I'm documenting my life as a sole developer and sharing advice along the way. So if you're interested, follow along