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
I decided to join the Video.js reskin challenge and have some fun with it!
Scry turns the video itself into a crystal-seeing stone from a fantasy world, as if you are peering into a vision through the video you are watching.
You can drag the timeline or the orb, and it will flow smoothly between frames, with the help of some optical flow and WebGL2 shaders, instead of jumping abruptly.
I hope you have fun with it too!
A crystal seeing stone with optical flow between frames instead of jumping, that's a lovely touch.
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
Turn Four: Every Frame on the Racing Line
Turn Four turns the replay timeline into a circuit. Drag around the oval to seek, choose one of four sectors, loop a detail, slow it down, or mark a moment to revisit. Warm paper, graphite control surfaces, condensed typography, and signal orange give the interface its motorsports character. Video.js 10 handles the player, with keyboard controls, visible focus, descriptive captions, responsive layouts, and reduced-motion styling. The fictional automotive concept film moves through dusk, daylight, night, and an overhead composition so the controls can be judged against changing images.
racing line replays are weirdly satisfying to watch. is this running on real telemetry?
Honey Jar — a Video.js player where time flows like honey
My studio is called Dark Honey, so I built the whole player as the one object I know best: a jar of honey. A brass lid is the top bar, the picture sits behind glass, and dark honey pools at the bottom. Progress is thick amber honey flowing through that pool. Its front edge forms a meniscus and drips slowly while the video plays, and the drips stop the moment you pause. You seek with a wooden honey dipper. Hover the timeline and the frame appears in a hexagon. Volume is the honey level in a small hexagonal jar. I kept it fast (the gooey filter covers a 70 px area) and usable: 44 px targets, full keyboard control, clear focus, and static honey when reduced motion is on.
Running live on my studio site, darkhoneyartdirected.lovable.app. Built on Video.js v10 with HTML custom elements and CSS.
Luminary — Multi-Style Video.js Skin
(**Please respect the original work and do not copy this multi-theme skin concept.**)
An elegant, constraint-free UI built to elevate any production.
**13 expertly crafted styles to suit your taste
**Fully responsive across all screen sizes
**Ready to use right out of the box
**When designing the core frame, my goal was to create a versatile, eye-catching player that fits any project seamlessly. Across all 13 variations, I focused on blending popular, in-demand aesthetics with timeless themes so every creator can find their ideal match.**
Let me know which style is your favorite in the comments. Thank you!
13 styles in one skin, impressive range. Nice work.