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
OBSIDIAN: RAGNARÖK — An Interactive Cinematic Experience
OBSIDIAN: RAGNARÖK explores the intersection of cinematic storytelling and interactive video player design.
Built around an original fantasy battle, the experience combines stylized animation, emerald energy effects, interactive chapters, and an immersive interface powered by Video.js v10.
The goal is to transform the traditional video player into an expressive storytelling environment, where visual design and playback controls become part of the experience.
Design philosophy: Don't just watch the story. Experience it.
turning the player into a fantasy story world is such a bold move, obsidian: ragnarök feels like a game menu and a film at once ⚔️
An original fantasy battle as the content, big effort. Emerald energy looks great.
Your philosophy — 'Don't just watch the story. Experience it.' — is what makes this more than a theme: the visual design and the playback controls become part of the experience itself, instead of sitting on top of it. And building it around an original fantasy battle, with...
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
WILDER — Nature in Motion
WILDER is an immersive, nature-inspired video player skin built for Video.js v10.
I wanted to move beyond the traditional video player experience and create something that feels like entering a living forest. Inspired by wildlife, birds, trees, waterfalls and natural landscapes, WILDER transforms the viewing interface into an interactive nature environment.
The design combines a richly illustrated forest world, custom nature-inspired controls, immersive visuals and smooth interactions while maintaining the essential functionality of a modern video player.
My focus was to bring together creativity, usability and accessibility in a unique viewing experience.
Built with: Video.js v10, HTML, CSS, JavaScript and custom interactive UI elements.
The search bar for nature documentaries is a smart touch — it makes the player feel like a doorway into a whole library, not just a box for one video. And framing the picture with the illustrated forest keeps the nature theme in the viewer's eye the whole time. If you have a...
Here’s my Video.js skin submission! I imagined what it would be like watching a video in a spacecraft from the future and left behind the conventional layout of the controls. What do we think?
Well done.
Plate is an HTML skin for Video.js 10. It draws the player the way quickflow.dev draws everything else: a numbered head with a status word, the picture framed by corner marks, a chapter index beside it, a ruler for a timeline and text keys underneath. A player is a diagram of a video's time, so I drew it like one.
What it does
Every chapter cue gets a button in the index, with its own frame from Mux's storyboard. Video.js has no chapter navigation control yet, so a small custom element reads the cues from the player store. Below 760px the index turns into a strip that scrolls with the video.
The time slider is a ruler, with a numbered mark where each chapter starts.
The keys are words you can read. Speed, Quality, Captions and Audio open Video.js menus. Space, K, M, the arrows, J and L, 0 to 9, < and >, F, C and I all work from the keyboard, and every control shows a focus ring.
In fullscreen the picture goes edge to edge, the controls fade while it plays, and an Index key opens the chapters as a side panel.
It comes in three themes (Night, Blueprint, Signal), takes your colours, fonts and corners through public custom properties, and speaks seven languages: English, German, French, Spanish, Romanian, Russian and Arabic, right to left included. It follows reduced motion, higher contrast, reduced transparency and forced colors.
The workbench at plate.quickflow.dev lets you try it on your own video, change every property, watch contrast and control names in a live accessibility readout, and download the CSS for your theme.
Plate plays the showreel on quickflow.dev. The code is open source under Apache 2.0.
does the chapter index stay visible in fullscreen or does it tuck away?