Design system

Video players

The ways a project page can play its episodes. Each project chooses one with its “Episode player” setting; Automatic uses the Screening room for 12 or more videos and the Reel for fewer. These are the episodes of Crayola.

Nothing loads from YouTube except the pictures until you press play, and the videos then play from YouTube’s privacy-enhanced address. Click an ID to copy it for feedback.

Screening room

A big screen with the episode list beside it, like a streaming service. Pick an episode and it plays straight away; it can carry on to the next one by itself.

  • Computer: the list sits beside the screen at the same height and scrolls on its own, so the page never gets longer.
  • Phone: the screen runs edge to edge and stays pinned under the header while you scroll the list, like the YouTube app.

Season 1 · Episode 1 of 16

Mermaid Rock Band Concert?!

Reel

Episodes as large frames in a row you slide through, with a ruler of every episode underneath, one mark per episode, grouped by season. Drag along the ruler to flick through the whole series.

  • Computer: the frame in the middle is lit, its neighbours wait at the sides; arrows or the arrow keys move along.
  • Phone: swipe the frames with your thumb, or drag the ruler to jump a whole season in one move.

Season 1 · Episode 1 of 16

01 / 31

Season 1

Season 2

Shelves and cinema

Each season is one shelf of thumbnails. Choosing one dims the page and opens a cinema view: the film large, with what plays next underneath. Closing it puts you back where you were.

  • Computer: two shelves take the room of one, whatever the number of episodes; arrows slide each shelf.
  • Phone: the cinema view fills the screen; swipe the title left or right for the next or previous episode.

Crayola ·

Single

A project with only one video gets this screen on its own, whichever player is chosen.

Mermaid Rock Band Concert?!

· 0:00