shiner.app

Momir Card Printer

Roll a random Magic creature by mana value and print it as a proxy — Momir Basic for kitchen-table play.

livesource
  • React 19
  • TypeScript
  • Vite
  • Tailwind v4
  • shadcn/ui
  • Scryfall API

Features

  • Roll by mana value, 1–16
  • Card-image, text-card, and thermal-receipt print modes
  • Print scale slider (50–120%), sleeve-ready 97% default
  • Auto-print — roll lands, dialog opens
  • Fullscreen play mode
  • Dark mode + settings persisted locally
Screenshot of Momir Card Printer

The brief

Momir Basic is a Magic: The Gathering format where you pay X, discard a card, and get a random creature with mana value X. Playing it on paper means either a phone app held over the table or proxy sheets printed in advance. I wanted the middle path: roll at the table, print the creature on the spot, keep playing.

How it was built

  • Scryfall as the only backend. The random-creature roll is a single Scryfall search query (is:firstprinting t:creature mv:X) — no server, no database, no accounts. The whole app is static files.
  • Three print modes. Full card image for color printers, an oracle-text-only card for ink-friendly proxies, and a thermal-receipt mode sized for 80mm receipt printers — because rolling a creature and having it tick out of a receipt printer at the kitchen table is the point.
  • Print CSS is the hard part. @media print strips everything but the card and auto-print fires as soon as the image loads. Print scale defaults to 97% — sized so the printout slips into a sleeve behind a real card without binding — with a slider to dial it anywhere from 50–120%.
  • Fullscreen play mode keeps the roll UI on a phone or tablet propped at the table, styled in the same Andromeda palette as everything else I ship.

Stack notes

Vite + React 19 + TypeScript strict, Tailwind v4, shadcn/ui (Radix Nova). Deployed to Cloudflare Pages via GitHub Actions — push to main, Actions builds and uploads. First project on the shiner.app umbrella domain.