Record Mockup — 3D Vinyl & LP Mockup Generator

English · 简体中文

Record Mockup renders photorealistic 3D vinyl record mockups: LP jackets, gatefolds, 2LP sets, shrink wrap, hype stickers, obi strips and limited-edition numbers. Use it in the browser to build a release visual by hand, or drive the same renderer from a JSON scene spec through a CLI that AI coding agents can operate.

Try it in your browser → No install or sign-up needed; your artwork never leaves your machine.

All images in this README are rendered by Record Mockup from its built-in sample artwork. Specs live in docs/specs/.

What it renders

Gatefold spreads	Back covers	Coloured vinyl
Inner artwork and an adjustable opening angle	Obi strip, shrink wrap glare and a stamped edition number	Black, coloured or translucent, set per disc

Pattern vinyl: a translucent splatter disc and a pinwheel disc, from docs/specs/patterns.json.

• Jackets: single sleeve or gatefold at real 12″ dimensions (314 × 314 mm), matte, satin or gloss paper, printed front, back, spine and inner spread.
• Formats: 12" LP (314 mm jacket, 302 mm disc) or 7" single (format: "7in": 184 mm jacket, 175 mm disc at 45 rpm, with an optional 38 mm large centre hole).
• Records: 1LP or 2LP, grooves with track gaps, A/B/C/D labels, 1–20 tracks per side, black, coloured or translucent vinyl per disc, inner sleeves and a double-sided insert that slide out of the jacket. A gatefold 2LP puts one record in each panel, or stacks both in the right panel.
• Disc only: switch the scene to the record alone, vinyl and labels with nothing else in frame, to design the disc itself; on 2LP pick which disc to show (scene.mode: "disc").
• Filled vinyl and glitter: liquid-filled patterns (rounded blobs and droplets in one colour and a shade of it, carried round as the disc spins), sand, and glitter, picked like any other pattern.
• Vinyl colours and patterns: plain black, or a coloured disc with 0–80% transparency. Coloured discs can carry a pattern: splatter, blob, swirl, pinwheel, ripple, starburst, smoke or marble, or split colours in halves, thirds or quarters. Pick the colours yourself or take them from the cover. On a 2LP, disc 2 matches disc 1 unless you style it separately.
• Album lookup: search MusicBrainz and the Cover Art Archive by artist and album (artist aliases included, so English names find CJK credits), pick a 12″ vinyl release, and send any of its images to any artwork slot. Record count, gatefold and tracks per side are filled in, disc photos are cropped into side labels, and the cover defaults to the album's digital release artwork. Your own uploads stay unless you replace them.
• Retail details: crinkled shrink wrap with studio reflections, a hype sticker on the wrap (round, rectangular or square artwork, or one of 10 editable templates), a Japanese-style obi strip, and limited-edition numbers (print, rubber stamp, hot foil or handwriting, any font).
• Output: PNG up to 4096 px with a transparent or solid background, preset camera angles plus orbit, zoom and pan.

Typical uses: pre-order announcements, store and Bandcamp listings, label catalogues, social posts and pitch decks for a pressing.

Two ways to use it

Browser editor. index.html is a single-page editor: upload artwork, switch formats, pull records out, orbit the camera and export a PNG, or play an animation on the stage (turntable, swing, record spin, gatefold opening, pull-out) and export it as an MP4 or GIF in 16:9, 1:1 or 9:16. Images are processed locally in the browser and are not uploaded anywhere. The scene, including uploaded artwork and font, is saved in this browser (localStorage for settings, IndexedDB for files) and comes back after a reload; New clears it. Below 860 px wide the editor fits one phone screen, with the settings pages on bottom tabs.

CLI and agents. cli/record-mockup.mjs opens the same page in headless Chrome and drives it through window.recordMockup, so the CLI output matches the editor exactly. Every option is a field in a JSON scene spec with a published JSON Schema, which makes the tool easy for AI agents such as Codex or Claude Code to operate: write a spec, render, look at the PNG, adjust, render again.

flowchart LR
  A[Artwork + JSON spec] --> B[record-mockup render]
  B --> C[Headless Chrome<br>same renderer as the editor]
  C --> D[PNG mockup]
  D -->|agent reviews the image| A

Requirements

• Node.js 20 or later.
• Google Chrome, or Playwright's Chromium.
• Network access for the first npm install.

Install

npm ci --prefix cli

The CLI uses your installed Chrome by default. Without Chrome:

cd cli
npx playwright-core install chromium
cd ..

Then add --browser chromium to CLI commands.

Quick start

mkdir -p output
node cli/record-mockup.mjs schema -o output/schema.json
node cli/record-mockup.mjs slots examples/2lp-gatefold.json
node cli/record-mockup.mjs render examples/2lp-gatefold.json -o output/example.png --json --strict

The example uses the renderer's built-in sample artwork, so no album art is needed.

To start your own scene:

node cli/record-mockup.mjs init -o output/spec.json

This is the beginning of the README. Read the rest at the original. Read the full README ↗