There wasn't much direction for this project besides taking advantage of the `.new` top level domain we had acquired. We wanted to make something that we could "dogfood" internally at Mux using our video API and something we could open source externally. We came up with a very simple problem statement that would help explain our why: "As developers, we wanted a fast, frictionless way to share screencasts, desktop recordings, meetup talks, etc. that did not include much overhead and where playback would JustWork™ for anyone with a link."
Building something fast, free, and open source.
Development: Dylan Jhaveri
Transitioning the viewer to "theater mode" while the video was preparing.
My design goal from the start was to keep this as lightweight as possible but we wanted it to be a pleasant experience. The most awkward point in the flow was transitioning the user from `upload` to `waiting for player ready`. We could figure out progress on the upload process but the API didn't tell us progress on the preparing stage. We did however have a cap on the video upload size so I ran some simple tests to get a sense of the time range most users would have to wait for. I then decided to do a full screen, fade-to-black for the background and use mix-blend-mode for the logos/text css so they would change with the background. The slow timing made it very subtle and it didn't feel jarring even if your video was a bit early or a bit late. The final state (when your video is ready) results in a dark "theater mode" background that gives a nice viewing experience.
Coming soon: a small logo update
From the start this was meant to have a very basic, "undesigned" feel. The logo was literally just an asterisk but it worked in a contemporary, modern way. With the product gaining more popularity we wanted something a little more ownable but still keep the minimal aesthetic. I came up with the four dots logo mark that, when static, resembled the play button triangle. The dots were also an easy element to make dynamic in fun ways like loading states.