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
Director's Monitor is my entry for the Video.js Skins Design Challenge: a Video.js v10 skin that turns the player into the on-set field monitor a director judges a take on.
The picture always wins. Controls sit on small opaque OSD plates instead of full-width gradients, so the frame stays clean and every label stays readable over overexposed whites, night blacks and colour bars. The details come straight from the camera: a REC / STBY / END tally, SMPTE timecode that counts every frame, crop marks, 2.39:1 frame guides on the G key, an edit-ruler timeline with chapters, a segmented audio meter for volume, and a NO SIGNAL error state over bars.
One colour rule keeps it calm: amber means on, and red is reserved for REC and mute. Every control works from the keyboard with a visible focus ring, touch targets grow to 44 px on phones, and motion stops under reduced motion.
The demo film, "Take 1", was made for the skin and is hosted on Mux. It alternates bright and dark scenes to prove the OSD holds up, with captions, chapters and a 24 fps cut the timecode counts frame for frame.
Live: https://directors-monitor.vercel.app
Mux playback ID: 01W93wbTkYDNrO4bcZz01e3kl00FB01okOmc4p02NosFfpmg
Design and build: Jander Hoffmann · Method: AION Creative Studio OS
Really like the monitor concept.
Thanks Vansita!
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
I built this to see if I could make a point-cloud museum that moves with your mouse and still stays smooth at 60 FPS without any framework. No libraries. No build steps. Just Canvas2D and a bunch of tiny floating lights.
WHAT I WAS TESTING:
I was testing how well I could keep point-cloud rendering alive under constant user motion while keeping the frame rate locked at 60. The system had to handle hundreds of thousands of points updating every frame, and I had to make sure the browser didn’t stutter from garbage collection or event throttling.
THE TECHNICAL SIDE:
Everything runs in the browser with Canvas2D. No WebGL. No Three.js. No external dependencies. I wrote custom shaders with GLSL to color and animate the point clouds. I hand-tuned the event loop to avoid frame drops during mouse moves, and used requestAnimationFrame with manual frame pacing to stay at 60. Memory is allocated per object and recycled on demand. No global state leaks. No third-party tracking.
WHAT I LEARNED:
The key was not making the math too tight or too loose. Too tight and the browser would freeze. Too loose and the frame rate would drop. I learned to profile frame times, adjust point update rates based on user velocity, and use a simple debounced event handler to keep mouse movement from overwhelming the system. It runs at 60 on an old laptop, and feels buttery on a mid-tier machine.
TRY IT YOURSELF:
Open it in your browser, it's hosted live on my JSFiddle. Move the mouse around. Watch how the clouds react. No lag. No freeze. No framework.😊
Professional, nice work👍
Day 1 of my 100 days of components 🧩
I saw a post in the Framer community about “100 days, 100 components” and I couldn’t stop thinking about it. So I’m doing it too: one custom Framer component at a time, for 100 days or until I land my next client, whichever comes first.
Day 1: Scroll Frame. A border around the viewport made of four marquee strips that move with your scroll and circulate around the edges. Each strip is a sequence of cells you can edit: wide, condensed and script text, pills, icons, your own logos, and inverted solid blocks.
I’m open for Framer, UX/UI and Shopify projects. See my work at jessicamena.com and let’s talk.
100 days of custom Framer components is a great challenge, and the scroll frame is a strong start. Looking forward to following the series.
Good evening, I'm new here.
Just want to share the new video I made with Motion Graphics for my new portfolio. I built custom Next JS apps with deep integrations, and I focus on efficient infrastructure builds.
Some of my specialty are AI agent platforms for companies and High end Motion Graphics.
Looks great 👏