Enjoying this issue?
Get tomorrow's AI & engineering digest in your inbox — hand-picked, summarized, and always spam-free.
TLDR
Claude Motion Design 2.0 is being pitched as a way to build scroll-stopping websites that combine AI-generated design with video animation, and the pitch is that it both improves quality and lowers cost. The real claim is that pairing motion design with clean architecture is what turns visitors into buyers, not the animation itself. It is worth paying attention to if you build marketing sites, but the video is a demo and strategy pitch, not a technical deep dive.
Key points
The video demonstrates combining Claude-generated motion design with video overlays to build animated websites.
The presenter claims this approach produces better quality websites at lower cost than previous methods.
The workflow pairs AI-generated design with video animation, using an X-ray overlay to show which parts are video and which are Claude design.
The presenter emphasizes building websites with world-class architecture to convert viewers into buyers.
The video is framed as a tutorial for building scroll-stopping websites with motion design and video.
Tools mentioned
Stop scrolling. Start reading smarter.
Receive the day's most important AI & engineering updates in one concise email. No spam.
Transcript (captions)
Cloud Motion Design 2.0 has changed everything about building beautiful websites and it makes them better quality and even costs less. And in this video I'm going to show you exactly how
to build these scroll stopping websites with motion design and beautiful video. And then I'm actually going to show you how you can build those websites with a worldclass architecture so you can
actually turn viewers [music] into buyers, spend less money and get like years ahead of everybody else. So, if you haven't already, grab that beautiful coffee and let's [music] dive straight
in. Now, the really interesting thing here, guys, is we are combining the actual scroll stopping beautiful video animation with design. What do I mean by that? Well, check this out. If I add
this X-ray on, you can see the difference. And this will clearly show you what has been designed with actual video um animation and what we've used claw design for. Now, this is absolutely
crazy when you see this. So, check this out. We can actually overlay cla design and these different graphics over video. We can for example build anything we want to and you can see these are just
examples of what I built and then we have this beautiful claw design that is interacting on the actual website itself as you can come down you can see all the beautiful things that you can do so
we're taking literally the worldass examples and look at this guy he's even following us down the screen he's loving it and we send him back up he can fly he can do all sorts of things we can have
websites where as you're scrolling down you can see these birds coming down and literally have these beautiful scrolling animations with claude design with claude motion design. It brings a
completely different level of I guess like pop and intuition into the whole system that makes it gorgeous. And the cool thing is guys, there are like so many different ways you can do those.
Let me show you exactly what you can do. You can now have footers using claw design. They do all sorts of crazy things that are interactive. What I thought was really cool is this morph
menu for example. All this here is pure claw design. Look at the quality and the interactivity of this. It is absolutely outrageous. You can create holographic stickers. You can do curtain footers
where you hold basically you draw things up and it drops down. You can even have ones that follow your cursor. So you can make your actual homepages now completely interactive and when you
click on this it actually goes ahead and reacts with it. You can have these beautiful things here that interact. Again all of this guys is just done with claw design. You can have hop
navigation. So as you're clicking on things you can have like graphics jumping over. You can even have interactive footers. So when you click on subscribe there are literal
animations that play. like where have you ever seen anything like this? And I'm going to show you how he can do all of this as well as actually build again more examples of websites that I'll show
you in a second that look absolutely gorgeous. I'm going to show you how you do all this sort of stuff where it interacts as you scroll down the website. Looks absolutely beautiful and
you can see all this sort of stuff is unfolding before our very eyes. Again, let's add on the X-ray and we can see what has been generated by code and what hasn't. And you can see all this sort of
stuff and literally it is absolutely beautiful. And then I'm going to show you how you can actually build this with a worldclass architecture that manages all of your data and so you can actually
scale this to the moon which is a really important thing to bear in mind. So let's talk about clawed motion design. So we want we don't want to be building websites like everybody else. We want to
be able to get higher quality websites that actually have beautiful graphics and leverage the brand new capabilities of claude motion design cuz it genuinely unlocks stuff guys that we didn't really
have access to before. Now, what we're going to do is we're going to go basically go from image and video. We're going to show you how we can do um claw motion and then we're going to look at
how we can actually do that for your business. So, let's begin. Of course, we only need three levels to this. If you follow these three levels, you can do it. It's a proven system. It's super
duper easy. Now, what we're going to begin with first of all is how we actually get beautiful image and video. So, the idea here is very simple. Okay, we're going to actually find at the
beginning um if I show you down here references we love. And to do that, we're going to go to a couple of websites. So, there's two we can really go to off the bat. One is going to be
referral.design, which is absolutely gorgeous. So, come over to this website as a step one. And I want you to find websites that you think are inspirational or really connect to you.
You can search by different categories like this one down here for notion for example is really cool. You got Duolingo, you got ClickUp, whatever the thing is. The first thing we're looking
for is reference. And by the way, I built the full guide so you can copy down below. Um, just click the link, you copy this entire skill and you can build these websites alongside with me. So,
first things first is to grab a couple of websites that you like. So, let's say that we like a ClickUp. We just come up to Claude and we just drop in that design reference. We can also go over to
Mobin, which is really cool. Mobin itself is is a decent website. Mobin basically just shows you other kind of um viral, you know, like apps and sites and things you can go ahead and use. So,
you can come down, search by apps. You can come down and search by sites. Again, go ahead and find anything you think is really interesting or any designs it speak to. Like this one here
for example, I think is a pretty cool looking site. What if we could take this and do something magical with it? So, we're going to find a few references. Another great way is just simply to go
over to X and you can type in design websites and essentially that will pull loads of stuff up that you can see for inspiration, anything that takes your fancy. And once we've done that, we need
to go ahead and give it the ability to create image and video. So, for example, if I come over to this website here, you'll see it combines multiple different things. Now, we've got loads
of beautiful motion graphics, which I get on to, but we want the ability to have these beautiful embedded images and videos. And to do that, we need to access the best image and video
technology. So, we're going to shoot straight back over to Claude. Now, what I want you to do first of all is head over to the website down below. I'm going to put a link at the top of
description. So, you just click this and join with me. And basically, we're just going to connect Claude to Hicksfield, which is the one-stop shop for the best image and video models on the planet.
Let's come down now and click on MCP if you haven't connected already. If you've connected already, feel free to skip to the next section. I'll put a link down below. And all you literally going to
do, guys, is click on Claude and click on connect Hicksfield. And then you're going to see Hicksfield on this page right here. And then you just connect it and then you're ready to go. And then we
come to the final section here, which is going to be how we enhance this with the design loop. Now again, just come over to the link. I'm going to share it down below and all you're going to do is come
down and copy everything like this and it covers the entire scum. We come back over to Claude and we drop in the big prompt and effectively we're just going to give it the below instruction which
is hey there I want you to use the attached design references to build me a beautiful website about Claude design. Use the design loop down below and the attach skill to build something
beautiful and use my connection to Higville to generate beautiful video animations and also photos where relevant to bring this to the maximum level. And once you've done that guys,
you're going to be ready to rock and roll. And so we have the architecture locked in, but I really want to show you why we're using Opus 5.5 or Sonet 5.5. So let's go down and check out the next
one here. So we have motion graphics on top of our footage. This is really the exciting thing of how we just make it look completely next level. And just to show you some other ways, guys, that
this can actually integrate here. You can get these nice jelly buttons where you're pressing it. All this guys is just literally cl code. You can have these 404 games where you can literally
run and battle stuff on 404. Why do we care about 404 pages? Honestly, how you do anything is how you do everything. Wouldn't it be funny if like you're trying to, I don't know, sign up and you
have to win the game to give your email. You get the idea. Other things that it can do just to show what's possible is you can have this thing here where basically if you want to get to the
docks you have to actually complete it, right? So maybe we've got to there we go. Actually complete this game to get pricing. You get the idea of how fun and interactive this can actually make any
website design system. We can have things like command bars. Look at this. Do you see guys? This is just all code. This isn't any references. You can have flip banners here. So let's have a look.
So if you want to change it and have a unique way of describing what you're doing and sharing what you're doing, you can have North Studio. So if you want to share where you're at, you can have an
interactive guy walking over there for you. You have this image trail which is great. So maybe everywhere you're clicking images are appearing on screen for you. You can come down and show
selected work and get these beautiful spin galleries which are gorgeous. You can even have this day and night bar if you want to moves over and changes the entire world. I mean this is an
alternative if you don't want video but I think this is best used when you combine it with the Higfield system that I'm sharing here. And then you've even got this bento glide. So maybe I'm
checking out things. You can see how it just draws the focus in and these animations. This is absolutely gorgeous, guys. This is absolutely gorgeous. And it doesn't just stop with websites. You
can use this for apps, too. So, for example, this is something glido I use. It's my speech to text startup. Every graphic that you're seeing on this page, guys, is 100% clawed motion design. Look
at the interactivity, right? I click on next. You can see it comes down. So, I wanted to show that glider could connect to all the apps in your software and it kind of sits above them all, right? So
you can activate claude and chat GBT and codeex and Hermes and blah blah blah through it. So how do we do that? Well, we can show this visually and again you can show anything you want to visually
using claude motion design. I wanted to show you this. I wanted to show you how you can do stuff like summarize videos and it comes down and it does that for you. Shows you all the things you can
do. Now what's really cool about this as well? All this was designed with Opus 5.5 and I show the systems of how to do that. You can click on things and you can even create beautiful animations.
Like how fun is that as an onboarding, right? We did all of this great stuff with the birds again called motion design. And so the idea with the motion graphics on top of your footage is can
you just see the difference guys? Like here this is an image we generated using Higfield, right? To show off the brand. But what we're doing now is overlaying the motion graphics to kind of add a
little bit of extra. Like you know this is the stuff like I learned After Effects at Christmas, right? I was that crazy guy. I mean look at this. This is where it really blows my mind. Like I
thought that was absolutely gorgeous. Like can you see how they overlay the circles and what that looks like? I mean it is absolutely beautiful. I mean like I spent a good few days learning After
Effects a few years ago for fun. But the fact that we can now do this with motion design I think is absolutely brilliant. But you can see how it just elevates it adds these different things in and just
when compared with this figure full generation system like even the thing coming across really takes it to a new level. We even had this one here for glider. I literally gave it one prompt.
I was like go ahead and build me an introduction video for it. And by the way guys, this has audio right where yapping comes in. It shows
you how it works. So you can see having this kind of thing embedded into your website just really unlocks some incredible opportunities. What I was really impressed with is how
the bird turned into the gene. I was like, "All right, that's obviously very freaking cool." And obviously you can see many different examples of this. So what's really important to bear in mind
is the and in fact guys what's really fun even my claw guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy guy he when he flies up he's got a superhero kick because he
can't jump that high so he needs he needs to fly. So every moving bit actually has a job, right? You have the loops drawn in code as you can see. So one render function per section. The
last frame always meets the first frame. So the idea about a loop is the fact that the first last frame need to be the same. So you have a beautiful petrol uh loop. Then you got characters that can
react. So some level of interactivity and then obviously you got this X-ray which I showed you in terms of how that works. So let me show you in practice. So this is an example of one that we
built. Let's go ahead and refresh this so we can go through this one together. So I'm going to head on X-ray and you're going to see now everything we generated with Higsfield and everything we
generated with code. So you have this beautiful spinning disc that is code. You can come down. You can see we've got two eight different Higsfield assets which is fantastic. And look at this.
Can you see the interactivity here? Beautiful. All the graphics are completely taken care of there. We can come down. We can see this beautiful Higfield video we have here generating
all these interesting graphics. How they're moving, how they're interacting, which is gorgeous. And look at this. Look at the kind of interactivity of this guys what this can do. I mean where
have you seen graphics and interactivity like this? Again we got this Higfield ring and again it's about blending the two things together and you can come down and see and these kind of again
this is all code. Look at this. This is all code. This is all motion design. You can see that everything's dropping at the bottom. What's all this dropping down? Resize any code on one tap. Again
this is actually an advertisement funnily enough for motion design. Then it zooms in. You can see and then 40,000 makers plus you. Bam. Beautiful. And this is absolutely gorgeous. Likewise,
if I come over to this claw design thing here, I click on try it. What does it do? It takes us through to a beautiful community. I've had it say so myself. But again, we've got this interactivity.
Let's turn on X-ray to see what this looks like. And again, have this beautiful graphics. You can see the uh seed dance thing we've got there, which is fantastic. We've got more hful
generation stuff there for the animations. And then we have all the graphics. We can come down and we can just see this inter. And we can even drag this down if we want it, right? Do
we want it to be loud or calm? So just like it just brings so much interactivity guys to the table which just adds and elevates so much as you can see scroll down beautiful graphics
combination of code and image generation again you can come down and see claw design everything is boopping and having a great time and then I know what you're thinking is it mobile optimized yes look
at it 40,000 m plus shoe you can see now you can pull it and check it on many different sides and how it all interacts together and even these ones here as you're hovering over that's mobile
optimized and then we have our claw design as you can see whatever kind of graphic ical size you get into. I built this into the skill so you can actually play around with the look. You can even
resize this as you go. Like it's actually crazy and this really helps you understand the difference. And even our superhero as we're flying up, he can do various different things which just adds
a level of detail to this. And then also this website here, I think is probably one of the best versions that came out of it. Actually, you can see I mean look at the interactivity on this guys. This
is absolutely gorgeous. Like when you refresh it and you can see that coming on and if I the X-ray in you can see where we've generated everything that's happening. Like just even the fact that
these flames have been generated by code I think is gorgeous. Again you can come down you can see we've got that beautiful scroll stopping thing and we actually adding in um code code overlays
and then we can see this. We hover over this which is fantastic and again just really nice subtle details. All of this stuff guys was generated in one shot. The only thing I changed was one little
graphic at the top which I thought could be a little bit improved. But apart from that guys you can imagine what this looks like as you go. Like even these little cheeky cursive things. I'm
guessing that's just going to be code. Yeah. See, just shows you exactly what is going on here. And then we even get this 20 second film that really shows you the overlay of the purple and the
orange. And it's done a great job of understanding where to draw what as you go through this. And then we got love from our clients at the bottom. And then obviously a really cool photo. Now
building beautiful front ends is one thing, but if you want something that can actually scale and has worldclass architecture, you need to understand the third step. And by the way guys, if this
all sounds like I'm speaking Spanish, I'm going to put a link down below for the full cord code masterass that has everything including content I've never shared on YouTube before. My brand new
design systems again not available on YouTube. I go through power systems, memory systems, Hermes apps, how to build anything that you need. And you also get full access to the brand new
and beautiful Agentic operating system. Has access to all of my individual memory systems. So you can track and ask questions about anything when you got those memories as well as full design
operating systems. And on top of that, you also get access to all these different prompts and systems to generate all these different templates with immediate access. I'll put a link
down below if you want to get light years ahead of everybody else. And it's the question of how we actually turn these websites into a business that can that can actually uh go ahead and scale.
So we know we've got a beautiful website, but what if we want to have customers? What if we want to have products that we sell? What if we want to have a place for them to log in?
There are a million ways to do this, but this one in particular, I think you're going to find very interesting. So, I actually built this Italia system again in one prompt. Check this out. I can
come down. I've got new. I've got designing. I can move this from motion over to shipped. We built a design agency business and now we have a beautiful and gorgeous thing. This one
is available down below in the community as well. If you want to go grab it and just use that straight away, we've got everything that we need in one system and I'm going to give you the exact
system of exactly how you can build this for whatever product you'll put that link down below free for you in the description. And this is entirely powered by MongoDB, the sponsor of this
section of the video. But effectively, we need somewhere decent to actually go ahead and store that. We need decent rules. We need to actually go ahead and make sure we have everything locked in.
So, let me explain what the problem is. Cuz if you don't understand the problem, you'll may run into quite serious issues with that. Now, let's say, for example, that you run a painting website, okay,
Sam's painting. On your computer, it's got to do two things. Number one, it's got to answer questions, and at the same time, it's got to remember everything that's been stored at the same time,
right? because these two things can grow at independent rates. You know, you may need capacity for that that you may not have. And to solve this and get supercharged, we're going to use
MongoDB. Now, one of the interesting thing about MongoDB is it actually allows you to have documents, not necessarily spreadsheets. So, each booking is actually one document. Uh,
and you can basically add any field you want to. So, say for example that you need to use completely different sets of information for every client for any reason. You can actually use a system
like MongoDB and it isn't confined classically to standard tables and it's really good to use with Claude for a couple of reasons. Number one is that you can add a field tomorrow. So if you
have a new idea on Wednesday, you can add the field without the need to rebuild any of the website. On top of that, there's no need for translation. So your site code already uses a shape.
So it just goes in as it is. On top of that, it's really built for speed. Now MongoDB 9.0 just dropped, which is one of the reasons why I'm actually talking about it now. And effectively, it allows
you to do things faster. So when we're querying this database, we can do a lot faster. We can essentially have spike protection just like a bouncer. Any heavy requests, they won't crash
everything else. And then finally, we can have really good rules on how we manage our data. So the TLDDR is simply this. It is faster on big days. So when you get loads of traffic coming in,
you're set for scale. Um you can have a balance from the door. So intelligent workload management. And on top of that, we keep the bad data out. All great technical stuff. How do we connect it?
It is unbelievably easy. So you head over to cord or chat GBT. Going to click on the plus, click on connectors, and then click on manage connectors. And then what I want you to look for, guys,
is just come down and look for Mongodb. All right. Now, we got MongoDB Atlas, which is fantastic. And you can literally just add these in by clicking on it like so. And click on connect to
Claude. And then this browser will open up and you click on continue connecting. And then you're going to hit this screen. Just click on authorize. And the cool thing is we can connect this to
Claude. And Claude can do all of the magic for us in the background. And when we're done, we can come back over. And then guys, all you can do is come over here to this page here. And I want you
to come over and literally copy all the stuff here. And this is a full guide on exactly how to connect it, what that looks like, and be super easy for you to set up. And this is going to be done in
the same conversation window as the website that you're building. So has all the information, all the access, and knows exactly how to work with MongoDB. Now MongoDB themselves have just dropped
something called Atlas Infinite. And in plain English, what does it mean? You know if you think about it from this point of view each job that you're giving MongoDBM each job that you're
asking of your database which is either answering questions or remembering information gets its own computer. So essentially it remembers and answers you know they can grow at different complete
rates based on where you're at. If you imagine you have you know 100,000 people um coming onto your website on one day you may have a different capacity need than if you've got a big storage
database. They just flex at different levels. Then essentially MongoDB says that scaling time cuts more than 96% versus previous one. And obviously, you know, replica sets hold 32 times the
data. Fancy way of saying that it's just way better at holding data for us. But the upside for us guys is that when we're building out on our websites, we can actually have people create
accounts, we can connect that and have that all stored in the back end of MongoDB. And anything that we change and edit here, for example, will be saved and reflected in that database for us.
And so there's five steps to the video to reconfirm. We basically find references we think are cool. We build that with claw code, opus 5.5 or sonet 5.5. We then go ahead and connect to
create videos and images and then we just apply all the beautiful claw motion to make some magic happen. And then if you're building this as a website and you want to scale with a really decent
back end, a great architecture, you can go ahead and use a service like MongoDB. So now we've covered exactly how to build beautiful websites. But the problem is that building websites and
systems is just one small fraction of what claw design can do. So, the next thing that you and I need to do is learn what the top 15 applications are, which we're going to learn together in this
video right