{
  "id": "neon-arcade-cabinets",
  "name": "Cabinet Finder",
  "theme": "neon-arcade",
  "category": "Search & Browse",
  "description": "Browsing cabinets by how many people can play at once, with a horizontal snap-scrolling shelf per player count instead of one long grid.",
  "layout": "Three horizontal scroll shelves with scroll-snap, each labelled by player count, above a filter row of hue-coded chips rather than a sidebar.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Sixty-one cabinets</h1><span class=\"m\">Everything on the floor tonight. Nothing is out of order.</span></header>"
    },
    {
      "key": "chips",
      "name": "Filter chips",
      "html": "\n<div class=\"ch\"><button type=\"button\" class=\"on\">All</button><button type=\"button\" class=\"h2\">Vector</button><button type=\"button\" class=\"h3\">Raster</button><button type=\"button\" class=\"h4\">Pinball</button><button type=\"button\" class=\"h5\">Rhythm</button><button type=\"button\">New this season</button></div>"
    },
    {
      "key": "solo",
      "name": "One player shelf",
      "html": "\n<section class=\"sh\"><h2 class=\"sl\">One player</h2>\n<div class=\"shelf\">\n  <article class=\"c1\"><figure><img src=\"{{ART tube}}\" alt=\"{{ARTALT tube}}\"></figure><b>Grid Wolf</b><span class=\"m\">1987 · vector</span></article>\n  <article class=\"c2\"><figure><img src=\"{{ART grid}}\" alt=\"{{ARTALT grid}}\"></figure><b>Doubloon</b><span class=\"m\">1987 · raster</span></article>\n  <article class=\"c3\"><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><b>Ash Runner</b><span class=\"m\">new · raster</span></article>\n  <article class=\"c4\"><figure><img src=\"{{ART confetti}}\" alt=\"{{ARTALT confetti}}\"></figure><b>Slipstream</b><span class=\"m\">1984 · vector</span></article>\n  <article class=\"c5\"><figure><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"></figure><b>Nine Lives</b><span class=\"m\">1991 · raster</span></article>\n</div></section>"
    },
    {
      "key": "party",
      "name": "Four player shelf",
      "html": "\n<section class=\"sh\"><h2 class=\"sl\">Four players</h2>\n<div class=\"shelf\">\n  <article class=\"c3\"><figure><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"></figure><b>Neon Judge</b><span class=\"m\">new · raster</span></article>\n  <article class=\"c5\"><figure><img src=\"{{ART confetti}}\" alt=\"{{ARTALT confetti}}\"></figure><b>Cassette Hell</b><span class=\"m\">new · rhythm</span></article>\n  <article class=\"c1\"><figure><img src=\"{{ART tube}}\" alt=\"{{ARTALT tube}}\"></figure><b>Four Corners</b><span class=\"m\">1993 · raster</span></article>\n  <article class=\"c2\"><figure><img src=\"{{ART grid}}\" alt=\"{{ARTALT grid}}\"></figure><b>Riot Squad</b><span class=\"m\">1990 · raster</span></article>\n</div></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "neon-arcade-cabinets",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:56:24+09:00",
    "updatedAt": "2026-09-01T19:56:24+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/neon-arcade-cabinets.json",
  "structure": "Three horizontal scroll shelves with scroll-snap, each labelled by player count, above a filter row of hue-coded chips rather than a sidebar.",
  "html": "<div class=\"dz dz-neon-arcade-cabinets\" data-design=\"neon-arcade-cabinets\" data-theme=\"neon-arcade\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Sixty-one cabinets</h1><span class=\"m\">Everything on the floor tonight. Nothing is out of order.</span></header></section>\n<section class=\"dz-mod\" data-mod=\"chips\" aria-label=\"Filter chips\">\n<div class=\"ch\"><button type=\"button\" class=\"on\">All</button><button type=\"button\" class=\"h2\">Vector</button><button type=\"button\" class=\"h3\">Raster</button><button type=\"button\" class=\"h4\">Pinball</button><button type=\"button\" class=\"h5\">Rhythm</button><button type=\"button\">New this season</button></div></section>\n<section class=\"dz-mod\" data-mod=\"solo\" aria-label=\"One player shelf\">\n<section class=\"sh\"><h2 class=\"sl\">One player</h2>\n<div class=\"shelf\">\n  <article class=\"c1\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-tube.webp\" alt=\"A bent neon tube in magenta against black\"></figure><b>Grid Wolf</b><span class=\"m\">1987 · vector</span></article>\n  <article class=\"c2\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-grid.webp\" alt=\"A magenta perspective grid receding over black\"></figure><b>Doubloon</b><span class=\"m\">1987 · raster</span></article>\n  <article class=\"c3\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-hero.webp\" alt=\"Arcade cabinets glowing magenta and cyan in a dark room\"></figure><b>Ash Runner</b><span class=\"m\">new · raster</span></article>\n  <article class=\"c4\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-confetti.webp\" alt=\"Saturated confetti shapes scattered on black\"></figure><b>Slipstream</b><span class=\"m\">1984 · vector</span></article>\n  <article class=\"c5\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-crowd.webp\" alt=\"Silhouetted hands raised under magenta and cyan stage light\"></figure><b>Nine Lives</b><span class=\"m\">1991 · raster</span></article>\n</div></section></section>\n<section class=\"dz-mod\" data-mod=\"party\" aria-label=\"Four player shelf\">\n<section class=\"sh\"><h2 class=\"sl\">Four players</h2>\n<div class=\"shelf\">\n  <article class=\"c3\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-crowd.webp\" alt=\"Silhouetted hands raised under magenta and cyan stage light\"></figure><b>Neon Judge</b><span class=\"m\">new · raster</span></article>\n  <article class=\"c5\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-confetti.webp\" alt=\"Saturated confetti shapes scattered on black\"></figure><b>Cassette Hell</b><span class=\"m\">new · rhythm</span></article>\n  <article class=\"c1\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-tube.webp\" alt=\"A bent neon tube in magenta against black\"></figure><b>Four Corners</b><span class=\"m\">1993 · raster</span></article>\n  <article class=\"c2\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-grid.webp\" alt=\"A magenta perspective grid receding over black\"></figure><b>Riot Squad</b><span class=\"m\">1990 · raster</span></article>\n</div></section></section>\n</div>",
  "css": "\n.dz-neon-arcade-cabinets { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 30px; }\n.dz-neon-arcade-cabinets .hd { padding: 24px 26px 18px; }\n.dz-neon-arcade-cabinets .hd h1 { font-family: var(--pv-display); font-size: 48px; font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; margin: 0 0 6px; }\n.dz-neon-arcade-cabinets .m { font-size: 12px; color: var(--muted-foreground); }\n.dz-neon-arcade-cabinets .ch { display: flex; gap: 10px; padding: 0 26px 26px; flex-wrap: wrap; }\n.dz-neon-arcade-cabinets .ch button { font: inherit; font-size: 13px; background: transparent; color: var(--muted-foreground); border: 2px solid var(--border); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-neon-arcade-cabinets .ch .on { color: var(--foreground); border-color: var(--primary); }\n.dz-neon-arcade-cabinets .h2:hover { border-color: var(--chart-2); color: var(--chart-2); }\n.dz-neon-arcade-cabinets .h3:hover { border-color: var(--chart-3); color: var(--chart-3); }\n.dz-neon-arcade-cabinets .h4:hover { border-color: var(--chart-4); color: var(--chart-4); }\n.dz-neon-arcade-cabinets .h5:hover { border-color: var(--chart-5); color: var(--chart-5); }\n.dz-neon-arcade-cabinets .sl { font-family: var(--pv-display); font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; margin: 0 0 14px; padding: 0 26px; }\n.dz-neon-arcade-cabinets .sh { margin-bottom: 30px; }\n.dz-neon-arcade-cabinets .shelf { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 26px 12px; }\n.dz-neon-arcade-cabinets .shelf article { flex: 0 0 210px; scroll-snap-align: start; border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--chart-1); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); background: var(--card); overflow: hidden; cursor: pointer; }\n.dz-neon-arcade-cabinets .c2 { box-shadow: 5px 5px 0 var(--chart-2); } .dz-neon-arcade-cabinets .c3 { box-shadow: 5px 5px 0 var(--chart-3); }\n.dz-neon-arcade-cabinets .c4 { box-shadow: 5px 5px 0 var(--chart-4); } .dz-neon-arcade-cabinets .c5 { box-shadow: 5px 5px 0 var(--chart-5); }\n.dz-neon-arcade-cabinets .shelf article:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--primary); }\n.dz-neon-arcade-cabinets .shelf figure { margin: 0; }\n.dz-neon-arcade-cabinets .shelf img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-neon-arcade-cabinets .shelf b { display: block; font-family: var(--pv-display); font-size: 18px; font-weight: 700; text-transform: uppercase; padding: 12px 14px 2px; }\n.dz-neon-arcade-cabinets .shelf .m { display: block; padding: 0 14px 14px; }\n@media (prefers-reduced-motion: reduce) { .dz-neon-arcade-cabinets *, .dz-neon-arcade-cabinets *::before, .dz-neon-arcade-cabinets *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/neon-arcade.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}