---

name: varg-mockups description: >- Mock up a video before paying for it: one self-contained HTML board (storyboard board, moodboard, reference board, look test, plan page, contact sheet) with numbered frames, shot specs, prompts, approve / needs-fix / reject and a note per frame, side-by-side variants and feedback copied as Markdown; stills made on varg (Nano Banana 2.1, GPT Image 2.5) that do not look like AI slop and stay consistent (character sheets, environment master first, same lens and light); device and app UI mockups (iMessage chat, Apple Notes, iPhone fold, phone stamp carousel, terminals, code editors). Use for "mock up", "mock up a look", "mockup", "storyboard board", "moodboard", "reference board", "look test", "stills for approval", "key frames to approve", "shot board", "phone mockup", "app UI mockup", "screen mockup", or stills that look like AI slop or drift between shots. Not for final video clips (varg-video-prompting) or 3D camera blocking (threejs-animatic). license: MIT metadata: author: vargHQ version: "1.0.0" compatibility: >- Boards are plain HTML (any browser; Chrome for the headless screenshot check). Stills need the varg MCP (https://mcp.varg.ai/mcp) or a VARG_API_KEY. Device templates need Bun or Python 3, ffmpeg and Chrome, and use no credits.

varg mockups: approve cheap stills before expensive video

A mockup is anything the reviewer can react to in a minute instead of after a render. In our sessions it was three things, in this order of how often we used them:

1. A review board: one HTML page of numbered stills (storyboard, moodboard, reference board, look test, plan page) with a status and a note per frame. Built before any video is generated.
2. Mockup stills on varg: look tests, character and location cards, key frames. Cheap images that lock the look, the cast and the geography.
3. Device and UI mockups inside the video: a phone chat, a typed note, an app in a phone, terminals and editors. Rendered locally from templates, no credits.

The board is the core. Stills feed it; device mockups appear on it as stills before they are rendered as video.

Why stills first

• A 5 s seedance_2_5 clip at 720p costs about 210 credits. A nano_banana_2_1 still costs about 6-8 credits and a gpt_image_2_5 high-quality still about 23 (prices: the varg-ai skill, references/models.md). One wasted clip pays for 9-35 stills.
• A board of stills gets a reaction in minutes; an animated cut takes a render to judge and another to change. Our reviewers' own rule: to iterate faster, make the still slides first, then lay texture and motion on top.
• Order of work that held up: words and timing (script, beat sheet or music grid) → anchors → stills on a board → approval → animate one main motion per shot → one grade over everything → type and graphics last, in code.
• Never start a video generation for a shot whose still is not approved. Before any spend, price it (estimate_cost, or plan_batch for many stills) and say the total in credits.

The board workflow

1. Shot list. One row per shot: number, time range, shot size, action, place, who is in it, and why the shot exists. Cut shots that have no job: a reviewer removed a whole scene as "not clear why it's needed". If the person sent a reference clip or images, stay close to it; "make the storyboard closer to the original" was the correction when we drifted. If they sent none, find some first (see Finding references).
2. Anchors first (see Consistency): character sheet per person, location master per place, product sheet per product. Approve these as a small board of their own when the cast or set is new.
3. Look test. Before the full set, make 2-4 test frames of the hardest shots, or one frame in two or three looks. Pick the image model here (a casting test across two models) and stick to it. When the cheaper model kept disappointing, the reviewer asked for the top model (gpt_image_2_5) for the hero stills.
4. Generate one still per shot from the anchors. Use plan_batch for the whole set (prices it, charges nothing), then run_batch after the go. Make two variants only for shots that are genuinely open; label them A and B and show them side by side.
5. Self-QA every still before anyone sees it (checklist below). Regenerate or mark "needs fix" with the reason yourself. "Still bad, look at s1 s2 s3 yourself: they're different and full of artifacts" is the message you want to never receive.
6. Build the board from templates/board.html: copy it, fill only the JSON block (frames, spec, refs, variants with model, credits and prompt, your QA note and suggested status). Embed thumbnails, link full-res (see Gotchas for sizes).
7. Screenshot the board and look at it before handing it over: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --hide-scrollbars --screenshot=board.png --window-size=1400,1000 --virtual-time-budget=3000 "file:///abs/path/board.html?theme=light" then read the PNG. Also try ?theme=dark and ?view=list. Headless Chrome will not go narrower than 500 px; check phone width by loading the board in a 390 px wide iframe.
8. Hand it over and stop. Say what is on it, what you already flagged, and what it cost. Wait for the notes. Do not animate "while they look".
9. Apply notes to the noted frames only. Bump round, regenerate just those frames, keep replaced stills in a retired/ folder (never delete paid images), and say which frames changed.
10. After approval, animate from the approved stills. If some clips are not back yet, cut an animatic with the approved still and a slow push in their place, so the cut always plays end to end.

If the person asks to see the plan without spending ("show me the set of refs you will pass and write the prompt, don't generate"), make the same board with the planned refs and prompts per shot and no new images.

What goes on a board

Per frame (the template does all of this):

• A big number and a title (01: The hook), the time range, the act.
• The still, or variants side by side with a Pick button and a compare view.
• A shot spec: shot size, lens, camera move, light, place, cast.
• One or two lines of what happens in the frame (the action, not adjectives).
• The anchors it was made from (ref A1 sheet, ref L1 master). Reviewers check these: "does image3 even appear in these scenes?" caught a wrong reference.
• The prompt, collapsed, with a Copy button; the model and its credits.
• Your QA note ("Check: two arms on the handlebar plus a third hand") and a suggested status.
• Status: To review, Approve, Needs fix, Reject. A note box. Both saved in the viewer's browser.

Per page: a strip of all frames at the top (the film in N frames), the look line and palette with a Copy button, the anchor cards, filters by status, a guides toggle (thirds and an 8% safe area, for checking room for titles), Copy feedback (Markdown the reviewer pastes back into the chat), Print (a clean three-up contact sheet with statuses and notes), light and dark themes, phone layout. Optional: an audio file gives a player and a "Play from here" button per frame, which reviewers used to judge stills against the music.

Board rules from the reviews:

• Little text. Specs in a compact grid, prompts collapsed, long reasoning out of the board. Copy buttons instead of printed commands.
• Every thumbnail behaves the same way (opens the zoom). No frame that does something different from its neighbours.
• IDs and timecodes everywhere: reviewers answer with "D1 and D2 should be one scene", "remove F3", "at 0:23 show the hero longer", "0:31 artifact" plus a screenshot.
• Prompts and sheets in English (the reviewer asked for this mid-project); the board's own words in the reviewer's language.
• One board per round, with the round number in the header. Never mix notes from two rounds.

More layouts (reference board, look-fix plan, asset pack, shot log with music, UI mockup page): references/board-patterns.md.

Finding references

Without a specific reference an agent picks the safe, middle version of everything: "most AI videos look cheap because nobody gives the AI a real film reference" (post). People often cannot name the look they want either (post), so bring frames, not adjectives.

Where to look:

• Film-Grab (film-grab.com): free stills from films (post).
• ShotDeck (shotdeck.com): paid, two-week trial. Filters film frames by colour, light, camera angle and location; some shots list the camera and lens (post).
• Shot Cafe (shot.cafe): free reference shots for a scene.
• Eyecannndy: names of visual techniques, for when you know the effect but not the word for it.
• Pinterest: curated boards. Search "[film] still", "[director] color palette", "[decade] film grain", "[genre] lighting", "[character] cosplay".
• Web and UI motion: Godly and CTA Gallery (post).

How to search and pick:

• Name the feeling, not the subject, then search by attribute: colour, light, camera angle, location.
• Go to the specific, recognizable edge on purpose: one famous scene, one iconic costume, one named animation style. The middle version is what the model gives you without a reference.
• Borrow the look, not the IP: no characters, logos or actors from the source end up in the stills.
• For every frame, write what you take from it: palette, framing, lens, light direction, texture or motion ("take: the green practical light and lifted blacks", "take: low angle, subject in the lower third"). A frame with no "take" line does not go on the board.
• You can propose references yourself (a film and the scene, a style, a designer), skipping the obvious first pick. Link the actual frame; the person verifies by looking at it.
• Put the frames on a reference board with its Never list (board-patterns.md, pattern 3) before any still is generated.

Stills that do not look like AI slop

What the reviewers called slop: a character that came out as a generic stock man ("make him a bit younger, he came out AI slop"), a stretch of shots that did not match each other, glossy renders, and meme packaging. What fixed it was the brief, not the grade: a grade-only test (lower saturation, cooler balance, grain, vignette) helped about 10%; changing what we asked for did the rest.

• Footage someone filmed, not a nice picture. Name the camera and its operator's flaws: handheld news camcorder, phone at arm's length, a disposable camera with on-camera flash, autofocus that breathes, a late reframe. "Realistic, 8k, cinematic" says nothing.
• Kill golden hour. Pick one physical light for the whole film (overcast after rain, one practical lamp, a shop window spill) and repeat it in every prompt. Ban sunset glow, teal-orange, lens flares, fake HDR.
• Wear on every object. Scuffs, dust, fingerprints, drips, dents, uneven shine. Pristine reads as a product render.
• One specific, ordinary, lived-in place with its clutter listed. "Every prop looks unused" is the classic complaint. Avoid picture-perfect lawns and showroom interiors.
• Behaviour, not pose. Catch people mid-task, not looking at the camera, no posed gestures. A stoic character who never reacts carries deadpan well.
• Distinctive faces. Describe someone specific: age, asymmetry, one signature detail. Generic "rugged, stubble" prompts came o