A single self-contained prompt. Paste it into a coding agent with image and video generation available, and it will rebuild this page end to end — the artwork, the dither engine, the animation loop and the layout.
Build a single-page animated landing page hero. Work through it in this order.
# 1. Generate the artwork
Use an image model to make ONE still, 16:9:
"Renaissance old master oil painting study of a colossal domed rotunda interior seen from the floor looking up, concentric rings of coffered panels receding to a bright oculus. Deep umber
and slate pigments on a plain flat pale cream parchment background. It fills the
frame, dense at the centre and breaking into individual elements at the edges.
No sky, no scenery, no figures outside the subject. No frame, no border."
The subject MUST be composed of many small discrete elements (a flock, a field, a
crowd, a plume, repeated architecture). This is the single most important
constraint. A solid object — one animal, one face, one smooth mass — turns into an
illegible grey blob when dithered, because the dot field has no internal structure
to latch onto. Subjects made of many parts render as themselves.
# 2. Turn the still into video
Feed that still to an image-to-video model as the start frame, 5s, 1080p, no audio:
"A colossal coffered dome seen from below, light slowly wheeling across the concentric rings of panels. Renaissance old master oil painting style, deep umber and
slate on flat pale cream parchment. LOCKED-OFF STATIC CAMERA: the subject stays
centred and fills the frame, never drifting off. No camera pan, no zoom. Flat
empty cream background, no scenery, no horizon."
Video, not a batch of separately generated frames. Independently generated frames
drift in geometry, scale and identity, and the result flickers between subtly
different subjects no matter how carefully you align them. One video generation
gives temporal coherence for free. Insist on the locked-off camera in the prompt or
the subject will travel across frame and the loop becomes unusable.
# 3. Extract and clean the frames
ffmpeg -i clip.mp4 -vf "fps=11,crop=iw*0.84:ih*0.84:iw*0.08:ih*0.08,scale=1400:-2" %03d.png
The crop removes the painted parchment border these models bake in from the start
image; without it the artwork dithers into a hard rectangle. Then flatten every
pixel brighter than ~232 luma to one flat paper tone, or codec noise in the
background renders as a haze of stray dots.
# 4. Write the dither engine
A canvas 2D renderer, no WebGL:
1. Downscale the frame to a grid of one cell per 10px block.
2. Convert to luma with Rec. 709 weights (0.2126 R, 0.7152 G, 0.0722 B).
3. Auto-level against the 2nd/98th histogram percentiles, then PIN those levels
for the whole sequence. Recomputing per frame makes the dot density visibly
pulse.
4. Apply brightness -4 and contrast 26, then
invert (dots land on the artwork, not the paper).
5. Clamp anything below 0.02 normalised luma to zero, removing
parchment texture.
6. Quantise with an 8×8 Bayer ordered-dither matrix into 6 tone
levels. Build the 8×8 by recursing a 4×4 into each quadrant.
7. Draw each cell as a filled circle, radius scaled by its tone level, with
0.46 of the cell as gap and dot radius × 0.78.
Use per-dot colour sampled from the artwork (colorMode 'sampled', colorMix 0.2, saturation 1.2, tinted toward #B85A48).
Airiness comes from big cells with small dots inside them, leaving paper visible
between each one. Small cells with full-size dots pack into a solid mass.
# 5. Animate it
Play the frames at 11fps. These motifs are turbulent — they never return to an
earlier state — so there is no true loop point and a hard cut always jumps. Instead
crossfade the last 8 frames back into the opening frames so the wrap dissolves.
Add a pointer effect: cells within ~62% of the canvas lean horizontally away from
the cursor and lift slightly, with an eased falloff, so the field bends like wind
moving through it. Displace the sampling coordinates, not the drawn output. Avoid
radial ripple distortions — on a natural motif they read as a lens artefact sitting
on top of the image rather than something happening to the subject.
# 6. Compose the page
Palette: paper #F7E2DC, ink #4A1D1B, muted #C79289, accent #9C3A2E.
Typefaces: 'Playfair Display', Georgia, serif for the headline, 'Lora', Georgia, serif for everything else.
Layout: full-bleed artwork with the headline block bottom-left and a short sub-paragraph plus CTA bottom-right.
Headline, clamp(48px,7vw,116px), line-height 0.94, letter-spacing -.025em, italic:
UNDER
ONE ROOF ← this line in the muted colour
Eyebrow above it, small and letterspaced: "Everything under one dome"
Sub-paragraph: "Dialer, reputation and coaching under one roof instead of three vendors."
CTA button: "↗ Book a demo"
A row of three small stats along the bottom: TX HVAC $4M → $6M / mo · 60 seats,
live in 14 days · pickup rate 3.1× baseline.
Top nav: wordmark "Clairvo" plus Product, Customers, Company, with "Book a demo"
pushed right.
Set the nav and headline to mix-blend-mode: multiply so the dots show through the
letterforms instead of punching a hole in the field.
Everything full-viewport, no scroll.
This prompt encodes the findings from building it: why the motif has to be made of many small elements, why the source must be video rather than independently generated frames, and the specific dither settings for this style.