The Prompt Behind My Vox-Style Portfolio Page: Paper, Highlighter and a Camera That Reads It for You

Vox explainers have a look you recognise in one frame. A scanned document, a yellow highlighter swiping across one sentence, a red marker circling a number, a black-and-white cut-out of someone with a white sticker border and a piece of masking tape holding it down. Then the camera pushes in on the line that matters.

I wanted my portfolio to feel like that. Not a video about it: the page itself, playing as you scroll. It's live at avivashishta.com/lab/explained, and the window above this post is that page running.

What makes something look like Vox

Before writing code I listed what you actually see in those videos, because "make it look like Vox" is too vague for a model:

• Paper everywhere. Backgrounds are scanned paper, not flat colour. Things are cut out, torn and taped down.
• The highlighted document. A real-looking page of text, and a highlighter swipes the key phrase while the camera zooms in on it.
• Marker on top. Red circles, arrows and handwritten notes drawn over the footage.
• Halftone cut-outs. People and objects as black-and-white newspaper prints with a thick white border.
• Chapter cards. A full-screen colour block with a number and a word, then it tears away.
• Charts and maps that build. Bars grow, pins drop, callouts slap in.
• Texture that moves. Grain and a slight wobble on the ink, because it was drawn by hand.

Every one of those became a part of the page: the numbers are a highlighted document, Build is a timeline with pinned screenshots, Brand is a bar chart with the brand clippings taped over it, and Learn is a map with a pin in India.

Generating the assets with Codex

I didn't want stock textures, so I asked the Codex CLI (codex exec, which has image generation built in) for each piece. A small script runs them all in parallel:

# gen.sh name "brief" [reference image]
codex exec --skip-git-repo-check -C "$OUT" --image "$REF" -- \
  "Use your image generation tool to create exactly ONE image, then copy the PNG to $OUT/raw/$NAME.png. \
   Style context: an asset for a Vox-style explainer page (paper collage, halftone print, highlighter, marker). \
   Image brief: $BRIEF"

One gotcha: --image takes several files, so without the -- it swallows your prompt as a second image path and Codex exits with "No prompt provided".

The trick that made the assets usable is asking for backgrounds that are easy to remove:

• Ink on white for anything I want to recolour. The highlighter stroke, the marker circle, the arrow and the torn paper strip are black on white. A few lines of Python turn brightness into alpha, and the result becomes a CSS mask, so one torn strip can be blue, red or yellow.
• Solid magenta or green for real objects. Tape, the push-pin and the cut-out are on #FF00FF or #00FF00, then chroma-keyed with a despill so the edges don't glow pink.
• A reference image for the cut-out. I passed my illustrated avatar with --image and asked for the same face as a halftone newspaper print with a hand-cut white border. It kept the curls and the glasses.

The prompt for the page

Paste this into Claude Code, Cursor or Replit along with your own content. It describes the system, not my files.

Concept 1: one variable per chapter

The whole page runs on this:

.k { --t: clamp(0, (var(--p) - var(--a, 0)) / (var(--b, 1) - var(--a, 0)), 1); }

--p lives on the chapter. Each piece declares its own window inline, style={{ "--a": .2, "--b": .3 }}, and gets a private --t that runs from 0 to 1 inside it. Custom properties resolve where they are declared, so a highlight inside a callout inside the camera still gets its own --t from the same --p.

That made choreography a matter of picking numbers. The first highlight in the numbers chapter is .2 to .3, the camera arrives on that line at .2, and the second highlight starts at .28, while the camera is still settling. Scroll back up and everything rewinds, because it is a function of scroll and not a timeline that played once.

Concept 2: stepped texture, smooth motion

My first version moved everything at 12 frames a second, which is what Vox does: graphics animated on twos so they feel hand-made. In a video that works. On a page you scroll with your own hand, it felt like lag. The page jumped behind your finger.

So I split it. Motion is smooth, texture is stepped. The loop eases --p toward the scroll position every frame, while the marker boil and the grain update twelve times a second:

const follow = 1 - Math.exp(-dt * 9);
beat.p += (target - beat.p) * follow;              // every frame: the camera glides
if (now - lastTexture > 1000 / 12) {               // on twos: the paper feels alive
  turbulence.setAttribute("seed", String(frame % 7));
  stage.style.setProperty("--grain-x", `${(frame * 37) % 240}px`);
}

You still get the handmade wobble on every circle and torn edge, but nothing you control stutters.

Concept 3: assets as masks, colour from CSS

Every hand-drawn asset is black on transparent and used only as a mask:

.torn { background: var(--c); mask: url("/vox/torn.webp") 0 50% / 100% 100% no-repeat; }

One torn strip becomes the blue, red and yellow bars on the title card, the ripped bottom edge of every chapter card, and the three doors on the end card. The colours stay the site's own tokens, so it still looks like my site and not a template.

The marker circle uses two masks at once, the scanned ellipse and a conic sweep, intersected:

mask: url("/vox/circle.webp") center / 100% 100% no-repeat,
      conic-gradient(from 20deg, #000 calc(var(--t) * 360deg), transparent 0);
mask-composite: intersect;

As --t goes to 1 the sweep opens and the circle looks like it's being drawn.

Concept 4: the camera is just keyframes

The document doesn't move. A wrapper around it does, through keyframes written as data:

<div data-cam={JSON.stringify([
  [.12, 0, 0, 1.25, -2],  // start close and tilted
  [.2, 8, 14, 1.55, -1],  // push in on line one
  [.46, -6, 2, 1.5, 0],   // drift to line two
  [.92, 0, 0, 1, 0],      // pull out to the whole page
])}>

Between two keyframes the loop uses smoothstep, so the camera always eases in and out like a real move. The Build timeline is the same thing with whole-panel pans: three panels side by side, and the camera holds on each company while its screenshot, pin, card and stat land.

Concept 5: real data, real links

Nothing on the page is typed in by hand. The document reads data/stats.json, the timeline reads the same list as the Build page, the brand clippings come from the media kit's markdown files, the chart ranks every Reel by views, and the headlines are the latest posts. When I update my numbers, the explainer updates too.

Every chapter also ends on a door to the real page: Build, the media kit, or Learn. The explainer is a trailer for the site, not a dead end.

That also led to a small feature across the blog: posts can have real outputs. Anything I build for a post lives on the site under /lab, and the post names it with output: "/lab/explained" in its frontmatter. The post then opens with the live page running in a window, and the page links back to its post. The Deal hero post and the homepage ring post do the same now.

What I'd steal from this

Even if you never build a Vox page, the --p and --t pattern is worth keeping. One number per section from JavaScript, everything else in CSS. It's scrubbable, reversible and cheap, and choreography becomes a list of windows you can read at a glance.