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
MARGEM — Beyond the Frame
What if a video player could become a space for exploration rather than just a timeline?
MARGEM is an experimental Video.js v10 skin that reimagines video navigation through spatial interaction, editorial design, and motion.
At its center is an animated tesseract inspired by four-dimensional geometry, accompanied by a 3D chapter atlas and interactive notes.
The concept explores a balance between visual experimentation and practical usability, keeping the video itself at the center of the experience.
Created by Athos Figueiredo, a Brazilian creative director and digital experience designer with 21 years of experience across design, branding, and interactive media.
Built with AI-assisted development and a focus on original interaction design.
Live demo: https://figueira-margem.netlify.app/
#videojsskinschallenge #VideoJS #Mux #CreativeCoding #InteractionDesign #WebDesign
A 3D chapter atlas is a bold idea for navigation. Really interesting to see a skin treat the timeline as a space to explore while still keeping the video at the center.
Thank you, Nermin! MARGEM is still an evolving idea. The interesting challenge is making spatial chapter navigation easy to understand without losing a clear sense of position in the video. That balance between exploration and orientation is central to the concept.
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
✨ Push the boundaries of video player design.
🏆 Get a chance to have your skin featured by Video.js!
🥇 1st Place: $5,000
🥈 2nd Place: $3,000
🥉 3rd Place: $2,000
Your creativity. Your player. Your rules. 👀
Join now 👇
https://on.contra.com/tLM8rh
on.contra.com
#Video.js Skins Design Challenge on Contra
Join to submit!
Noise Reveal, a premium reveal component for Framer
I built a component that gives Framer sites cinematic reveals for images, video and live layouts. It has a soft, film-like edge with glow and grain, and can play on load, on view, from a variant or scrubbed by scroll.
It’s built for production: the reveal is prepared before it scrolls in, it’s accessible with reduced-motion support, it falls back when WebGL isn’t available, and pages stay plain HTML when nothing is moving.
Launched on the Framer Marketplace. Open to custom Framer and interaction work.
The WebGL fallback and reduced-motion support are the parts most reveal effects skip, so it's great to see them called out. Does the fallback keep some of the grain edge with CSS, or does it drop to a simple fade?
What if your portfolio told your design journey like a little game?
I built mine as a 3D world you explore instead of scroll. Temple doors open into my story, Da Vinci's flying machine carries you between floating islands, and every section is a place, not a page.
Honestly it's the most creative thing I've made lately, and it's still a work in progress. More of the journey is coming.
What I did: concept, art direction, 3D world design, interaction design and an AI-assisted build.
Fly through it at designedbysaf.site and tell me what you'd add next.
The flying machine is such a fun idea.