gatefold

Gatefold

Albums, opened up. Each record on the shelf gets a small interactive world built from its own story, and every song comes with what it’s about.

Live: https://gatefold.craigwickesser.com

On the shelf

Catalog	Album	Worlds
GF 001	Buffalo Traffic Jam, Pictures of You (2026)	Stuck in a Buffalo Traffic Jam · Developing Pictures of You

How it works

The homepage is a shelf of record spines. Tapping one opens the album like a gatefold sleeve, with an original cover on one side and liner notes on the other, plus links to that album’s worlds.

A world is a single interactive page built around something from the album itself. In each world, tapping an object reveals a song and what it’s about, and every meaning is labeled by where it comes from:

• Per the band: from interviews, press releases or liner notes
• Per reviews: from critics
• Our read: our interpretation, where the band hasn’t said

Run it locally

There’s no build step. Serve the folder and open it in a browser:

python3 -m http.server 8000 -d docs
open http://localhost:8000

Project layout

docs/                           The published site (only this folder is public)
  index.html                    Shelf homepage (album registry, cover art, icons)
  <artist>/<album>/index.html   An album's first world
  <artist>/<album>/<world>.html Additional worlds
  CNAME                         Custom domain, don't remove
AGENTS.md                       Rules and conventions for coding agents
CLAUDE.md                       Claude Code entry point (imports AGENTS.md)
.claude/skills/new-gatefold/    The add-an-album workflow

Every page is one self-contained HTML file. The only outside request is Google Fonts, and all artwork is drawn in code.

Adding an album

In Claude Code, from the repo root:

/new-gatefold Artist — Album

It researches the tracklist and song meanings, pitches world concepts for you to choose from, builds the pages, adds the album to the shelf, and tests everything before handing back. See AGENTS.md for the full rules if you’re building by hand.

Deploying

Pushing to main publishes the docs/ folder through GitHub Pages. Nothing outside docs/ is served. The custom domain comes from the CNAME file and a gatefold CNAME record at Hover that points to mindscratch.github.io.

Ground rules

• Fan-made, and not affiliated with any artist or label.
• No lyrics are reproduced anywhere on the site.
• No real album art, band photos or logos. Covers are original drawings marked “FAN SLEEVE”.
• Meanings are paraphrased, and their sources are linked on each page.

A side project from craigwickesser.com.