Claude Opus 5.5 is INSANE for Mobile App Animations (Apple’s Dynamic Island)

0:00 In this video, I'm going to be showing you how I'm using Claude Opus 5.5 to take an app that I just built and create this gorgeous dynamic island animations that you see on iPhones. And not only

0:09 that, but these live activity widgets that feels interactive, just like what you see when you're waiting for an Uber or when you're tracking your flight. I mean, these animations just elevates the

0:19 user experience and makes your app more engaging and fun to use. And all of these animations are what Opus 5.5 really excels at. And all of these can be created with very simple prompts that

0:29 I'll be showing you today. So if you follow along in the next few minutes and even if you've never created a mobile app before in your life, you're still going to be able to do this. So without

0:36 wasting any more time, let's get started. All right, so before we start building, this was the app that I built in my last video called Brownie. And if you haven't watched that video, I'm

0:44 going to put a link in the description below. But let me give you just a quick rundown of what this app actually is to give you some context. So, this is basically an app that helps you drink

0:52 more water, allows you to track your water intake, and it's inspired by this app called Water Llama that is making at least 100K per month, which is pretty insane for a simple app like this. So,

1:02 basically, what we're going to do now is take what we already built so far, bring it to the next level, which is creating dynamic island animations, notifications, and also the lock screen

1:11 widget. Now, you might be wondering, why are we creating this dynamic island animations in the first place? What is the purpose of this, right? Well, Apple calls them live activities. So, these

1:19 are basically widgets that Apple has created. And if you have an iPhone, you've probably seen this already. When you order an Uber, the island shows how far away your car is, or maybe you're

1:28 tracking your flight. It shows where the plane is. Or maybe if you have a gym app, it can also show a timer or your heart rate while you're training. So, it's basically good for tracking things.

1:37 Right now, because the app that we're building here tracks your water intake, I think it's going to be super useful to have a dynamic island where the user can probably keep track of their water

1:47 intake for the day and also get reminded of the next time they should drink water. All right, so I'm going to make this video very easy to follow. So, I'm going to split this video into three

1:55 chapters. First, I'm going to show you how to create this dynamic island animations and the live activity screen here. Number two, I'm going to show you how to preview all of these animations

2:03 live on your actual phone using something called Expo develop and build. So you can test all of these widgets live on your phone. And number three, the final step is to build an animated

2:13 landing page to promote the app. And none of these animations were created using AI videos, but all with code using Opus 5.5. So we got a lot to cover. I'm going to have timestamps in the video as

2:23 usual, so you guys can skip around if you need to. Let's get started. So I have cloud code open here and since this is a continuation of the app that I already built in last video I want to

2:31 give it all the files so it has context on what we built so we don't have to start from scratch. So as you can see here I've connected to this folder called animated apps on my computer and

2:40 I also have Opus 5.5 selected with high effort. Now you don't always have to have this on high. I've gotten good results with just medium effort. So if you are conscious about your usage limit

2:51 you want to try medium first and see if you get the results you want. Otherwise, you can set it on high, but for the purposes of this video, I'm going to set it on high. Now, before I give it a

2:59 prompt, I like to look at references to see what other people have built in terms of dynamic islands. So, as usual, I like to go to Pinterest and look at some examples. So, if you type in iPhone

3:09 dynamic island animations, you got a lot of examples here. And I found this one that I quite like. Obviously, there are a lot of variations here. And I'm just going to give the whole thing to Claude.

3:17 So, he has some design direction. But if there's a particular one that fits your style, you can just obviously grab that specific one and give it a clone. So I'll just save this in my computer and

3:26 I'm going to make sure to reference this in my pro. Now there's one more thing that you need to know when you're designing Apple specific notifications cuz they have very strict design

3:34 guidelines in what you can or can't do. So if you go to this page, which is the Apple official guidelines, you can see how you should design this widgets. So you can see what it looks like in

3:43 compact mode or in minimal mode or even expanded mode. and even as far as the amount of padding you need to have when you're designing this widget. So, there is some flexibility in what you can do,

3:53 but there's also a lot of things that you need to follow. Now, you can read all of this manually cuz it's good to understand the basics. You want to understand the main points, but you also

4:01 want to give this reference to Claude to read. So, it will follow the rules when it's designing your widgets. So, I'm going to go back to Claude here and I'm ready to paste in my prompt. So, what

4:10 I'm saying here is I want to design a dynamic island for the brownie app. I want you to study the screenshot and give me three different variations including the minimal, compact and

4:19 expanded versions. Now I'll just drop in that screenshot that I got from Pinterest so it has the context and then next I'm going to say study and follow Apple's guidelines or documents on

4:28 creating these. Now what I would normally do is to paste in the URL of this page here but Claude is actually smart enough to look for the guidelines itself and I also don't want to limit

4:38 its research to only this page. So it might find other pages as well that's relevant to design our dynamic island. So I'm just not going to put that URL here and it should be able to find it on

4:48 its own. Next, I'm going to say show the designs on a real iPhone 18 mockup built in local host. Show controls to preview the animation when the drink is added and reset. And last but not least, I'm

4:58 going to invoke the claw design skill here. And if you guys are not familiar, we used to have to go to cloud design separately to create any type of design and bring it over to claw code. But now

5:06 by just invoking claw design within claw code is going to actually use their design skill to build the animations. So now I'm ready to send it off. And just in a couple minutes the designs are

5:17 ready. And if you're wondering we've got the prototype running on my Chrome browser here. And keep in mind that we're just doing a design prototype now. And once we approve these we're going to

5:26 bring it to our actual phones. But now you can see that we have three different examples here. So, I can actually click on this and expand it to see the expanded version and also this one to

5:36 see what the animation will actually look like. And I think they look super good. I mean, it took all the design language from the app that we built and even use the teal color here that we

5:46 have on the app. And to be honest, all of these look really good. It's just a matter of preference which style you want. I personally like this one. It has the cup here. And you can also see your

5:55 weekly streak. So you can see if you met your goal during the week and I can also see the countdown timer here to remind myself when I should drink my next glass. And then there's a button here

6:06 which if I click on this it should open the app. Now claw also gave me a button here to simulate the animation. So if I click on this you will see how the elements animate. And if I add another

6:17 drink that's how it will show up. And as you can see the water rises here on the glass. And if I want to reset I can just do that right. So you can ask lots to basically build any type of controls

6:27 that you need here depending on the app that you're building obviously. And I think this is a really easy way to test out your animations before we deploy to the actual phone. Now if you go back to

6:36 cloud you can see that it has already read the Apple docs and guidelines to make sure that all our animations are within its guidelines. Things like the font size and how long the animation

6:46 should be. And if you scroll a bit more you can see that it has found four different sources. So that's why I said what is actually smart enough to find its own information depending on what

6:56 it's trying to build. So all you need to do is basically just to trigger it and say, "Hey, follow the official docs to build this." All right. So out of these three, I think this one looks the best

7:05 in my opinion. So I'm going to go with this one. And I also like the compact version, which is this one. It shows you the glass, how much water is in it, and also the countdown timer here. I think

7:14 this is perfect. All right. So I'm going to go back to cloud now. I'm going to paste in the max prompt to build the lock screen and also the square widget. Right? So, let's go with design C and

7:23 let's build the live activity on the lock screen, which is basically this widget here that you see when you lock your phone. And also a square widget based on the above design. So, if you

7:33 don't know what a square widget is, it's going to make sense when I show you the result. And always follow Apple's design guidelines. So, the design on a real iPhone 18 mockup built in local host and

7:42 show controls to preview animation when drink is added and reset. And I'll just send that off and wait just a couple minutes for it to build everything. And just in a couple minutes, it's ready

7:52 with the designs here. So, based on design C, it created three more variations of the lock screen along with the square widget. So, this square widget here is something that you see on

8:03 your iPhone just to track the water intake also with the countdown timer. Now, I like this particular one, the frosted one here. It has the liquid glass style that Apple has been going

8:14 for lately. I think it looks really clean. But for the square widget, I think I'm going to pick this one here because this has the wave of water here, which I think will look really nice as a

8:24 widget. And again, if I click on this button, you can simulate the animation and see if it looks good or not. Otherwise, you can just go back to Claude and ask it to make changes. And

8:32 all of these are actually done with code. So, there's no video generations. So, it's very easy and quick for Claw to make changes to it. And speaking of making changes, I think the best way to

8:42 ask for changes in something like this, and this is how I personally do it, is just to take a screen recording of what you see here and just record your screen and your voice and just tell it what you

8:51 want to change, which I think is a lot quicker than taking a screenshot, doing markups, doing all these arrows and lines. And once you save your screen recording as a video, you can just drop

9:01 it into Claude and ask it to implement the changes that you mentioned. Now, there's one thing that Claude just added to its desktop app, which is this thing called session rail. So, if you click on

9:10 this, you can actually see the context window that you have here, and you can see the breakdown of the things that are using the most of your contact window here. So you can see whether it's the

9:19 MTP tools that you have or your messages or the skills that you've installed cuz basically the fuller this gets the stupider the AI will get even though you have a million contacts window but I

9:29 like to have it at about 300 400,000 before I try to compact it or start new session. But if you don't want to start a new chat you can simply click on compact session here which makes it

9:40 really easy cuz previously you had to prompt it to compact the chat but now you have it as a button which I think is a lot easier to do. Now, since we're happy with the designs here and we

9:49 already picked the ones that we like, we're going to take it to the next step, which is the more exciting part in my opinion, which is to test everything live on our phones. Now, before I show

9:57 you how to do that, you want to understand the high level of how all of this works, right? So, what you see here, the mockups that we just built, these are made with code that is

10:06 designed to work on a browser, right? You can't just take the code that you have here to build an iOS app. So all of the code that's written to create all these visuals here have to be rewritten

10:15 in something called React Native which is actually the building blocks for an app here and that will determine how the buttons look, how the pages will swipe, how we scroll through the pages. So all

10:26 of this is React Native with one exception. So the dynamic island here is going to be written in something called Swift which is Apple's own language. But of course you don't need to know any of

10:35 this cuz we're going to ask Opus to do everything for us. Now in order to do this you're going to need two things. One is an Expo account which is free and the second thing is you're going to need

10:43 an Apple developer account which will cost you about $99 a year. Now Expo itself is free but there are two types of Expo products which is Expo Go here which is something that you've seen me

10:54 use to test an app get a quick preview but there's a lot of limitations here with Expo Go cuz you can't test notifications you can't show widgets. So basically you can't test out the dynamic

11:04 island that we've been designing. So, you want to use something called Expo Develop and Build, which is what a lot of real developers use to build the app because this will allow you to test

11:13 every single thing like databases, notifications, your app icon. But one downside to this is that you do need a $99 Apple developer account. Otherwise, you won't be able to test any of these

11:23 notifications. Now, to get started, you want to go to this website called expo.dev. So, you just want to create a free account. And and in the next step, I'm going to show you how to connect

11:32 cloud with Expo. And if you haven't already, you want to go to developer.apple.com and get a paid account here. And once you have this account, we can also get Claude to

11:40 connect directly to set up everything for us. All right, so I'm back to Claude and I'm ready to prompt. Hey, I'm ready to test the app and the dynamic island designs on my phone. Rebuild the app in

11:50 React Native using Expo. Use EAS build to make the development build so I can install it in my phone and test everything including the dynamic island. Now here I also want to indicate that

11:59 for the lock screen I pick frosted but for the widget I pick number three with the water level. So it's going to be this design here on the left and for the widget I'm going to pick this one all

12:08 the way on the right. I also wanted to add a setting screen on the app itself with an on andoff switch so the user can actually enable or disable this live activity on the app. And also notice

12:18 that I'm not giving it any screenshots or references for the app. This is already connected to the app that has all the files for my app from my previous video. So, it will be able to

12:28 pull everything from there. And lastly, I did mention here that I do have an Apple developer account. Guide me step by step and tell me whatever you need me to sign into anything. So, I'm going to

12:36 hit go and wait for it to get back to me. So, now it's checking the expo project and trying to get me to log into EAS. And and if you notice here, this is a recent cloud update as well. So, now

12:47 you can see the task list. So you can basically see what clot is actually doing, what task it's working on at the moment. So you can immediately see if it's actually doing the right thing.

12:56 Otherwise, you can just stop it right away. All right. So now it's finished preparing everything. App is ready to build. Now we need to register our iPhone with Apple. So this is something

13:04 that you need to do only for the first time. And also this is the step where I'm going to sign into my Apple developer account and also the expo account. So now it's giving me a link to

13:13 open the terminal. But don't worry, this is actually inside of the cloud desktop app. And this might look scary if you've never seen this before. But since this is inside of the Claude desktop app, if

13:22 you're not sure about something, you can just ask Claude because it's able to see whatever is here on the terminal. So, what this is asking me is if I want to use this account inside of my Expo

13:30 account. So, I'm just going to click yes and log into your Apple developer account. And I'm also going to hit enter here. And it's just going to log in by itself. And because I've already logged

13:41 in before, it already has my credentials. And it's also now asking me how would you like to register your devices and I can select from any of these options. I'm going to pick number

13:50 one here because this is the easiest. And now it's given you a barcode where I can now grab my phone and I'm going to scan it with my camera on my phone. Now I did went ahead and scan that barcode.

14:00 And this is just a mirror of my phone here. And this page showed up. And now it's asking me to download a profile which is something that you need in order to test the app on the iPhone. So

14:10 I'm going to click on download profile. I'm going to click allow. And now if you go to the settings page, you're going to see this profile downloaded. I'm just going to click on this and you want to

14:18 just install it. Now I finished installing it. So I'm going to go back to claw here and I'm going to click install so you can start building it. Now it's going to finish the rest of the

14:26 steps here. And you just have to wait for the next instruction. All right. So next it's asking me to sign the app cuz we have some dynamic islands, some widgets that we need to log into Apple.

14:35 We need this to complete the step. So I'm going to click on this and I'm going to say yes. I'm going to log in and I'm just blurring out the sensitive information here. And now you can see

14:44 that it is actually building the app and uploading it to AA as we're going to come back when this is ready. And fast forward to a couple minutes. The build is now finished. Now there's a new QR

14:55 code that I can scan. So I'm just going to use my phone to scan this. And it's now it's showing this page asking me to install the app. So I'm just going to click install here and say install. And

15:04 now if I go to the home screen, it's done installing the app on my phone. As you can see here, this is already branded. I've actually pre-esigned the app icon using cloud as well. Otherwise,

15:15 it's going to show you just a generic expo logo. So, I can now click on this and these are some of the apps that I created before and I can click on brownie here and it's going to load up

15:23 the app. And I'm going to hit continue, X out of this, and get started. And that should bring us to the homepage here, which is perfect. Now, I'm going to get rid of this tool button here because

15:32 it's kind of distracting. So, I'm going to just disable that one. Okay. So now I can test whether this works or not, right? So I can go to settings here and remember how I asked Claude to create a

15:44 settings page where I can toggle this on and off. So if I scroll down here, you're going to see that I can now uh toggle the lock screen and dynamic island on and off. So this is on at the

15:54 moment and I can expand this and I can see as a user what the dynamic island will look like and what it actually does. Gives you a nice short description. So I'm going to exit out of

16:04 this one. All right. So let's test if this actually works. So to trigger the animation, you actually want to have a drink. So let's say I want to drink some water here. I can select how much I want

16:14 to drink, add water, and then adding some water here. And now the countdown timer works. Next to drink will be in 44 minutes. Again, this can be adjusted in the settings page. If I go to settings,

16:24 I can adjust the reminder here. Now, if you look at the dynamic island here, there's nothing going on here. So the way that this works is that you have to really exit out of the app. And then you

16:32 can see the dynamic island animation populate here because the purpose of this is actually for the user to be able to track whatever it is they're tracking. Even though they exit out of

16:42 the app and move on to something else, right? So if I click on another app here, uh it's still going to show up here. So you don't always have to be inside the app to be able to track your

16:50 water intake. And if I long press on the dynamic island, it's going to show the expanded view, which I think looks really good. All right. Now, if I go back and show you the original design of

16:59 this one and let me put that side by side, you're going to see that it's pretty much exactly the same. Like, it looks really good. Right now, of course, there's limited interactivity here. You

17:08 can't do much here because of what Apple has set in terms of guidelines, but you can have a button here to have a drink. And when you click on this, basically, it will pull up the app and you can log

17:17 in or you can add a drink here. Okay. So, if I click on coffee again, I can do that. And then if I go to um the homepage and I see the expanded version, it's added some more water inside of the

17:29 cup here. So we know that everything is connected and working properly. Now there's one more thing that I want to show you which is adding a widget. So I can long press on the screen and click

17:38 edit, add widget. And then I can select the widget here on the left side. There you go. And add widget. And there goes our widget. So I click click done. And if I want to enter a drink, I can simply

17:51 tap on this button and it actually log it automatically and it will open up the dynamic island as well. So in this case, because it is a widget, you don't have to open the app to log a drink. So you

18:04 can actually set this button to do certain things. And in this case, obviously, we're going to add a drink. And here we've got the live activity widget on my lock screen. And I think it

18:13 looks good. And again, you can turn this on and off in the settings page. All right. So, now that your app is pretty much done, it's time to build a website or a landing page to showcase all the

18:22 features and benefits of your app. Now, I'm entitely keeping this part last because you want to have all your app designs ready first so that Cloud has the most amount of context and the

18:32 features that you have, right? So, you can grab all the design elements from here to make sure that your website is on brand and matches exactly like your app. Now, because we already have so

18:41 much context in this folder, I can simply start new chat and I can paste in this simple prompt, right? Build a landing page based on the app that we just created. Make sure the website is

18:50 full of beautiful animations that are taken from the app designs. Also, showcase the animations of the dynamic island lock screen and the ability to track the water intake. And that's about

19:00 it. I'm going to ask it to build it in local host and also invoking the claw design skill here. And I'm just going to hit go. And just in a couple minutes, we get this, right? So, this is directly

19:10 taken from the home screen. So, if I go back here, this is actually the home screen here where we've got this animation and it actually moves around as I move my cursor here. So, that is

19:20 pretty cool. And let's scroll down a little bit more, see what we have. And I love this wave here as the better. I think that looks pretty cool. Okay, so we've got the first feature here. Every

19:28 glass feels browny up and we've got this floating thing here. Wow, all these are clickable. And scroll down. You see all our widgets that we designed are all here. And if I scroll down a little bit

19:40 more, it gives you the dynamic animation as well. And then we got this gallery of all the pages here, which is not exactly what I want. It looks cool, but I think I'm going to change this to something

19:50 else. And we got this different types of drinks here that we can scroll through. And then we got the swimming capara here, which is also taken from this page here. Now, I think this is really good

20:01 for the first version considering that I gave it a very short prompt, but I think we can do a lot better. I mean, I do like the design direction here, but if you really look at the text, the copy

20:10 here, it is not very good, right? It's AI slot. I mean, they're technically correct, but when I read this as a human, it doesn't make me want to download the app. So, it's basically

20:18 written to showcase the features instead of the benefits to the user. And I think if you are building a website to convert people into buyers, I think we should definitely improve the copy here. Now to

20:29 make Claude understand what is good copy, you have to give it a skill as well. So I found this repo by Corey Haynes called marketing skills. So basically this skill helps Claude or any

20:39 other agents on what good copywriting sounds like, right? And this is a very popular repo with 56,000 stars. And this is not just about copyrightiting. It has something about email marketing, about

20:50 SEO. So this is something we can give to Claude and ask it to improve our website based on the copyrightiting principles that is found in this ripple. So you can go back to cloud and give it the next

20:59 prompt here which is to paste in that URL of that repo and ask it to check this repo. Just take what you need to improve the copy of our website because obviously the repo has a lot of things

21:09 like SEO which we don't need and also I wanted to suggest the changes before you actually make them and you can just hit go here. Now in a couple minutes it finished working. It has installed the

21:18 copyrightiting skill here and it's given me a list of suggestions on what I should improve on on the website and I did go through all this and actually most of these are valid but the only

21:26 thing I don't like is that the suggestions are too wordy here. So I'm just going to ask it to apply these and just makes them shorter. So I can say something like this implement the

21:35 changes and also add reviews and FAQ section. And I'm just going to send this off. And a few minutes later we have the new version with the copy improved. So, I can see that everything is less wordy

21:46 and more punchy, which is a good thing. And if I scroll down here, it's actually added a couple of more elements here, which is the apps rating. So, a few small touches here that improves the

21:55 website as well. Watch brownie fills up with average glass. I think the wording here is a little bit better. And a reminder every time you check the time. So, I noticed that the wording here is

22:04 written for the user in mind. And if I scroll down here, your usual drinks, one type of way. And a couple of more screens here. And then we have more animations of the different types of

22:12 drinks here which is really cool. Got challenges. And we also have a review section which it added and an FAQ section which is actually on brand. I love how these cards open. So everything

22:23 looks really good with all the right colors. So I really love that. Now obviously all of these is not 100% right. You always want to go in here and make changes and make sure that all the

22:32 wording is correct. You never want to take this as is. But it takes you 90% of the way. It gives you a nice baseline to start from so you're not starting from zero basically. Okay, so the landing

22:42 page is pretty much done but right now it only lives on my computer and nobody else can see it, right? So the last step is to get this website live on internet and for that we're going to need web

22:52 hosting. Now you can use any hosting provider you want but today I'm going to be using Hostinger who is kindly sponsoring today's video. Now, I've been using them for years and for many of my

23:00 websites. And what's nice is that they also have a direct connector to claw here, which makes it really easy for us to deploy or even make updates to our website. And I'm going to show you how

23:09 easy it is to set this up. So, first you want to go to the link in the description below. And if you scroll down, you're going to see that they have two options in terms of plans here. I

23:17 would pick the unlimited version here cuz with 3.49 a month, you get unlimited websites. You get a free domain for one year. So, we're going to just pick this one here. Now, here you can pick the

23:25 period. Obviously, the longer you go, the more discount you get and the cheaper it gets, right? So, for the purpose of this video, I'm going to pick 48 months here. And keep in mind that

23:33 you also get a 30-day money back guarantee. So, if you change your mind for any reason, there's that option for peace of mind. Now, before you hit continue, you want to enter a coupon

23:41 code here. If you click Jason Lee, you can actually get an additional 10% off. So, that gives you an even lower price. Now, you can see that they also have a bunch of Black Friday deals at the

23:50 moment. For example, you get a free domain for one year. You get a free mailbox for one year. And you also get double the AI credits if you want to build websites with AI. And they also

23:57 have hosted your reach, which is their new email marketing platform. And they're doing Black Friday pricing on this as well. So, you can imagine you can basically do everything in one place

24:05 with one subscription. Now, once you're ready to proceed, you can just click continue and you can just complete your payment here. Now, once you successfully created your account, you can now

24:13 connect your cloud account with Hostinger. So if I go back to cloud here in my settings page, I can click on connectors and I can go discover and then search for Hostinger and then I can

24:24 just select this one and try to connect to it. Now I'm already connected to Hostinger, but if you're doing this for the first time, you can just click on it. There will be a button to connect

24:32 here and it's just going to open a new tab in your Chrome browser and it's just going to ask you to authenticate yourself and that's pretty much it. And you also want to make sure that you

24:39 toggle this to always allow. So Claude is going to be able to make changes to your website on Hostinger. So now I can open a new chat and I can click here see if I'm connected to Hostinger which I am

24:49 and I can simply say hey can you upload the website to Hostinger through the connector I have authenticated my account and hit go and it's going to take all your files that you just

24:57 created and it's going to deploy your website automatically without you having to manually upload the files and just in a couple minutes the website is uploaded so you can see this is the new website.

25:07 So if I click on it, you'll see that this is the website that we just built with a temporary domain at Hostinger where if you want to connect to a branded domain, you can do that as well

25:16 in Hostinger. So yeah, you can see how easy it is to deploy your website. Hostinger is doing a lot of deals at the moment. If you want to grab this discount, I've got the link in the

25:24 description along with the coupon code. And that is it for this video. And I hope this opens up your mind to many more ideas in what you're able to build with AI. So, if you like videos like

25:32 this, make sure you subscribe because I do these videos weekly showing you amazing things that you can build with Claude. But if you guys want to go back and watch that first video that I did in

25:40 how I initially built this app, you want to click here and I'll see you