The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
FOLD — The Living Cinema Interface
What if a video player could be more than just a play button and a progress bar?
FOLD is a reimagining of the Video.js v10 experience, blending cinematic design, nostalgic media-player aesthetics, and thoughtful interaction.
We built three distinct player skins:
🎬 Cinema — An editorial-inspired interface with an unfolding control deck, precision timeline, multilingual captions, and creative tools for capturing frames and selecting clips.
💿 Retro XP — A nostalgic tribute to classic Windows media players, featuring recognizable desktop-inspired controls and tactile interactions.
✨ Minimal — A distraction-free viewing experience with elegant, unobtrusive playback controls.
We also created FOLD Retro Music, a separate music experience featuring local audio playback, playlists, and three real-time audio-reactive visualizations.
Our goal was to prove that a video player can have personality without sacrificing accessibility, usability, or performance.
Built with Video.js v10, React, TypeScript, CSS, and the Web Audio API. Open-source under Apache 2.0.
Building three distinct skins in one submission is ambitious, and the Cinema skin's unfolding control deck is the detail that makes the name FOLD land — the player literally opens up for you. The Retro XP tribute to classic Windows media players is a smart second act too, since...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
NOCTILUCA — an abyssal Video.js v10 skin that turns playback into an expedition. Original bioluminescent jellyfish artwork and a custom 8-second motion study set the scene; spectral cyan and violet controls emerge from a glassy, low-profile rail, then recede so the picture stays in focus. Built from Video.js v10 media components with responsive layout, accessible labels and focus states, keyboard shortcuts (Space, M, F, ←/→), reduced-motion support, seek, time, mute and fullscreen controls. The player is ready to explore at the links below.
Screening Room is an editorial-style skin for Video.js v10, designed for film reels and creative portfolios.
Cream surfaces, burgundy accents and serif typography give the player the feel of an independent cinema programme. The controls sit beneath the footage on a solid background, keeping them readable throughout the video.
The interface includes playback, seeking, time, volume, mute and fullscreen controls, with a chapter selector for navigating longer videos.
Cutframe: one frame, different worlds
I started Cutframe with a simple idea: a video player should feel like part of the page it lives on.
A website already has its own visual language. Its typography, surfaces, links, and accents establish an atmosphere. I wanted those decisions to carry naturally into the player, reducing the work of designing and maintaining a separate player palette.
The page sets the tone. With page adaptation enabled, Cutframe reads the rendered styles of surrounding text, links, controls, and surfaces. It groups related colors, selects roles with contrast checks, and carries the page’s typography into its controls. Developers can start with the design they already have, with styling overrides available when they want more control.
The cut is the visual language. The frame, controls, menu highlights, and time lens share the same cut-corner geometry. Those shapes remain consistent as the colors and typography change. This gives Cutframe a recognizable identity across different environments.
The time lens turns seeking into exploration. When looking for a moment in a video, someone might remember a picture or a topic more clearly than a timestamp. The lens brings those cues together. Press and drag the timeline, and it unfolds upward from a narrow cut at the seek point, revealing a real video frame, chapter context when available, and precise source time.
Everything is organized around one central axis. The fine ruler moves beneath a fixed cursor. Near either end of the timeline, the panel stays inside the player while a short diagonal connection leads back to the actual seek point. On release, scrubbing ends immediately and the lens folds back into the timeline. A new drag can interrupt that return. Reduced-motion preferences remove the animation.
The demo makes adaptation visible. Journal, Studio, and Cinema have different layouts, typography, and content density. Switch between them during playback: the same video element stays in place, playback continues, and the controls take on the surrounding page’s appearance.
It is built to be reused. Cutframe uses Video.js v10 HTML components with authored CSS and JavaScript. Developers provide their own HLS or MP4 source and can add subtitles and chapters. The time lens can decode the playback source directly; a separate lightweight preview video is an optional optimization.
The page provides the visual language. Cutframe gives seeking its own character.
A player that borrows the page's own visual language is a smart idea.