Watch Me Vibe Code an Animated App with Claude Opus 5.5 (It's Super Smooth)

0:00Today I'm going to show you how I created this beautiful animated mobile app with Opus 5.5. We've got all these characters that I made, but we also have interactive elements that are responsive to your cursor. And I can also pick my drinks and move the slider around in real time. And only that, but I was able to make this screen where the character floats around and as I tilt my phone, it actually follows me. And every bit of this animation is purely code, all written by Opus 5.5. So, in this video, I'm going to show you step by step on how I created all these animations along

0:30with the exact prompts that I use to get all these animations super smooth. Because if you just randomly prompt the AI like most people, you'll most likely end up with stiff animations that look like AI slop. So, I'm going to make this tutorial very simple to follow. So, let's get started. All right. So, the app that we're going to be rebuilding today is actually this app called Water

0:49Lama. This is where I got the idea from. And apparently, this app is making 100K per month. And what this app simply does is it helps people track their water intake. Yeah. So 100K is pretty insane for such a simple thing that you're going to track. Now if you think about it, this is actually a habit tracker. But instead of creating a generic habit tracker app, they picked one specific habit, which is drinking water. And they built a fun interface around it with all the super cool animations, which makes

1:16people keep coming back to open the app. Now, I've got the Water Llama app on my phone now, and I just want to give you a quick overview on what you can do in this app so that you guys know what we're working with. So, this is basically the home screen, and this is

1:28where you can track your water intake. So, here you can actually set your target water intake. So, on a given day, I want to drink 71 ounces of water. And if I'm drinking water, I can just click on water here and I can use this interactive slider here to indicate how much I just drank and I just click on add water and that will add some water into the llama. Or if I just had coffee, I can click on coffee here and again I can select how much coffee I had and it already knows how much water content is actually in this specific coffee. So it

1:58will just add the water portion of it into this container here. And they also have a bunch of other animations that are pretty cool. So we're going to recreate this app. We're going to use this idea, but obviously we're going to create our own characters with Opus 5.5. And now we're ready to prompt. So I'm in Claude right now and I have a new session open. Now the first step is always to give Claude reference in what he's trying to build. Now you can take this URL and give this to Claude, but it's not going to be enough, right? Cuz all of this is just app screenshots. He

2:25won't be able to understand how the pages flow, how many screens are actually in this app or what happens if you click on certain button. So what I like to do is actually go to this website called mobin.com. So here they have a collection of thousands of apps and here you can see some of the popular

2:39apps like Whimo, Google Health, Copilot. They even have Shopify here, Trip Advisor and they also have one for Water Lama. So here you can see that they have 246 screens. So you can see how they do their onboarding, what the pages look like, what the payw wall looks like. So everything is basically here. So this is something that you want to give to Claude. So it will understand how to

3:00structure your app based on this app. Now, keep in mind that this is actually a paid tool and I'm not sponsored by Mobin or anything. I actually pay for this with my own money cuz something like this is actually crucial if you want to give Claude the right context to the app that you're building. And what I like about using Mobin is they do have an MCP connector to Claude. So, you never have to download all the screens manually and upload it to Claude. But Claude can access all of these through the MCP connector. All right. So, now I'm ready to prompt it. So, I'm going to

3:27paste in my prompt here and I'm going to walk you through what I have. So, I want to build an app like water llama, but instead of a llama, I want to choose a capiara instead. Image attached. So, I found this image in Pinterest and I'm just going to use it for our mascot. And I'm going to ask Opus 5.5 to animate this, right? And let's call the app brownie. And then I took this URL from this mobin page here and just paste it in the prompt. And I also wanted to make sure that I have that mobin connected as well. So, that is active. And I'm just

3:55going to tell it to build the full on boarding pages and the home screen. And again, because it has access to this page with all these screens, it will understand what the onboarding looks like and what the homepage looks like because all of these are labeled right now. There's one more thing that I added, and this is actually optional, but I feel like this is going to help Claude understand the animations. So, I actually downloaded the water llama app on my phone, and I just screen record everything, right? So, it will know what

4:21the animations actually look like. Because if we look at the screenshots for a moment here, these are all images and unfortunately these are not screen recordings and that is just the limitation of this particular app. But if you go to another app for example like this one, they do have some animations recorded as well. So it really depends when the app is updated in Mobin. But if you have an app that does not have any animations here, what you can simply do is just take a screen recording here of the entire app. Just click around, press all the buttons, and just save it in the folder that Claude

4:49has access to. So watch my screen recording to understand the flow of pages and how each UI elements animates and create all motion graphics using code. And here I'm just emphasizing that the Mobin MCP is connected and you can browse through all the pages of the app. But check my screen recording for all the animation references. So I'm just going to fire it off and I'm going to come back when this is done. While we wait, I want to introduce you to today's sponsor, Gamma. So now you're building the app. At some point you want to show it to other people, which means that

5:16you're going to create a presentation. And Gamma just released their newest Gamma 5. And it turns a rough idea into stunning presentations in just minutes. Cuz all you need is a couple of screenshots and tell it the basic idea of what you're building. And it doesn't need to be a perfect prompt cuz if it needs more details, it's going to ask you clarifying questions. Then it will do the research and shows you an outline before it designs anything. Now what I love is that Gamma 5 now connects to all the tools that you already use like Slack, Notion, Dropbox. So you can grab all your files automatically, which

5:45means that you don't have to upload everything manually by hand because we know how annoying that is. For example, I keep all my designs for my app in this notion page here. So I just tell GMA to use it and it pulled all the design assets, all my brand colors, all the fonts directly from this notion page. And this is what it built. Now, if you're already working on an existing PowerPoint, for example, you can simply drag it into Gamma 5. And the nice thing is that you don't have to redo the design cuz it keeps all the design and formatting. So you can pick up right

6:13where you left off. And most importantly, the design. Every presentation has a unique design style. So it actually looks like a professional designer spent hundreds of hours on it. So if you guys want to try out Gamma 5, I'll put the link down below. Thanks again, Gamma, for sponsoring this video. Now, let's check back on our app. Fast forward a couple minutes. This is actually done. Gave me the first version. So we've got this iPhone mockup here. And this is the homepage that we

6:34have here. And let's test if this works. So if I click on water, let's say I'm drinking um 150 250. Okay. So the water level moves according to the volume that I'm selecting. And I can also move this around which makes it very interactive here. And you can see also some bubbles here. And I think the water moving here is pretty good. It's very fluid. Okay. I can just indicate how much I'm drinking as well. And if I click on add water, it will actually add and increase this

7:05water level here, which is really cool. I guess the goal here is to drink enough water to fill up the whole container. And let's try adding some juice. And again, I can slide using the slider here. And all of this looks good. You know, it took everything from the water llama app and just brought it over. And all of this is made from code, by the way. That's why it is interactive. Let's add that as well. And let's try to swipe this. Okay. So, I think it's missing that function to swipe to reveal more drinks. We can definitely fix that in

7:34the next version. If I scroll down here. All right. So, we've got a couple of challenges here. Uh, this is still coming soon, so it's not clickable. So, if I click here, we've got some settings here. I can change the unit of measure. And I can also toggle this on and off. Add beverages. All right. So, we've got a couple of options here actually. So, we can have latte. And it already knows how much water content is in each drink here. So that is pretty cool. Let's exit out. Yeah. So I think overall this is good. But let's now check the onboarding. So it gave me a shortcut

8:04here to restart the onboarding. So I'm going to click on that. And this is basically the onboarding screen. All right. So not the best animation there. Um I feel like the hand is kind of stiff. It's not as smooth. It's not fluid enough. Right. So we can change that and let's get started. Okay. Now it's asking me to pick my unit of measure here. And I can move this around. I think this is to encourage new users to experience the app before they even join, which is a good tactic. Add some water. There you go. Okay. So, that is the next page. All right. So, you'll

8:38see here that the animation of the capabara is not very smooth. And when it jumps, the hand is kind of stiff as well. So, this is something we can improve on. And let's actually go to the next page and hit allow. All right. So, this is the next screen. Um, the swimming thing is pretty cool, but if you notice something, the motion is not very smooth, right? It's very stiff. And this is kind of the limitation of building this with code. If you are doing this for a character that moves around a lot, it's very hard to get it

9:10to move the way that you want sometimes. Now, I do have a couple of solutions to this, but let's move on to the next screen first. So, let's hit skip. All right. Yeah, this screen is not bad. Feel my best. Okay. loading screen. All right. So, that is the payw wall and all of this is uh just a mockup. So, I can click on either one of these and hit

9:29continue and we get to the home screen. Yeah. So, I wanted to show you this first version which is not perfect. Most of the animations work, but a few of these Capiara ones are obviously broken, but I wanted to show you this on purpose actually. So, you can see some of the limitations of Opus 5.5 and how to overcome them. Because my goal with this version is actually to build 95% of the app which is the overall structure like all the pages how they flow from one page to the next and all this logic here and all the simpler animations here. And I think this is still a huge win cuz you

10:01don't have to design all the strings one by one cuz that would take forever. So obus 5.5 is doing all the heavy lifting here and we just need to polish it. Now before I show you how to fix all these broken animations here, you have to understand why they broke in the first place. So basically there are two types of animations in this app and they're both built completely different. So on the left here you're going to see that this is the interface. So things like adjusting the water level, even selecting the different types of drinks, all of these things can be made with code and they will look good, right? And

10:30we always want to use code whenever we can because it is interactive. The files are small and it stays sharp at any size. Now on the right side here is the characters, right? So you notice when I ask claude to animate the capabara in code, you're going to see that the movements, the motion here is very stiff. It looks like a puppet with sticks, right? Especially the hands there. So the workaround here is actually to generate these as videos using something like Higsfield. And you'll get a much smoother animation like this capabar swimming and when it's sipping water and also when it's jumping, it is very smooth. Now most

11:02people think that video files are huge, right? But I'm going to show you a couple tricks that you can do to make sure that these files are super small but still high quality. So what I can do now is I can start to recreate this videos in Hickfield. So I'll go back to cloud and I give it this prompt create this three different animations using Hfield MCP. And because I have the Hickfield MCP connected to my claw session here, I don't have to go to Hicksfield directly. I can just prompt Claude and it will call Hickfield and create those videos. And I'm just listing out the three different

11:29movements here. So number one is the capibara sitting and sipping from a glass of water which is this one in the middle here. And for this I wanted to use C dance 2.5. And the second one the capibara leaping which is this one over here. Now here I'm including an instruction to follow the reference

11:45video. So this is the reference video. And here you'll see that this is llama jumping. So I want that exact movement and I'm just including the path to that screen recording here and indicate the exact time stamp where that happens. And for this one I'm not going to use C dance but I'm going to use a new video model by Hicksfield called Genjutsu

12:04which I'm going to show you in a second. And I'm going to just ask it to follow the exact motion of the llama in the reference video. Now I'm doing the same thing here for the capibara swimming from left to right and then from right to left, which is this first animation here. And again, I'm including the time stamp here and using Jendusu as a model as well. So I'm going to hit go. And a few minutes later, we have a few results from Hicksfield. So we've got this um sipping animation here, and it gave me a couple variations here, which I can just choose and see which one I like. Now if

12:32I go to Hicksville itself, you can see how this video was actually made. So here is the prompt that Opus 5.5 wrote for me and also reference or uploaded the picture of the Capibara which is this one and also the reference video that he wanted to follow. So that was taken from that screen recording that I shared with you. And the model that it's using here is Hixfield Janjutsu motion transfer. And one more thing to note is that these videos are created with a green background. So it is easier to remove later. So that is something OP

13:025.5 we will be able to do afterwards. Now if you guys are wondering how much credits those videos took. We actually created three videos here. The leaping, the brinking and the swimming movement. So for the leaping I used jenjutsu here and it cost me 15 credits and for the other two movements I used sea dance which cost me in total of 60 credits to make that video. So you can see the difference here right? So something like this, you can use something like Jenjutsu and you can upscale it which only will cost you about 0.1 credit which will give you the same quality. So you don't have to always default to the

13:33most expensive model to do most things. All right. So before I ask clot to use this videos to create new version, I do have some corrections that I want to make so we can do everything at once. So let's say on this page I want to make some changes. Let's say I want these buttons to wiggle around when it hasn't been clicked yet. So I think this will invite the user to click on them. Now I think most people what they'll do in this case is they will just take a screenshot of this and they will do some markups and they'll prompt Claude manually which is totally fine but if

14:03you have a couple of screens that you want to change that will get quite tedious. So, what I like to do, and I find that this is the quickest way to ask for changes, is just to screen record the entire screen here and just dictate your request with your voice and then give Claude that video. And instead of typing your prompt to ask for changes, you're actually just speaking to it, which is a lot quicker than typing. Right now, for me, I'm on a Mac, so I can just like screen record this section here. And I can just dictate what I want to be changed. So I can say,

14:31hey, in this page, I want these buttons that has not been clicked to wiggle around to invite the user to click on them. And by the way, I have my cursor here. So Claude is going to know what I'm pointing at. And when I'm on the homepage here, I can see that there's a glitch here on the water. I don't know if you guys can see that, but this is

14:49something that I want to change as well. Fix the broken water animation here. And I also want to remove this capibara icon here. and also make sure that I can use my cursor or my finger to swipe through the different types of drinks. Currently, I'm not able to select more drinks here. And let's also add some sound effects. And again, you want to look at the water llama app for inspiration. So, I can go back to Claude and I'll just paste in the path name of that screen recording which is on my desktop. And I'm also going to add, hey, can you use the cap bar videos we

15:17created in Hicksfield earlier and replace and update the mockup. And then I'm going to hit go. And it's going to watch the video and it's going to implement the changes. And a couple minutes later, we have the new version here. So, we've got the new animation that we created in Higfield and it's applied on the first page on the onboarding here. And let's go through the screens again to check if everything is now correct. So, I can pick the

15:39water. Let us go to the next screen. There you go. So, the capar leaping here, which looks really good. If you compare that to the first version, this is night and day difference, right? And this is a lot smoother, right? And let's move on to the next page. So, this is the swimming scene. Yeah. So, I think this looks a lot better as well. A lot more fluid. And we've got the wiggling buttons here as well. And again, this is the first version which looks really bad. Now, if I fast forward to the home screen, we can see that the glitch is now gone and the cap bar icon is gone as

16:14well. And let's see. Yeah, so now I can swipe and see more drinks here. So, it made all the changes that I asked for. All right. So now I want to show you the coolest part of the video which is this screen here where I can make the cap bar actually follow my cursor here. So if I click down here, it's actually going to follow me and it has that water ripple here around it as it moves. And all of this is actually made with code. There's no video here. Even the moving water here is made using code. Now what you see here is actually the mockup on my

16:44browser. But but this looks even cooler when I bring it to my phone cuz when I tilt my phone, it will actually follow the direction of my tilt. and I'm going to show you the prompt that I used to achieve this. So, I'm going to go back to Claw here and I'm going to paste this prompt that I have. It's kind of a long prompt, but don't worry about screenshotting this because I'm going to make all the prompts that I do in this video available for free down below. And before I go through the prompt with you, I want to explain at a high level how

17:07this is actually structured. So, if you look at the pool here, this is just code and it's just a constant flow of water. But the cafe bar here is actually an SVG image. Now, the reason why I'm using an SVG instead of a JPEG or a PNG is that SVG is a vector file. It will stay sharp at any size. So, even if you triple the size, it's still going to look as sharp as this. Right? And also, the file size is going to be very small as opposed to if you're using a JPEG or a PNG, it's

17:34going to break if you scale it too much. Right now, if you guys are curious, I actually did ask it to create the capabara using code and this is what I get. So, obviously, it's not very good. It looks like a stick figure. And I also don't need the capabara to be moving around here. I just want it to be laying on the donut here. And because I don't need any movements, I can get away with an SVG. And and also the thing that allows this thing to follow your cursor or the way that your phone tilts is actually the phone's gyroscope and gravity sensor. And that will allow it

18:03to understand which way you're tilting the phone. So that is actually how it works behind the scenes. And you don't have to worry about the detail on how this actually works cuz everything is going to be coded into the app. So the first step that I took is I went to claude again and asked it to use this field to generate a couple of vector images of this capabara on a floating donut. I just had to describe to it what I'm imagining in my head. And it gave me three different options here. So we got this one on a donut, this one on a watermelon, and this one on a blue

18:32donut. So I just picked this one and I just save it to my desktop. And the next thing I did was to find a picture of a pool here. So that clot has some design direction in what I want the pool to look like cuz you can see here there are different types of pool, different designs. So I just simply save this image again to use it for my prompt later. So I'm ready to create that screen. So built this first screen of

18:55the mobile app with Expo React Native. So this is something that allows us to preview the app on our phone. And I have attached two images. First is the character Capibara lying on a donut float which is this one. And you can see that this is actually a SVG. So if I scale it right, if I make it bigger, it doesn't break. This is exactly what I want. So I'm going to attach that one here. And number two, a swimming pool as a reference for the look of the water, which is the one that we got from Pinterest. Right now, for the rest of the prompt, I'm just telling it what I

19:24want in terms of the text stack, the scene, and also the action and how the character will behave as I tilt my phone. So, I'm not going to bore you and read every single thing here. You can just download the prompt. And you can actually use this to create the same look. And this is how I want the water

19:39to react in terms of the ripples here. And the last thing here is when it's done, create the expo dev server. So, I can scan a QR code and open it on my phone. And I will just hit go. Now, fast forward to a few minutes. It's starting to come alive here. And now, it's given me a QR code here that I can just scan with my phone. And I can immediately open it in Expo Go. Now, if you guys don't have Expo Go, you can just download this particular app here on your iPhone. And once you have that, you just simply use your camera app to scan

20:08this QR code and it will open up the app in the Expo Go app. And now you can see that I have the app open. And as I tilt my phone, the capabara will actually follow the direction of my tilt. And I think that looks super cool. And I think this will be a great screen as a user opens the app. So they can immediately

20:25feel how interactive this app will be. And it also reacts to my finger as well. So if I tap my finger around, it will actually follow me as well. So I think this is super cool. Now, if you guys want to download this prompt that I used to build this particular screen, again, I'm going to have it down in the description below. And also, all the tools that I mentioned in this video is also going to be down here. And that is all for today, guys. If you guys learned something today, I would appreciate a like and subscribe. And as always, thanks again for watching till the end

20:50of the video. If you guys want to watch another video, I think you're going to like this one. Take care and I will see you