Build the Viral Dithered Website Effect With Claude Code

Direct Answer

Nick Saraev's dithered website effect looks expensive because it combines three strong visual signals: carefully art-directed imagery, deliberately imperfect frame animation, and modern typography that stays crisp above the noise. The implementation is much simpler than a fully procedural shader. A short AI-generated clip is cut to roughly 11 frames per second, each frame receives a limited-palette dither, and the resulting sequence becomes the animated hero background.

The clever part is the shortcut. The browser does not need to simulate every pixel or generate the art in real time. Most of the visual work is completed before the page loads. Claude Code assembles the media, layout, pointer response, and style variations around those prepared assets.

The "$1 website" framing needs context. Nick estimates the media generation at around a dollar for this experiment. That does not include subscriptions, rejected outputs, design labor, implementation, testing, domains, or ongoing delivery. The method is inexpensive to prototype; a dependable client website is still a professional product.

Watch the Tutorial

Credits and Evidence

Video and workflow credit: Nick Saraev. Watch the original tutorial, follow Nick on X, and visit his website. This article is independent and unsponsored.

The supplied transcript is the source for the demonstrated settings, generated examples, reported costs, Claude workflow, and Vercel deployment. Tool capabilities were checked on 29 July 2026 against official pages from Google, ByteDance Seed, Higgsfield, Anthropic, FFmpeg, ImageMagick, Vercel, MDN, web.dev, and W3C.

The video mentions a MakerZero page and a separate Clarvo gallery containing Nick's exact prompt and experiments. The supplied material does not provide a stable verified URL for those resources, so this post does not guess one. The build prompt below is an original, production-oriented alternative.

Useful Links

Why the Effect Works

The visual tension does most of the work. Renaissance paintings, Gothic windows, fleets, ruins, smoke, and embers feel old and monumental. Dither patterns feel digital and constrained. Contemporary editorial typography makes the page feel designed rather than nostalgic.

Four ingredients reinforce each other:

• A clear silhouette: the source image remains readable after detail is removed.
• Slow motion: a zoom, rotation, drifting ash, or gentle head movement survives frame reduction.
• A narrow palette: two to five strong colors make the dither intentional.
• Sharp interface layers: the headline, navigation, and calls to action remain clean HTML above the textured image.

The pointer effect is the finishing touch, not the foundation. A small reveal, displacement, contrast shift, or halo gives the visitor a sense that the pixels respond to them. Keep it subtle enough that reading and clicking remain easy.

What Dithering Actually Is

Dithering is not merely "black and white dots." It is a family of techniques for representing tones or colors that are not available in a reduced palette. The algorithm distributes available pixels so the eye perceives an intermediate shade.

Test at the final display size. A pattern that looks beautiful at 1600 pixels wide can collapse into noise on a phone.

The Full Pipeline

1. Generate two or more 16:9 still-image directions
2. Select the composition with the strongest silhouette
3. Animate it into a short, restrained image-to-video clip
4. Remove audio and normalize size
5. Sample the clip at about 11 frames per second
6. Apply a limited palette and dither at build time
7. Export a compressed frame set plus a static poster
8. Build the semantic hero around the decorative canvas
9. Add subtle pointer response and style variations
10. Test motion, performance, mobile layout, and deployment

Nick's sequence is especially efficient because still images are cheaper to iterate than videos. Generate several compositions first, then spend video credits only on the image that already has the right framing.

A four-second clip sampled at 11 fps produces about 44 frames. That is enough for a deliberate staccato loop without creating hundreds of assets. The source movement should be slow because abrupt camera moves become harsher after sampling.

Settings That Matter

These are starting points, not laws. A mobile hero may need fewer frames, a smaller width, and a static fallback. A subtle portrait may need error diffusion; geometric architecture may look better with an ordered pattern.

How to Build It Without Melting the Browser

The safest architecture performs media processing once during the build, not on every visitor's device.

assets/
  hero-source.mp4
  hero-poster.webp
  hero-frames-desktop/
  hero-frames-mobile/

scripts/
  build-dither-frames.mjs

src/
  DitherHero.js
  styles.css

The frame builder should call FFmpeg to sample and scale the source, then use ImageMagick or a small image library to reduce the palette and dither the outputs. The page preloads only the poster and first few frames. Remaining frames load after the essential content is visible.

Draw the sequence into one decorative <canvas aria-hidden="true">. Keep the real headline, paragraph, links, navigation, and buttons in normal HTML. Use requestAnimationFrame for scheduling, but advance the frame only every roughly 91 milliseconds to preserve the 11 fps style. Cap device-pixel ratio so a 4K screen does not multiply the canvas cost unnecessarily.

Do not open ten animated experiments in the same page. Nick notices the same issue in the video: every active sequence adds decoding, memory, drawing, and compositing work.

Copy-Ready Build Prompt

This is an original prompt adapted to the workflow. Replace the bracketed details and point the agent to a project folder containing your source clip.

You are building one production-quality, above-the-fold website hero.

INPUT
- Source clip: [absolute or project-relative path]
- Brand/product: [name]
- Audience: [audience]
- Primary action: [CTA]
- Visual direction: [palette, typography, tone]

GOAL
Create a responsive dithered animated hero from the supplied clip.
The effect should feel deliberately low-frame-rate, editorial, and interactive.
Do not recreate another company's layout, copy, logo, or protected brand assets.

MEDIA PIPELINE
1. Inspect the source and report its dimensions, duration, frame rate, and audio tracks.
2. Create a build script that:
   - removes audio;
   - samples at 11 fps;
   - creates a desktop set no wider than 1600 px;
   - creates a mobile set no wider than 900 px;
   - compares ordered dither and error diffusion with 2-5 palette colors;
   - exports compressed WebP frames;
   - generates a static poster;
   - never overwrites the source.
3. Keep the complete hero media budget below [2.5 MB desktop / 900 KB mobile].
4. If the budget is missed, reduce dimensions, frame count, or quality and report the tradeoff.

IMPLEMENTATION
- Render decorative frames in one canvas with aria-hidden="true".
- Keep all meaningful content and controls as semantic HTML above the canvas.
- Advance frames at 11 fps while using requestAnimationFrame for scheduling.
- Cap canvas device-pixel ratio at 1.5.
- Preload the poster and first frame only; load the rest after essential content.
- Add one subtle pointer interaction that does not move text or block clicks.
- Provide a visible pause/resume control.
- For prefers-reduced-motion, show the static poster and disable pointer animation.
- Preserve keyboard navigation, visible focus, and readable contrast.
- Make mobile framing intentional rather than simply cropping the desktop center.

DESIGN
Create three clearly different directions using the same media:
A. restrained editorial;
B. high-contrast brutalist;
C. warm cinematic.
Change typography, palette, layout, and effect intensity without creating nested cards.
Present the three directions before expanding the rest of the page.

VERIFICATION
- Test at 1440x900, 768x1024, and 390x844.
- Confirm no horizontal overflow or text overlap.
- Confirm pause and reduced-motion behavior.
- Check that every link and button is keyboard reachable.
- Report total transferred hero bytes and console errors.
- Run the available build, lint, and browser checks.
- Return files changed, preview URL, known limitations, and the recommended direction.

Set a Performance Budget Before You Generate

Dithered frames can compress well because the palette is small, but dozens of files still add up. A beautiful hero that delays the headline or freezes a phone is not premium.

• Generate a real poster image and make it visible immediately.
• Remove the unused audio track from decorative media.
• Use separate mobile and desktop dimensions.
• Load only the first frame before the page becomes usable.
• Pause when the tab is hidden or the hero leaves the viewport.
• Stop the pointer effect on coarse-pointer devices.
• Measure total bytes, memory, long tasks, and interaction latency on real hardware.

If the frame sequence remains too heavy, use a compressed <video> loop with a dither already baked into the frames. It gives up frame-level interaction but is often the better production tradeoff.

Motion Needs an Off Switch

Persistent movement behind text can distract users and trigger vestibular discomfort. W3C guidance requires a mechanism to pause, stop, or hide non-essential moving content that starts automatically and continues beyond five seconds. An infinite four-second loop still continues beyond five seconds.

Build these behaviors from the beginning:

• Honor prefers-reduced-motion: reduce with the static poster.
• Provide a visible pause button that remains usable by keyboard.
• Keep pointer-triggered scaling, parallax, and zoom very small or disable them.
• Use a dark or light scrim so text contrast remains stable across every frame.
• Never place essential information only inside the moving visual.
• Test flashing and rapid contrast changes, especially with monochrome palettes.

Deploy Safely With Vercel

The tutorial's deployment succeeds, but its secret-handling example should not be copied. Nick creates a full-account token and pastes it directly into the Claude conversation. He jokes that the token is effectively a password. That is exactly why it should not enter the prompt.

Use this safer path:

1. Install the official Vercel CLI.
2. Run vercel login yourself and complete the interactive authentication.
3. Ask the agent to run vercel link for the selected project.
4. Create a preview with vercel deploy.
5. Review the preview URL, console, layout, links, motion controls, and asset sizes.
6. Promote deliberately with vercel deploy --prod only after approval.

For unattended CI, use the narrowest practical token scope, store the value in the platform's secret mechanism, set a short expiry when possible, and revoke it after the job. Do not put tokens in prompts, screenshots, commits, URLs, or source files.

"Free hosting" also means within the current plan's limits. Bandwidth-heavy hero media, custom domains, team features, protection, analytics, and commercial traffic may change the economics. Check current Vercel pricing before promising zero hosting cost to a client.

The Honest Cost Breakdown

A high-end website is not priced by the number of tokens used to create the first hero. Clients pay for a useful outcome: original direction, reliable delivery, measurable performance, safe deployment, and someone accountable when the page changes.

Five Design Variations Worth Testing

1. Monochrome museum: sculpture or architecture, black and off-white error diffusion, quiet serif headline.
2. Acid editorial: cobalt, lime, and magenta ordered dither with compact grotesk type.
3. Warm ruin: ochre, charcoal, and faded rose with drifting embers and restrained movement.
4. Technical product: geometric object rotation, two-tone threshold treatment, precise data labels.
5. Local place: an original photograph of a venue or landscape, brand palette, subtle pointer reveal, and a static mobile crop.

Do not generate five unrelated pages. Keep the message, audience, and primary action constant so the test reveals which visual system communicates best.

Video Chapters

Bottom Line

This is a genuinely useful creative-coding shortcut. A strong still, four seconds of restrained motion, about 44 dithered frames, and a semantic interface can create a memorable hero without a custom shader or a large engineering team.

The production quality comes from what happens after the first impressive preview: compressed assets, mobile art direction, reduced-motion behavior, a pause control, stable text contrast, safe credentials, preview review, and a clear reason for the visual to exist. Build those parts and the effect can support a real website rather than merely decorating a demo.

Sources

• Nick Saraev: The Viral $1 Website Effect That Looks Like $10K
• Nick Saraev on YouTube, X, and website
• Higgsfield AI Canvas
• Google: Nano Banana Pro
• ByteDance Seed: Seedance 2.0
• Anthropic: Claude Code Desktop
• FFmpeg filter documentation
• ImageMagick: color quantization and dithering
• web.dev: video performance
• MDN: prefers-reduced-motion
• W3C: Pause, Stop, Hide
• Vercel CLI login and deployment guide