A game cartridge card, in flat CSS

We use cartridge cards all over basement.fun to represent games. The fully 3D one is fun but heavy. This is the flat version, no canvas, no transforms, just CSS shapes, and it holds up surprisingly well.

NEW

Ball BlasterAim, charge, fire. Clear the board.

Game NFT

Mint once, play forever

The whole thing is one polygon

The cartridge outline is a single clip-path polygon. I don't draw it four times by hand. I stack the same clipped box four times and let each layer do one job:

1. blurred copy, offset down   → drop shadow
2. gradient-filled copy        → the beveled border
3. inset copy (1px in)         → the real background
4. second clip-path on top     → the media well

The 1px insets are what sell it. Layer 3 sits inside layer 2, so the gradient border peeks out exactly one pixel around the edge, like the seam on a piece of molded plastic. Same move on the media well.

Noise does the heavy lifting

Flat fills look digital. A tiled subtle-noise PNG over every fill is the single biggest upgrade. It reads as a textured surface instead of a <div>.

.subtle-noise {
  background-image: url("/cartridge/subtle-noise.png");
  background-repeat: repeat;
}

Accent that stays legible

The label tab takes any accent color, so the text on it can't be hardcoded. A small luminance check picks black or white:

const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return lum > 0.6 ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.92)";

The basement original leans on framer-motion, number-flow, and a couple of internal components for the mint counter. I stripped all of that. The shape is the interesting part, and the shape is pure CSS.

From basement.fun, a project I work on at B3. Grab it on the Compact Cartridge page.

Read the full writeup at https://seangeng.com/writing/a-2d-cartridge-card.md and implement it in my project. It covers: A game cartridge card, in flat CSS. A 2D cartridge card with molded-plastic edges, built from one clip-path polygon stacked four times. No 3D, no canvas, just layered shapes, a noise texture, and a luminance-aware accent. Pulled from basement.fun. Requirements: - Follow the technique/approach exactly as described in the writeup. - Adapt names, colors, and styling to my project's existing conventions. - If it's a component, make it reusable with sensible props and TypeScript types. - Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion. - When done, tell me which files you created or changed and how to use it.

The whole thing is one polygon

Noise does the heavy lifting

Accent that stays legible

Ask your agent to implement this

The whole thing is one polygon

Noise does the heavy lifting

Accent that stays legible