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
My idea was simple: keep the feeling of a cassette, lose everything that made it slow.
Clear Tape is a Video.js v10 skin inspired by the clear-shell cassettes of the 90s. I wanted nostalgia without the costume, so every cassette detail had to earn its place by doing a real job:
• The seek bar is the tape path between two reels. As you watch, the left reel thins and the right one fills, so you read progress before you read the time. The reels turn while the video plays and spin faster when you scrub.
• Transport keys travel down when pressed, and Play stays down while the tape runs, like a real deck.
• Time lives in a monospaced tape counter. The title is a paper label with a Side A tab.
• Volume is a mixer fader, and settings open like a J-card above the deck, so they never cover the tape.
The deck is smoked glass, so the video stays the hero. It is minimal on purpose: one accent color, one typeface, nothing decorative that does not also function.
The demo film tells the same story. It opens on a cassette clicking into a player, then follows one listener as the device in their hands changes with every beat, from the 1980s to tomorrow, until only the music is left. It moves from dark, warm rooms to bright, bare ones, so you can see the controls stay readable over both.
Built to be used:
• Works with mouse, touch and keyboard, with a clear focus ring on every control
• Sheds secondary keys on small players instead of shrinking them
• Reels stop with reduced motion; the glass turns solid with high contrast or reduced transparency
• Accent color, font and corner radius follow the standard Video.js CSS variables, so it re-themes in one line
Made with Video.js v10, HTML and plain CSS, starting from the Scaffold skin. Video hosted on Mux. The demo film was generated with AI.
Live demo: https://clear-tape.vercel.app/preview.html
Mux playback ID: 6Xx8O7aJDIyKnYt8JWXV9raHdl62VzR02k8Y15D5p37s
Nostalgia without the costume, great principle. Every cassette detail doing a real job is the way.
The seek bar as the tape path between two reels is the detail that sells it — the left reel thinning as the right one fills means you read your progress before you read the time, and the reels spinning faster when you scrub makes seeking feel physical. The smoked-glass deck...
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
Tapedeck TD-90 is a cassette deck that plays video. The seek bar is the tape: it runs through a smoked window between two reels, and as the film plays the tape winds from one reel to the other.
The reels aren’t decoration. Grab one and turn it to scrub, clockwise to wind forward. They spin twice as fast at 2× and slow down at 0.5×. Ticks along the tape mark every tenth, matching the 0–9 keys.
The deck works like real hardware. Play, captions and fullscreen are piano keys that latch down when on, with an LED. Time reads off counter drums. CUE drops a marker on the tape; press it again to wind back to it. Each chapter shows up as a track on the cassette label. Volume is a VU meter, settings is a ruled spec sheet, and tooltips are embossed label-maker tape.
Every control sits on a solid surface, so it stays readable over bright or dark footage. Keys are 44px on touch, focus is always visible, and with reduced motion the reels stop and nothing slides. It comes as a cream deck or a black deck, and you can recolour the tape live.
Try it: tapedeck-ruddy.vercel.app
In the wild: it’s the player for the project film on my portfolio, robiulhasan.dev
Film: “Boing Studio, a walkthrough”, a screen recording of a site I designed and built, streamed from Mux.
Using the tape as the timeline is so good.
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?
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?