Snackwave — A little film, served warm

I designed Snackwave, a custom skin for Video.js v10, around a familiar ritual: picking something to eat before sitting down to watch a film. I wanted to bring that small moment into the player interface, using the warmth of a kitchen to make choosing a film feel inviting.

The snack is the film selection. Three food characters sit on a shelf, each paired with a film. Their labels borrow from small café menus: a serif food name, a quieter film title, and a softly colored card. The characters share simple faces, but their silhouettes and softness differ. The pudding wobbles, the onigiri holds its weight, and the mochi compresses and recovers more slowly.

The appliance is the interface. A retro microwave gives familiar playback actions a physical setting. START plays and pauses. OPEN pauses the film and opens the door. EJECT returns the food to the shelf. A cat’s paw connects these actions, carrying the selected snack into the microwave and pressing its controls. The film then plays behind the glass.

Motion makes the state changes visible. The paw approaches, makes contact, lifts, and releases. When opening the door during a film, the image fades to black, the projection clears, and the interior light comes on before the door moves. Closing the door leaves the film paused until the viewer chooses to continue. These transitions give the appliance a sense of weight while explaining what the player is doing.

The small monitor holds the finer controls. It displays the film title or selected subtitles, then reveals a timeline when hovered or focused. Its live preview shares the same video element as the glass display. During dragging, it switches to Mux storyboard images near the target time. Chapter marks, playback feedback, and settings use the same warm monochrome display language.

The kitchen adapts to the available space. Wide screens show the shelves and appliance together. Small screens focus on the microwave and provide a separate film picker and larger controls below. Keyboard navigation, visible focus, fullscreen, and reduced-motion behavior are part of the interface.

The skin is built with React and React Three Fiber, with Video.js v10 handling playback. The microwave, shelves, paw, and food characters are generated in code, with a separate image texture for the tiled wall. Mux provides the video streams and storyboard previews. The design brings these pieces together around one intention: to make a short film feel like a small break worth settling in for.

Live site:https://snackwave.vercel.app

GitHub: https://github.com/FrancoCotter/snackwave

Mux playback IDs

Coffee Run and Spring are hosted in my Mux account and played through Snackwave. Their public playback IDs are:

Coffee Run: TVtcKzcopYHiLi2XMZCyAbhpwDxLGomO5br3XQ27NbY

Spring: PAoKCshYXpWtHgzGzDf002gnPlVKV3BgEhhuLYLVy01b8

I liked the quiet absurdity of watching a film in a microwave. Its familiar buttons, timer, and glass window gave me a playful starting point for a Video.js v10 skin.