The Viral $1 Website Effect That Looks Like $10K (Tutorial)

0:00Hey, in this video I'm going to show you how to make a really cool animated dithering effect websites just like this. I'm also going to give you guys a full free prompt so you could use that prompt in any AI agent to fully reproduce every single site that I'm about to show you guys today. As you guys could see, this is dynamic, it's interactive, it's also animated, and uh we also apply really cool procedural effects to give it looks like this with really cool font pairings and so on and so forth. So, I did not go to programming school, I don't have a degree in this stuff, I learned how to

0:26do it watching free YouTube tutorials like you are now. Uh I'm going to run you guys through this in a really simple and straightforward way. So long as you guys have an AI agent, you should be good. Let me show you how. So, as mentioned, you guys can get everything you're about to see totally free down below in the description. Just click the Maker Zero link. I put all my resources there, and you don't need to pay me a cent. But, if you guys wanted to learn a little bit more about the pipeline, this

0:45is more or less what we're going to do. So, to start, we're going to take a still image, which means we're going to use one of the famous image generators, probably GPT image 2, although I'm going to play around with a couple to make sure we get the highest quality ones. And we're just going to have it generate like a stylized painting thing. Now, I don't know if you guys remember from the sites that I showed you guys earlier, a lot of these were like really grand, almost like Renaissance era things. So, this is like an ancient fresco, for instance. And I really like that vibe. I

1:11think it works pretty well with the sorts of websites that I'm developing with this dithering effect. Once we have, you know, an image that we're happy with, we need to convert it into some sort of motion, aka a series of frames. In case you guys didn't know, a series of frames is also affectionately referred to as a video. So, what's really cool is nowadays you can you can actually take a picture, and then you can convert it to a video by giving it some additional instructions like, you know, I want you to animate this so the woman looks to the left or something like that. And then it can actually do a

1:38pretty good job. Um so, what we're going to do is we're going to feed this into some image-to-video model, and there are a variety of different ones we can. Uh it's going to cost us probably 25 to 50 cents or so, and then we're going to have a video. But, I don't know if you guys notice, it's not actually a smooth video playing on all of these. We actually have a very slight sort of frame switch, and the whole idea behind this sort of cool dither effect is it like happens sort of staccato. It's like one frame, and then you can kind of tell that it jumps a little bit to another

2:04one. Let me show you guys probably a better example. You see here how it's not totally smooth, you know, it's sort of this static-y thing. Well, that's because what we're doing is we're chopping up this really smooth video into a series of frames to apply that effect. I don't know if it's VHS. I honestly don't really know exactly what that would be called, but it looks really sweet, and I think that's really what ties it together. So, in order to do that, we need to abstract everything, and then run it at approximately 11

2:28frames per second. Then, after that, we need to apply what's called dithering. For those of you guys that don't know, dithering is just this sort of like black and then white dot effect. Um it's super common on old-school displays, and this is actually how you used to like display detail back in the day on other screens. And then now, at the very end of it, we apply that as our background for our image, and then we just vary a variety of styles until we find one that works

2:50pretty well. In my experience, the ones that work really, really well tend to be really grand ones. And as you guys could see over here, I have a giant list of all of the websites that I generated just cuz I wanted to see, you know, like a bunch of different styles so that you guys could play around and, you know, find something that works really well for you. You know, in this instance, I don't know if you guys could tell, but it's sort of like a fleet of ships in the background. Um this sort of stuff tends to work really well with I find warm, more pastel tone colors, and so I'll

3:16just give you guys a bunch of color palettes and swatches that you guys could use to get something that looks pretty cool just like this. And then finally, I don't know if you could tell, we also have some mouse effects that are going on. I find mouse effects here are necessary just to make the website feel a little bit more interactive. If you do it this way, people will actually assume that every single one of these pixels is rendered independently, even though it's not. We're actually cheating using that really cool frame design. Okay, so how

3:38do we actually do that very first step? Uh there are a variety of different models you could use, so I mentioned GPT image two, for instance. You guys may be familiar with nano banana or nano banana pro. Uh I'm just going to play around with them, and I'm going to show you guys that whole process just so that you can sort of put yourself in my shoes, and then I'm just going to narrate what I'm doing while I'm doing so that we're all on the same page. So, probably the simplest way of doing this is signing up to an image vendor like Higgs Field. Um these guys are basically aggregators

4:02that host hundreds of different image models. So, I'm just going to do that really quickly and then we'll be able to use models like Nano Banana Pro. Afterwards, we're going to head to images in the top left-hand corner, uh click on create image, and you'll be faced with a screen that looks like this. You're probably not going to have all the same sorts of pictures that I do. The reason why I had these is because I was just experimenting with a variety of different ones that I could use in order to get that effect. So, I don't know if you guys remember that rotunda from earlier, this one, um that

4:25is actually this one right over here. And you can actually almost almost tell the, you know, effects of that rotunda, uh if you just like compare it with that image that I generated back here. Um this one over there is the Armada. So, if we if we go over here, do you guys kind of see how the two basically line up? It's super subtle, but obviously they do. You know, I tried generating like angels with frescos. I tried generating whole universes. The variety

4:47of really cool effects that you can do. I even tried doing galloping horse. Although, uh I will say the galloping horse is kind of 50/50. Um also, an issue that I had was I tried generating a bunch of the horse and I used a variety of language that alluded to the horse going really fast and its belly looking a specific way and it looking all valiant and its muscles showing and then it, you know, said I was generating something that's not safe

5:09for work. So, I found that pretty funny. Um but anyway, so, you know, the things that I find tend to work best are as mentioned, these sort of like Renaissance style paintings, right? And the reason why is just because they invoke the sense of grandiosity that I think works well with the slight animation effect. So, this one says Renaissance old master oil painting study of a colossal gothic rose window seen head-on. Hundreds of radiating stone tracery segments and leaded glass

5:32panes forming one vast concentric wheel. So, the idea is we're going to be generating like a wheel basically in, um you know, a gothic rose style. Uh so, in order for this to work well, you can't just use the one-to-one aspect ratio. I find you really do have to go wide screen, which kind of makes sense cuz that's basically what we're doing, right? Um uh you'll also notice that it says 2K here uh by default. That's cuz they're just trying to charge you as much money as possible. I mean, you can, you know, do the 2K if you want, but my recommendation is to dial back down to

6:001K. And then um you'll also have a batch size, so this is how many you're going to be generating. If you just generate one, um you know, you're probably not going to get the best results possible, just to be honest. So, I I like doing two just so that I have like two options to pick from, like kind of a crappy one

6:14and like an an okay one. And uh yeah, then I'm just going to click generate over here. It's going to cost four tokens. Uh I don't know exactly how the tokens are billed, but they're extremely minimal, at least for this first step here, probably cents on the dollar. And then all we have to do is we just have to wait for them to to ultimately generate. So, I'm just going to zoom back out a little bit and then wait until that happens. Okay, and I've

6:34actually generated a bunch of stuff. I've also generated some more, you know, some ash falling, just cuz I wanted to give us some options and actually do multiple at the same time. But you can see both of these are pretty reasonable as is. I mean, to start, we have this cool gothic style window. Um and, you know, I'm sure you guys can imagine if we animated this maybe turning or something really slowly, we could make something pretty cool happen. So, that's going to be the idea. And you can actually see at the bottom right hand corner, it even allows you to click one button and just turn this whole thing

6:59into a video. So, that's what we're going to be doing right now, and I'm going to show you guys how that works. Oh man, just while I'm at it, do you guys see this one? This is going to animate crazy style. Like that is insane. And look at this one, too. I think these are probably going to be better than this, but anyway, let's try

7:15both. Okay, so which one do I like more? Uh probably this one, I would say, just cuz it's a little grander. I headed to the bottom right hand corner and then just type turn to video. Okay, and then this will take you to a video page. Now, in case it didn't already say C Dance 2.0, I'd recommend C Dance 2.0. Uh the reason why is it's just probably like

7:32the the best for our use case right now. It's probably not the best model out there, but it's the best in so far that it's pretty cheap, and I think we don't really need super high quality for dithering, anyway. So, yeah, I mean, C Dance 2.0, that's the one that I'm to pick. And then it may say like 8 seconds or 16 seconds. You'll notice that the number of tokens goes up a lot, so you know, I want to do this for basically about a dollar or so. I'm going to go down to 4 seconds here. The aspect ratio you should use is 16 by 9. And then the

7:56quality is okay at 1080p. You could go 480 or 720p if you wanted to. I wouldn't recommend 480 cuz the quality really would be abysmal. Um but I'm just going to do 1080p. And then over here you see where it says upload media. You know, in case you don't already have that, um go to image generations over here at the top. And then you actually want to select the thing that we just uh we're using. So, in my case I was using this, and I just want to 100% make sure we have that sort of as the input. If we don't have that as the input, it's not going to look

8:22like the image that we generated. And you also may be wondering, "Well, Nick, why did you even generate an image to begin with?" That's because when you generate an image before you feed it into a an image-to-video model, the resulting video is really much higher quality, at least in my experience. It conforms to the constraints of the image a lot better. And so, because images are cheap, what that means is you can like generate 20 images, pick the best one, and you can spend your hard-earned video money on that uh right one instead of just generating

8:47tons of videos. Okay, so just like the other one, I'm just going to generate um multiple. So, I'm going to do one here. So, that should pop out one. And then I'm just going to do it again cuz, you know, I just want the best chance possible. And then I'm also going to do the same thing with the other one. And I think, you know, this is probably going to be the sexiest one. I mean, like this looks really sexy, don't get me wrong, but it's like pretty busy, so

9:08maybe this would make more sense. Probably more recognizable. So, let's click on that. And I'm just going to get a prompt and then feed that in here. And then check that all the settings are the same. Yes, they are. And now I'm just going to generate another two. And so, again, these are our base assets. These are the things that we are going to turn into that beautiful dithered background. And because we're also chopping up the frames, um it's going to make it way, way easier for us. And notice how we didn't even touch like an AI agent chatbot yet. We're we're literally just using available models on, you know, a

9:34big image and video aggregator. When we actually take this over to our model and actually spin up the website, it'll be really straightforward now that we have really high-quality assets. And I just gave it a couple of seconds, and as you guys could see here, we're actually generating an output. So, taking a look at this, we're now slowly zooming in on

9:50this. Um that one is the first. This one over here is the second. This is like a slow zoom out of this gothic church with maybe some light. This looks pretty cool. I mean, like it's not going to loop well, but I think it's going to look really sexy. So, maybe we could like re-loop it. I I don't know, but anyway, I like this one probably more

10:07than the first one. And then, here's the ash. Um I have a feeling the ash is probably going to look really nice just looking at the effect. Oof, look at that. Could you imagine that with the dither? That'll be really sexy. And then, this one over here is sort of version number two. Let's take a look at that. This is sort of like slowly falling down. Yeah, that

10:25looks pretty realistic, I would say. Burning in the ashes of Roman glory. Okay, and now you honestly have everything we need in order to make a really beautiful website. Um from here on out, you've like spent the vast majority of all the money you will. I mean, from here on out, like if you're on a coding plan with one of these AI agents, it's virtually free. It's just included in your plan. Otherwise, you'll

10:43probably spend like 10 cents in tokens. Uh let me show you now how to turn this into a beautiful dithered version, one of those like cool uh ASCII kind of looking thing. So, how do we actually do this? Uh my preferred model at this point is the Claude family of models. There are a variety of different ones that you can use for this. I'm going to show you guys my own approach, and then, as mentioned, did not go to school for

11:03programming or anything like that. Everything that I'm doing here is something that is super accessible, and it's very straightforward. So, what I have open here in front of me is I have the Claude app. Um it's available on both macOS and Windows, and you guys could do that just by heading over to Google Chrome, and then literally just typing in Claude desktop right over here. Um it'll take you to a page that allows you to install Claude desktop and actually go through the download and and installation and stuff like that. So, whatever page you end up landing on, you know, it'll end up looking something

11:30like this. Uh and what you want is you just want whatever version it corresponds to you. So, in my case, that's the macOS version. After you're all set up, you'll be on a page like this. Now, if you don't have an account, you will have to sign up, and I think that it's 20 bucks

11:42a month or something on the base plan. And what you're going to want to do after that is you're going to want to move over to um this tab over here on the left called code. Code is where we do all of the coding. So, I'm just going to give that button a click. My interface is going to change pretty dramatically. And as you guys can see, I already have a bunch of different like coding sessions that are up. You guys probably won't have that the very first time. We also have our cute little Claude bot down here. Hello. Now, if it's saying default down here, just move

12:06it up to local, and that way it'll actually just be directly on your computer, and then you can just select a folder. So, I don't know. I'm just going to open a folder. And in my case, I'm just going to call this Let's make a new one. I'm going to call this uh for YouTube. I bet you have

12:18like 10 folders like this by now. Anyway, now that I'm inside, you can actually just ask a question or say something. So, in my case, I'm just saying, "Hi. Hello, Nick. What can I help you today with today?" Well, we're about to find out. Very first thing I'm going to do is go to

12:30school.com/makerzero. This is that page where I store all of my resources, and then I'm just going to grab it from recently uploaded. It'll say something like dithered web design. And the prompt that we want is not the image and the video prompts, cuz those are the ones that I've already used. We want the dither prompt. So, I'm just going to copy this whole thing. Okay, and then I'm going to go back to Claude over here. I'm actually going to paste

12:50this whole thing in. And then um this prompt essentially will just guide it through the process of going through the generations. The last thing I need to do is actually need to supply it with the files that I just generated, cuz I just part of the prompt. So, I'm just going to go find those. And you know, if I go back to Higgsfield, you could see I can actually download them. So, I'm going to download this video right over here, and this is

13:07going to be the one that I do to start. Okay, and then what I'm going to do is I'm just going to copy this. Once I have the name of the file, um I'm actually just going to feed that in. So, as you can see, it's users Nick Survive, downloads, whatever. I'll just paste that in there. That's just the title of the video, and then it'll actually go and, you know, find it for me. I'll probably get some sort of access

13:24request. So, the very first thing it's going to do is it's going to go and find it. It's going to say, "Hey, you know, can I access files and stuff like that?" And by default, I always just allow it to access all the files I need. And now it will say, "Okay, I found it. Let me inspect it. Let me take a look at what's going on and then what I can do." So, now it's saying it's an excellent source

13:42for this technique. I would agree, Mr. Claude. And uh yeah, now it's essentially going to be generating that. So, now it's flattening it, killing the paper, and I'm not going to walk you through everything it's doing since this thing is thinking a bajillion times faster than me. The one important thing to note is I'm using a model that a lot of

13:58people would consider pretty outdated. Uh Opus 4.8 I think is like last generation or two generations ago. But I intentionally wanted to use this model because I wanted to show you guys that you can do it for really, really cheap. You don't actually need a lot of intelligence in order to make a cool site. So, um you know, you guys could do this with like a total open-source model

14:15as well. I know Kimmy K3s now available. There's also a bunch of other ones. Um basically, we all have access to more than enough intelligence for just a few cents to make something super cool. Okay, and then when you're done, you will have a page that looks something like this. As you could see, we literally have this rendered in uh sort of a test browser here. And so, what it is doing is it's actually navigating and you know, I wish you could just move my big fat head so you guys could see it a

14:37little bit better. Uh but yeah, I mean, we actually have like look, the embers floating slowly through time. Kind of neat, right? Uh now, I should note we're only generating the above the fold right now. Like we're only generating basically everything from here and up. We're not actually generating like what's underneath, which would be the full website. Um I'm doing this just because I wanted to show you guys what is possible, but I also didn't want to opinionate you. You guys could do this with anything. You You could build like an app with this. Hell, you could build app sections with this. You could do literally whatever you want it. And if

15:06you want to turn this into a full website, it's as easy as just ask it to turn this into a full website. Uh but my recommendation is like before you do the full website design and actually have it like flesh out everything else, um I would actually just make sure you really like the above the fold, aka this section first. So, that's what I'm going to do over here. I'll say, "Hey, I

15:22really like these. Looks great, but I want to experiment with a bunch of different styles." And by styles, I mean fonts, colors, placements, etc. Try three, four, and then present them to me. And I'm saying this just like I would to, you know, any human being that's working with me. I'm not a crazy developer, as you guys could tell. I'm just using language that hopefully

15:48anybody can understand. Um and now it's just going to go and it's going to do it for me. Going to resize this a bit just to make it really visible when it does end up doing that. I like how the actual asset is what is sort of front and center now. Uh if you roll back the clock a little bit, like this was not how the Claude desktop app

16:05was. Uh what we've done is we basically fully inverted it. What the dust remembers of ruin. What the dust remembers of ruin. Notice how all these are like similar sorts of styles and effects. Um just applied with like what we're basically just flipping through colors, through fonts, through a bunch of different things. And so, yeah, pretty badass uh if I do say so myself. This is probably one of my favorites just because of how it's applied that slow little, you know, ash thing. And um if you guys remember, I also had another website, so not just this one. Uh we also have that glass panel one. Uh I want to do that one,

16:35too, and I want to show you guys what that looks like. So, in order to do that, I'm actually just going to go back to new, and then what I want is I basically want to feed in that huge prompt again, but I just want to feed it in with a different file. So, this was the other one, right? I'm just going to download this. And what I want is again, if I go back to maker zero here, which um I have saved as school.com/makerzero, then I go back here and then just grab

16:58that entire dither prompt here. I can then just feed that whole puppy in, and then find that file, paste that in, and now I'm also going to have this build that other website for me, and let's see how that goes. All right, so the end result is really, really cool. Um I mean, I don't like all the font styles that it's chosen, but I'll show you guys like my favorite ones. Um as you guys can see, we are doing this like crazy zoom out and it's almost like a universe. Yeah, you guys can actually

17:23see the acid lime magenta maximum loud. Um probably looks a little bit cooler. So, yeah, I mean like this is more or less it. Variety different ways to do this sort of effect. I don't want to harp on it too much. Um also just note that you should probably not have 10 of these open simultaneously. The more of these that you have open, the more

17:39computationally intensive it'll be. Yeah, anyway, pretty cool stuff, huh? Now, another question that you maybe have and just that last sort of, you know, polish is how do I take this and then put this on the internet? And um you know, the simplest and easiest way as somebody that has probably put up like 10,000 websites on the internet or something now is using a platform that hosts it statically. And you don't actually have to pay for website hosting anymore. I don't know if you guys knew, but you haven't had to pay for website hosting for a while. What you do instead is use a service like Netlify. It's a

18:10pretty good one. Um or there's also like Vercel. Yeah, that's a pretty good one, too. And I haven't actually put up a website on Vercel on my YouTube channel before. I've always used Netlify and a bunch of people are like, "Oh, dude, you're just a Netlify shill." So, what I want to do now is I just want to use Vercel for it

18:25and I'll show you just how easy it is. Um so, you know, it's one thing obviously to run it locally on my computer within the Claude desktop app. Now, I want to get it on the internet. How do I do it? Uh well, first we just got to sign up. So, I'm just going to sign up, continue with Googleio. Let's do that. They now have my name and profile picture. How dare they? Okay,

18:41cool. I'm working on personal projects. My team name is just Nick. It's team Nick over here. Pretty lonely. Um yeah, no friends. Okay, and then I'm going to go top right-hand corner and what I really want is I want like API key and I don't I don't even know where that is, really. So, I have my, you know, team's ID. So, I think I need to copy that. So, I'm going to head back over to Claude and I'll say

19:03you know, great, put this on Vercel. Team ID, I'm going to paste that on, but I also need my API key. Do that just by going to settings and then tokens down at the bottom. You can also type tokens. That's what I did because I have no idea where this stuff is. First time I'm looking at this interface. I'm just going to call this YouTube and I just

19:21want to give it the full account scope. And because I know y'all are going to be jumping on here pretty quick, I'm just going to say it'll expire in 1 hour. Then I'm going to copy it. Now I'm just going to go back to my like Claude and then I'll say, you know, token here. And uh I'm going to press enter. And this is all you need to do. It's now going to take all this and then deploy

19:42it for me. You know, it's going to probably yell at me being like, "Dude, how could you put your password in a basically cuz that's what that is in plain text in a chat." But that's okay. Now it's actually going to go through and then publish it for me. So let me just show you guys how simple it is. Um it's only been 20 seconds. It's already uploaded the whole thing. Now it's created the deployment and it's just going to pull it until it's ready. And I'm just doing this in real time to show you guys that you don't need to pay anybody for crazy

20:09website hosting fees anymore. I promise. Uh you really don't have to do anything. All you have to do is just turn that puppy on. You know, give them your API keys or whatever and this will do it all. And so it even had an issue. Disabling deployment protection makes the site publicly accessible to anyone with the link. You know, given that you said put it on Vercel, that's probably

20:27your intention. So now it's now it's going. So now it's loading the live URL in the browser as final proof. You can even see it has its own little internal browser. Here is the URL. Okay? There it is. I'm going to go back to my own Chrome. Just put it in. And boom, look at that. We actually have it up. And the this is the website. And you guys can actually

20:45access this website anytime. If you, you know, pause the video and I don't know, try and OCR write this, you know, character for character. But this is it, right? It's it's right here. And uh that's not actually, you know, the website to do. If you guys really did want to see everything that I've done in order to get up really high quality designs, head over to Well, I guess this is still on localhost, but this one will be up um pretty soon. Uh why don't we call it I don't know. I mean, like I was designing this for my own SaaS called

21:10Clarvo. Um, so I don't know. Why don't we call it like clarvo-designs.netlify.app? If you head over to this website, it'll contain literally every single link to every different style that I tried for all of these, right? So, like, you know, this beautiful website design in the background here, this really cool, uh, one over here, I don't know. This awesome cobalt one with the murmur over here. You guys can actually get that. And then, in addition, if you just go {slash} prompt afterwards, you'll also have all of the prompts for everything. And you can just copy that and paste that into your AI agent as well. Uh, okay. So, whatever

21:43design you like, entirely free here. As mentioned, this stuff was pretty cheap for me to do, and money is no in no shortage right now. So, I figured I might as well give back. Um, hopefully you guys now have everything you need in order to make all this work for you. I always have a blast doing these videos, especially because, as mentioned, I had zero programming experience when I started with, you know, uh, trying to figure out how to put websites on the damn internet. It

22:03was a nightmare for me. So, yeah, you don't need to pay any fancy developers. You can actually get really cool, digital, high-quality, um, sites so long as you use, you know, a good image generator, good video generator, and then have like a good opinionated process for it. Okay. Thank you very much for watching the video. If you guys like this sort of thing, you want to learn how to sell these systems and websites to people for money, um, definitely check out Make Your School. It's my 90-day accountability program where I show you guys how to do this over the course of 90 days, and I will actually give you

22:29all of your money back if you do not acquire a paying client uh, by the end of that time period. So, we have a 100% money-back guarantee. We're super confident that we can absolutely knock it out of the park for you and get you a customer. And, um, I show up every day and respond to like 70 to 100% of posts. So, I'm always in there. I will be

22:44nagging you nonstop. Aside from that, what else can I advertise? I guess that's it. Thank you very much for your time. I'll catch you all you all in the next video.