Big Idea

The argument in one line.

A five-step pipeline — generate a still painting, animate it into video, chop that video into frames, dither each frame, and hand the assets to Claude Code with one reusable prompt — turns a few dollars of AI generation credits into an animated, high-end-looking website hero.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A solo builder or agency operator who wants a distinctive, expensive-looking landing page hero without hiring a designer.
Someone already comfortable pasting a written prompt into an AI coding tool like Claude Code and letting it build a page from it.
A marketer curious about chaining AI image and video generators together as design inputs rather than as final deliverables.

SKIP IF…

You need production-grade custom illustration or brand-specific art direction — this reuses one visual trick (an ordered dither loop) across any subject.
You're looking for a full multi-page site build — the walkthrough only takes the above-the-fold hero section to completion.

TL;DR

The full version, fast.

Nick Saraev reverse-engineers the animated, dithered website backgrounds that have been going viral and shows the full five-step pipeline behind them: generate a Renaissance-style still painting with an image model (GPT Image 2 or Nano Banana Pro via Higgsfield), animate it into a few seconds of video, extract the frames, apply an ordered 8x8 dither pattern, and hand the assets to Claude Code with a prewritten prompt that builds the animated canvas. The image-and-video stage costs about a dollar; everything after that runs inside an existing Claude subscription. He finishes by deploying the finished page to Vercel for free, pasting only a team ID and a short-lived API token into the chat.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 00:45

01 · The effect

Cold open showing off several finished animated, dithered websites and promising a free prompt viewers can reuse to reproduce every one.

00:45 – 01:19

02 · How the pipeline works

A hand-drawn diagram lays out the five-step process: still image, image-to-video, frame extraction, dithering, then a live animated page.

01:19 – 02:29

03 · Why we chop it into frames

Explains that a smooth AI-generated video gets deliberately cut into a series of frames run at about 11fps, which is what produces the staccato, non-smooth motion.

02:29 – 05:00

04 · What dithering actually is

Defines dithering as the black-and-white dot pattern used on old displays, shows a gallery of finished sites in warm/pastel palettes, and notes the mouse-reactive effect that sells the illusion of live rendering.

05:00 – 05:41

05 · Generating the base image

Signs into Higgsfield, an aggregator hosting GPT Image 2 and Nano Banana Pro, and writes a Renaissance/Gothic-style prompt for a colossal rose window.

05:41 – 07:25

06 · Settings that matter

Recommends widescreen aspect ratio over square, 1K resolution instead of the pricier default 2K, and a batch of two generations to have a real choice.

07:25 – 11:08

07 · Turning the image into video

Feeds the winning still image into an image-to-video model (Seedance 2.0), sets a 4-second clip at 1080p, and generates two takes to pick from.

11:08 – 12:30

08 · Setting up Claude

Walks through installing Claude Desktop, subscribing on the roughly $20/month base plan, switching to the Code tab, and pointing it at a local project folder.

12:30 – 15:25

09 · Feeding it the prompt

Copies a prewritten 'dither prompt' from his free skool.com/maker-zero resource page, pastes it into Claude along with the generated video file, and lets Claude Opus 4.8 build the animated canvas.

15:25 – 16:27

10 · Trying different styles

Asks Claude in plain language to generate 3-4 style variants — different fonts, colors, and placements — from the same base asset.

16:27 – 17:43

11 · Building a second site

Repeats the same prompt-and-asset process with a different generated video (a ship armada) to produce a second, differently styled site.

17:43 – 18:32

12 · Getting it on the internet

Explains that static site hosts have made paid web hosting unnecessary and sets up a free Vercel account to publish the page.

18:32 – 20:33

13 · Deploying free with Vercel

Grabs a Vercel team ID and a one-hour API token, pastes both into the Claude chat, and lets Claude push the deployment and disable the default login wall.

20:33 – 22:22

14 · The live site

Loads the finished, publicly live URL as proof, then points to a companion gallery page listing every style variant and its full prompt.

22:22 – 22:52

15 · Wrap up

Closes with a pitch for Maker School, his 90-day paid accountability program with a money-back guarantee.

Atomic Insights

Lines worth screenshotting.

Feeding an AI video model a generated still image first, rather than typing a text prompt alone, produces higher-quality motion because the video conforms to the image's exact composition.
Because AI images cost cents and AI video costs dollars, the efficient move is to generate 15-20 candidate images, pick the best one, and spend the video budget on that single winner.
The staccato, non-smooth motion in dithered websites isn't a rendering limitation — it's a deliberate choice to run the animation at roughly 11 frames per second instead of a smooth 30 or 60.
Ordered dithering (an 8x8 Bayer matrix) is the same black-and-white dot technique used to fake detail on old-school displays, repurposed here as an animated background texture.
Renaissance and Gothic-cathedral style prompts (rose windows, frescoes, armadas) hold up better through frame-chopping and dithering than modern imagery because their inherent grandiosity survives the compression.
A subtle cursor-reactive mouse effect over a dithered canvas is enough to make viewers assume every pixel is being rendered live and independently, even though it's a looped pre-rendered clip.
The entire site in this video was built using Opus 4.8, a model several generations behind current, because the coding task itself requires very little reasoning once the prompt is written.
Widescreen aspect ratio and 1K resolution — not the platform's default 2K — are the settings that actually make the dither effect legible; the higher resolution mostly increases the bill, not the visual quality.
Static site hosts like Vercel and Netlify have made traditional web hosting unnecessary — deploying a finished page takes an API token pasted into a chat, not a server.
The whole build sequence — describe the change in plain English, review 3-4 style variants, pick one, deploy — never required opening a code editor or writing a line of code by hand.

Takeaway

A five-tool pipeline turns one AI painting into an animated website

WHAT TO LEARN

The viral dithered-website effect isn't one clever trick — it's five ordinary AI tools (an image generator, a video generator, a frame extractor, an ordered-dither pass, and an AI coding agent) chained together by one reusable prompt.

02How the pipeline works

The whole technique breaks into five discrete stages — generate a still image, animate it, extract frames, dither each frame, then render the sequence as a live animated page — and each stage uses a different, purpose-built tool.
Understanding the pipeline as five separate steps means any stage can be swapped out (a different image model, a different video model) without breaking the technique.

03Why we chop it into frames

The jerky, staccato motion in these dithered sites is intentional — the source video is deliberately re-sampled to about 11 frames per second instead of played back smoothly.
A 'series of frames' is just a technical restatement of what a video already is, which is why converting a smooth clip into discrete frames doesn't require anything exotic — just extraction at a lower frame rate.

04What dithering actually is

Dithering is the black-and-white dot pattern historically used to fake shading on low-color-depth screens, repurposed here as a stylistic animated texture rather than a technical necessity.
Warm, pastel, or grand/Renaissance-toned source images tend to survive the dithering and frame-chopping process better than busier or more modern imagery.
A subtle cursor-reactive effect layered over a looping animation is enough to convince most viewers the whole canvas is rendering live and independently, even when it's a pre-rendered loop.

05Generating the base image

Image aggregator platforms like Higgsfield give one login access to many different image models, which is faster than signing up for each model's own product separately.
Grand, cathedral-scale, Renaissance-style prompts consistently outperformed other subject matter for this specific animated-dither effect.

06Settings that matter

Widescreen aspect ratio, not square, is required for this effect to read correctly once it's stretched across a website hero section.
Resolution defaults are frequently set high mainly to increase what a vendor can charge; dropping from 2K to 1K produced comparable results at a fraction of the cost.
Generating in batches of two, rather than a single image, gives a real choice between a strong result and a weak one instead of committing to whatever the first output happens to be.

07Turning the image into video

Feeding an already-generated still image into an image-to-video model, instead of prompting the video model with text alone, produces motion that stays faithful to the image's exact composition.
Because image generation is cheap and video generation is comparatively expensive, the efficient sequence is: generate many candidate images, pick the strongest one, then spend video credits only on that winner.
A short clip length at a mid-tier quality setting is enough source material once the video gets chopped into dithered frames — there's no need to pay for a longer or higher-fidelity render.

08Setting up Claude

The entire coding stage runs inside a standard Claude subscription with no separate hosting or IDE purchase required.
Pointing an AI coding tool at a local project folder, rather than working in an abstract chat, is what lets it read and write actual site files.

09Feeding it the prompt

A single prewritten, reusable prompt — describing the frame-extraction, dithering, and canvas-rendering steps in plain English — is what actually encodes the technique; the video files are just the input assets fed into it.
The build ran on a deliberately older model to demonstrate that this task doesn't require frontier-level reasoning — most of the difficulty is in the prompt design, not the model's intelligence.
Plain conversational instructions were sufficient direction throughout — no code-literate phrasing was needed at any point.

10Trying different styles

Asking an AI coding tool to generate 3-4 variants of the same base design, in plain language, is a fast way to compare fonts, colors, and placements before committing to one.
Reviewing the above-the-fold hero section before asking for a full site build front-loads the highest-leverage decision before investing in every other page section.

11Building a second site

The same prompt and process reliably reproduced the effect on a completely different source image, confirming the technique generalizes rather than being tuned to one asset.
Running many animated-canvas builds open simultaneously is computationally expensive on the local machine — worth closing sessions once a build is done.

12Getting it on the internet

Static site hosting has made traditional paid web hosting unnecessary for a project like this — free-tier hosts are the default choice now, not a budget compromise.

13Deploying free with Vercel

Deployment from an AI coding tool to a live URL can be reduced to two credentials — a team ID and a short-lived API token — pasted directly into the chat.
New hosting projects can default to a login wall; that setting has to be explicitly disabled before a page is actually public.
Scoping a deploy token to expire quickly is a cheap way to hand a coding agent real deploy access without leaving a long-lived credential sitting in a chat log.

14The live site

Publishing a companion gallery page listing every style variant and its exact prompt turns a single demo into a reusable swipe file other people can pull straight from.
Confirming a deployment by loading the live URL in an actual browser — not just trusting the tool's success message — is the real proof a deploy worked.

Glossary

Terms worth knowing.

Dithering: A technique that simulates shading or detail using patterns of black and white dots instead of continuous tone, originally used to display images on low-color-depth screens.
Ordered dithering / Bayer matrix: A dithering method that applies a fixed 8x8 grid pattern to decide which pixels turn on or off, producing a more structured, less random dot pattern than noise-based dithering.
Image-to-video model: An AI model that takes a still image as input and generates a short video clip animating it — used here to add motion before the frames are extracted and dithered.
Static hosting: Serving a website as a fixed set of HTML, CSS, and image files with no backend server — the model used by hosts like Vercel and Netlify, which is free at small scale.
Deployment protection: A Vercel setting, enabled by default on new projects, that puts a login wall in front of a deployed site; it has to be turned off for the page to be publicly viewable.

Resources

Things they pointed at.

05:00toolHiggsfield ↗

05:05toolGPT Image 2

05:05toolNano Banana Pro

07:40toolSeedance 2.0 (referred to on-mic as "Cdense 2.0")

11:08toolClaude Desktop / Claude Code

12:30linkMaker Zero prompt library ↗

18:10toolNetlify

18:13toolVercel

22:32productMaker School

Quotables

Lines you could clip.

00:05

“I'm gonna show you how to make really cool animated dithering effect websites just like this.”

clean cold-open hook that states the entire video's promise in one line→ TikTok hook↗ Tweet quote

08:15

“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 right one instead of just generating tons of videos.”

standalone cost-optimization principle for anyone chaining AI image and video tools→ newsletter pull-quote↗ Tweet quote

14:00

“You don't actually need a lot of intelligence in order to make a cool site.”

contrarian one-liner delivered while deliberately using an older, cheaper model→ IG reel cold open↗ Tweet quote

18:00

“You haven't had to pay for website hosting for a while.”

blunt myth-buster line for anyone still assuming hosting costs money→ TikTok hook↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphoranalogy

Hey. In this video, I'm gonna show you how to make really cool animated dithering effect websites just like this. I'm also gonna give you guys a full free prompt so you could use that prompt and 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 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 do it watching free YouTube tutorials like you are now. I'm gonna 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 resources there 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 is more or less what we're gonna 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 two, although I'm gonna play around with a couple to make sure we get the highest quality ones.

And we're just gonna have it generate like a a stylized painting thing. Now, 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 a renaissance era thing. So this is like an ancient fresco for instance.

And I really like that vibe. I think 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 act 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 pretty good job. So what we're gonna do is we're gonna feed this into some image to video model and a variety of different ones we can. It's gonna cost us probably 25 to 50¢ or so, and then we're gonna have a video.

But I don't know if you guys noticed, 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 y. It's like one frame, and then you can kinda tell that it jumps a little bit to another one.

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 staticky 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 extract everything and then run it at approximately eleven frames per second.

Then after that, we need to apply what's called dithering. For those of guys that don't know, dithering is just this sort of like black and then white dot effect. 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 pretty 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 because 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 if you guys could tell, but it's sort of like a a fleet of ships in the background. This sort of stuff tends to work really well with, I find warm, more pastel tone colors.

And so I'll just give you guys a bunch of color palettes and swaths 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 do we actually do that very first step? There are variety of different models you could use.

So I mentioned GPT image two, for instance. Guys may be familiar with Nano Banana or Nano Banana Pro. I'm just gonna play around with them, I'm gonna show you guys that whole process, just so that you can sort of put yourself in my shoes, and then I'm just gonna 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. These guys are basically aggregators that host hundreds of different image models. So I'm just gonna do that really quickly, and then we'll be able to use models like Nano Banana Pro.

Afterwards, we're gonna head to images in the top left hand corner. Click on create image, and you'll be faced with a screen that looks like this. Now, you're probably not gonna have all the same sorts of pictures that I do.

The reason why I have 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, that is actually this one right over here.

And you can actually almost almost tell the, you know, effects of that rotunda if you just like compare it with that image that I generated back here. This one over there is the Armada.

So if we if we go over here, do you guys kinda see how the two basically line up? It's super subtle, but obviously, they do. You know, I tried generating like angels with frescoes.

I tried generating whole universes. The variety of really cool effects that you can do. I even tried doing galloping horse.

Although, I will say the galloping horse is kinda fifty fifty. 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, you know, said I was generating something that's not safe for work.

So I find that pretty funny. 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 panes forming one vast concentric wheel.

So the idea is we're gonna be generating like a wheel, basically, in, you know, Gothic rose style. So in order for this to work well, you can't just use the one to one aspect ratio.

I found you really do have to go widescreen, which kind of makes sense because that's basically what we're doing. Right? You'll also notice that it says two k here by default.

That's because they're just trying to charge you as much money as possible. I mean, you can, you know, do the two k if you want, but my recommendation is to dial it back down to one k. And then you'll also have a batch size.

So this is how many you're gonna be generating. If you just generate one, um, you know, you're probably not gonna get the best results possible, just to be honest. So I I like doing two, just that I have, like, two options to pick from, kind of a crappy one and, an an okay one.

And, uh, yeah. Then I'm just gonna click generate over here. It's gonna cost four tokens.

I don't know exactly how the tokens are billed, 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 gonna zoom back out a little bit, and then wait until that happens.

Okay. And I've actually generated a bunch of stuff. I've also generated some more, you know, some ash falling, just because 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. 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 gonna 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 into a video. So that's what we're gonna be doing right now, and I'm gonna show you guys how that works.

Oh, man. Just while I'm at it, do you guys see this one? This is gonna animate crazy style.

Like, that is insane. And look at this one too. I think these are probably gonna be better than this.

But anyway, let's just try Okay. So which one do I like more? Probably this one, would say, just because it's a little grander.

Head 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 dense two point o, I'd recommend c dense two point o. The reason why is it's just probably, like, the 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, Cdense two point o, that's the one that I'm gonna pick. And then it may say, like, eight seconds or sixteen seconds. You'll notice that the number of tokens goes up a lot.

So, you know, I wanna do this for basically about a dollar or so. I'm gonna go down to four seconds here. The aspect ratio you should choose is 16 by nine, and then the quality is okay at ten eighty p.

You could go four eighty or seven twenty p if you wanted to. I wouldn't recommend four eighty because the quality really would be abysmal. But I'm just gonna do ten eighty p.

And then over here, you see where it says upload media? You know, in case you don't already have that, go to image generations over here at the top. And then you actually wanna select the thing that we just were using.

So in my case, was using this, and I just wanna a 100% make sure we have that sort of as the input. If we don't have that as the input, it's not gonna look like 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 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 right one instead of just generating tons of videos.

Okay. So just like the other one, I'm just gonna generate multiple. So I'm gonna do one here.

So that should pop out one. And then I'm just gonna do it again because, you know, I just want the best chance possible. And then I'm also gonna do the same thing with the other one.

And I think, you know, this is probably gonna be the sexiest one. I mean, like, this looks really sexy.

Don't get me wrong. But it's like pretty busy, so maybe this would make more sense, probably more recognizable. So let's click on that, and I'm just gonna 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 gonna 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, it's gonna make it way way easier for us. And notice how we didn't even touch like an AI agent chat box yet.

We're we're literally just using available models on, you know, a a big 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 this. 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 gonna loop well, but I think it's gonna look really sexy.

So maybe we could like re loop it. I I don't know. But anyway, I like this one probably more than the first one.

And then here's the ash. I have a feeling the ash is probably going look really nice just looking at the effect. Oof, look at that.

Could you imagine that with the dither? That'll be really sexy. 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 looks 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. From here on out, you've, like, spent the vast majority of all of 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'd probably spend, like, 10¢ in tokens. Let me show you now how to turn this into a beautiful dithered version.

One of those like cool ASCII kind of looking thing. So how do we actually do this?

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 gonna show you guys my own approach.

And then, as mentioned, did not go to school for programming 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.

It's available on both Mac OS and Windows. You guys could do that just by heading over to Google Chrome, and then literally just typing in Claude desktop right over here.

It'll take you to a page that allows you to install a 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 like this. And what you want is you just want whatever version corresponds to you.

So in my case, that's the Mac OS 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 a month or something on the base plan.

And what you're gonna wanna do after that is you're gonna want to move over to this tab over here on the left called code. Code is where we do all of the coding.

So I'm just gonna give that button a click. My interface is gonna change pretty dramatically. 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 it 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 gonna open a folder, and in my case, I'm just gonna call this.

Let's make a new one, and I'm gonna call this for YouTube. I bet you I have like 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 gonna do is go to school.com/makerzero. This is that page where I store all of my resources, and then I'm just gonna 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 because those are the ones that I've already used. We want the dither prompt.

So I'm just gonna copy this whole thing. K. And I'm gonna go back to Claude over here.

I'm actually gonna paste this whole thing in. And then, this prompt essentially will just guide it through the process of going through the generations. The last thing I need to do is I actually need to supply it with the files that I just generated because that's just part of the prompt.

So I'm just gonna go find those. And, you know, if I go back to Higgs field, you see can I can actually download them? So I'm gonna download this video right over here.

And this is gonna be the one that I do to start. K. And then what I'm gonna do is I'm just gonna copy this.

Once I have the name of the file, I'm actually just going to feed that in. So as you can see, it's users, Nick's Drive, 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 request. So the very first thing it's gonna do is it's gonna go and find it.

It's gonna say, hey, 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 for this technique.

I would agree, mister Claude. And, yeah, now it's essentially going to be generating that. So now it's flattening it, killing the paper, and I'm not gonna 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 people would consider pretty outdated. Opus 4.8, I think it's 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, you know, you guys could do this with like a total open source model as well. I know Kimi k three is now available.

There's also a bunch of other ones. Basically, we all have access to more than enough intelligence for just a few cents to make something super cool. K.

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 sort of a test browser here. So And what it is doing is it's actually navigating and, you know, I wish I could just move my big fat head so you guys could see it a little bit better.

But, I mean, we actually have, like, look, the embers floating slowly through time. Kinda neat.

Right? Now I should know, 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. I'm doing this just because I wanted to show you guys what is possible, but I also didn't wanna 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 wanted.

And if you wanna turn this into a full website, it's as easy as just asking to turn this into a full website. Uh, but my recommendation is, like, before you do the full website design and actually have it, flush out everything else, I would actually just make sure you really like the above the fold, aka this section first.

So that's what I'm gonna do over here. I'll say, hey, I really 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 anybody can understand. And now it's just gonna go and it's gonna do it for me. Gonna 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. If you roll back the clock a little bit, like, was not how the Cloud desktop app was. 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, just applied with like we're we're basically just flipping through colors, through fonts, through a bunch of different things.

And so, yeah, pretty badass, 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 if you guys remember, I also had another website.

So not just this one. We also have that glass panel one. I wanna do that one too, and I wanna show you guys what that looks like.

So in order to do that, I'm actually just gonna go back to new, and then what I want is I basically wanna feed in that huge prompt again, but I just wanna feed it in with a different file. So this was the other one. Right?

I'm just gonna download this. And what I want is, again, if I go back to maker zero here, which I have saved to school.com/makerzero. And I go back here and then just grab that 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 gonna have this build that other website for me, and let's see how that goes. Alright.

So the end result is really, really cool. I mean, I don't like all the font styles that it's chosen, but I'll show you guys like my favorite ones. As you guys could see, we are doing this, like, crazy zoom out, and it's almost like a universe.

Yeah. You guys can actually see the acid lime magenta maximum loud. Probably looks a little bit cooler.

So yeah. I mean, like, this is more or less a variety of different ways to do this sort of effect. I don't wanna harp on it too much.

Also, just note that you should probably not have 10 of these open simultaneously. The more of these that you have open, the more computationally intensive it'll be. Yeah.

Anyway, pretty cool stuff. Now, another question that you may be having, 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 is somebody that has probably put up, like, 10,000 websites on the Internet or something now, is using a platform that hosts it statically. You And don't actually have to pay for website hosting anymore. Don't if you guys knew, but so 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 pretty good one. Um, or there's also, like, Vercel.

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 wanna do now is I just wanna use Vercel for it, and I'll show you just how easy it is. So, you know, it's one thing obviously to run it locally in my computer within the cloud desktop app. Now I wanna get on the Internet.

How do I do it? Well, first, just gotta sign up. So I'm just gonna sign up, continue with google.io.

Let's do that. They now have my name and profile picture. How dare they?

Okay. Cool. I'm working on personal projects.

My team name is just Nick. It's team Nick over here. Pretty lonely.

Yeah. No friends. Okay.

And then I'm gonna 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 the I have my, you know, team's ID.

So I think I need to copy that. So I'm gonna head back over to Cloud and I'll say, you know, great. Put this on Vercel.

Team ID, I'm gonna paste it in. 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 gonna call this YouTube, and I just wanna give up the full account scope. And because I know y'all are gonna be jumping on here pretty quick, I'm just gonna say it'll expire in one hour.

And then I'm gonna copy it. Now, I'm just gonna go back to my, like, Claude, and then I'll say, you know, token here.

And I'm gonna press enter. And this is all you need to do. It's now going to take all this and then deploy it for me.

You know, it's gonna probably yell at me being like, dude, how could you put your password under, basically, because that's what that is in plain text in a chat, but that's okay. Now it's actually gonna go through and then publish it for me. So let me just show you guys how simple it is.

Um, it's only been twenty seconds. It's already uploaded the whole thing.

Now it's created the deployment, and it's just gonna 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 website 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 him 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 your intention. So now it's now it's going.

So now it's loading the live URL in the browser as final proof. You even can see it has its own little internal browser. Here is the URL.

K. There it is. I'm gonna go back to my own Chrome, just put it in, and boom.

Look at that. And we actually have it up. And this is the website.

And you guys can actually access this website anytime if you, you know, pause the video and, I don't know, try and OCR or write this, you know, character for character. But this is it.

Right? It's it's right here. And that's not actually, you know, the website to do.

If you guys really did wanna 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 local host, but this one will be up pretty soon. Why don't we call it I don't know. I mean, like, I was designing this for my own SaaS called Clarvo.

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 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. Okay. So whatever design 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 get back. Hopefully, you guys now have everything you need in order to make all this work for you. 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.

That was a nightmare for me. So, yeah, you don't need to pay any fancy developers. You can actually get really cool dealer high quality, um, sites so long as you use, you know, a good image generator, a 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, wanna learn how to sell these systems and websites to people for money, definitely check out Maker School.

It's my ninety day accountability program where I show you guys how to do this over the course of ninety days, and I will actually give you all of your money back if you do not acquire a paying client 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 I show up every day and respond to, like, 70 to a 100% of posts. So I'm always in there. I will be nagging 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 all y'all in the next video.

The Hook

The bait, then the rug-pull.

Nick Saraev opens by showing off a handful of animated, dithered websites that look expensive but cost about a dollar in AI generation credits to build — then spends the next twenty minutes proving it, prompt by prompt, on screen.

Frameworks

Named ideas worth stealing.

00:45list

The Five-Step Dither Pipeline

Still image
Image-to-video
Frame extraction
Dithering (8x8 Bayer matrix)
Live animated page

The full sequence that turns one AI-generated painting into an animated website hero: generate a still, animate it, chop it into roughly 11fps frames, apply ordered dithering to each frame, then render the sequence as a looping canvas animation.

Steal forany landing-page hero section that needs a distinctive, animated background without custom video production

CTA Breakdown

How they asked for the click.

VERBAL ASK

21:52product

“if you guys like this sort of thing, wanna learn how to sell these systems and websites to people for money, definitely check out Maker School.”

Soft, single pitch placed after the full free walkthrough is already delivered — leans on a 100%-money-back-if-no-client-in-90-days guarantee rather than urgency.

MENTIONED ON CAMERA

05:00toolHiggsfield ↗

12:30linkMaker Zero prompt library ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.

Storyboard