PlayMusic · Design exploration — real assets

The card directions, wired to the live staging feed

Same two motion-first directions (E immersive · F portrait 2-up) plus the recommended D icon grid — now rendering real games from /api/games/slim: real thumbnails, real titles, real game-genre chips, and the actual preview .webm clips autoplaying (gated to the tiles in view via IntersectionObserver — the exact production technique). Poster shows instantly; the clip fades in.

E · Immersive “For You” feed

Real clip autoplays

One game fills the screen, its real preview clip playing; swipe up for the next (peeking below).

  • Real motion. The staging .webm autoplays muted in view — the poster (real thumbnail) covers the load.
  • Tap = play, swipe up = next. Ticks up top show the set is finite; the next game peeks from the bottom.
  • Nothing to read — title baked over the art + two chips. Purest “users don't read.” Best as a Discover tab.
  • Lowest density (one per screen) and leans hardest on the clip existing — pair with D for grid tabs.

F · Portrait 2-up autoplay

Real clips autoplay

Two tall 9:16 tiles per row, each playing its real clip — immersive but still browsable (4–6 per screen).

New Games
  • Motion + density. Real posters and clips, several games visible; 9:16 matches how the previews are captured.
  • Whole tile taps through; no play button competing with the clip.
  • Same content contract as D — one feed payload drives both layouts.
  • Most simultaneous videos on screen → the IntersectionObserver gate matters most here.

D · Icon grid

Recommended · real thumbnails

The CrazyGames pattern: one video hero + a dense 3-up grid of real thumbnails. 9 games before a scroll.

Top games today
  • Real square thumbnails — the pipeline art already crops well to a tile; the title reads as part of it.
  • One video hero (top game) is the single place motion + a Play button earn the space; the grid stays calm.
  • 3-up = 9 tiles vs ~2 on today's landscape card — densest art-forward option.
  • Square crop wants art composed for it; today's thumbnails are landscape-ish but hold up.

What's real here — and the one gap

Real: titles, thumbnails, autoplaying preview clips, game-genre chips and play counts, all live from api-staging.playmusic.gg/api/games/slim. Autoplay is gated with an IntersectionObserver and honors prefers-reduced-motion, so this mock behaves like production would.

The gap (as the first mock predicted): the feed has no song_genre field, so the second chip currently shows the song artist (real) as a stand-in. To ship the intended “game genre + ♪ song genre” pair, song genre needs surfacing on the slim/by-ids payload from the song record — a small backend add.