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
Bloom Cinema — After Hours 🌸
I designed Bloom Cinema to bring the mood of a late-night screening to a video player. Midnight purple, lilac and pink accents, rounded controls, and a prominent play button create a playful identity while keeping the footage at the centre.
Built for Video.js v10 with AI-assisted coding, the skin combines expressive styling with familiar playback controls and a responsive layout. My goal was to make watching feel personal, inviting, and easy to navigate.
Midnight purple with lilac and pink, it really has that late-night screening mood.
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
Who wants to come to a picnic with an outdoor movie? I'll bring the video player 🧺🎬
Picnic Cinema is my new Video.js skin: a 3D garden cinema where the controls hang as tags from festoon bulbs. The lights glow when you pause and dim when the film starts.
Too comfy to reach the bulbs? Grab the remote on the picnic table.
You can still use the keyboard like a normal player: Space to play, arrows to seek and change the volume, F for fullscreen.
this is such a fun concept!
Press Proof — a Video.js v10 skin that prints its controls
Press Proof treats the player as a sheet on a proofing table. Most skins float translucent controls over the picture and hope the footage cooperates; this one prints them, in solid ink on an off-white paper strip, so they read the same over a night sky or a snowfield (ink on paper is about 16:1).
Every mark comes from the print shop and has a job. The timeline is a printer's colour bar with ruler ticks and a hatched buffer, the scrubber is a registration target, fullscreen is a pair of crop marks, volume is a ten-step densitometer scale, and the big play button is a registration target whose cyan and magenta plates sit slightly off register. The one piece of motion with a personality is misregistration: hover a control and its plates slip and snap back into register. With reduced motion on, nothing travels.
It stays usable for everyone: all controls in visual order on the keyboard with a single magenta-on-paper focus mark, menus that close with Escape and return focus, touch targets of 40 px or more, a full-bleed strip on phones, RTL support, and a clean fallback to system colours in Windows High Contrast. Icons were drawn for the skin; type is IBM Plex Mono. The demo page switches between bright footage (our Mux asset) and dark footage so legibility can be judged over both, and links to the skin workbench for sizes, ratios, languages and RTL.
Built with an AI coding assistant (Claude Code) from the Video.js CLI Scaffold starting point, under human art direction and review.
Footage: Big Buck Bunny (excerpt), © Blender Foundation, CC BY 3.0, hosted on Mux; NASA Cosmic Dawn trailer (Video.js demo asset). Typeface: IBM Plex Mono (OFL). Skin licensed under Apache-2.0. Design and build: Rui Codex, Belgium.
🎬 Four custom Video.js skins — built to work for everyone, everywhere.
🖇️ Papercut — a construction-paper collage look perfect for kids’ content and educational platforms, fully keyboard-navigable with clear focus outlines for classroom and library use.
🎨 Clay — a modelling-clay diorama style suited to children’s shows and playful brand sites, built to resize cleanly whether it’s embedded full-width or in a small widget.
📟 ASCII Glitch — a terminal/broadcast aesthetic that fits music stations, zines, and indie media sites, with reduced-motion support and high-contrast text for late-night, low-light viewing.
✏️ Sketch — a hand-drawn notebook style great for maker spaces, courses, and DIY tutorials, keeping full keyboard access and accessible labels so learners of any ability can follow along.
Built responsive, accessible, and true to their look at every size — from phones to desktops. 👉 See them all in action: https://skins-showcase.vercel.app/#/
