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
SIGHTLINE — Never Cover the Moment
A player that gets out of the way when you watch, and helps you master what you see.
The picture is the point. Controls layered over footage can hide the detail you came to see or compete with captions. SIGHTLINE gives the image room, placing essential controls on a stable surface below it.
Watch keeps playback simple. Practice adds VTT chapters, five direct speeds (0.75×–2×), and a real A–B loop. Both modes share one media instance: your time, speed and captions stay with you. Live or unknown-duration media safely disables looping.
Dual Guide Rails is the design idea: the first rail follows playback; the second maps chapter boundaries and the practice range. Each mark has a job. Quiet surfaces, one customizable accent, clear typography and generous targets keep attention on the content. On small screens the chapter rail becomes a compact panel below the picture, with portrait-video support.
Built with React, TypeScript and Video.js v10.3.0, using the official CLI Scaffold and real v10 primitives. Source-owned and Apache 2.0: copy src/ into a React app, install the pinned Video.js packages plus cn@0.4.0, then compose SightlinePlayer, VideoSkin and Video. The README provides the complete example. CSS properties control accent, accent text and corner radius.
Verification includes real Chrome playback/fullscreen/captions, mode preservation, exact chapter seeking, actual loop repetition/reset, native playback rates, keyboard focus/Escape, 320/360/768/1280px layouts, forced colors and reduced motion. Touch used trusted Chrome emulation; physical handset, screen-reader, Safari and Firefox checks have not run. No WCAG certification is claimed. A public clean clone passed npm ci, typecheck, lint and build.
Try it: https://sightline-player.ng-van-hung90.chatgpt.site
Source and setup: https://github.com/ngvanhung90/sightline-videojs-v10
79-second actual-interface walkthrough: https://sightline-player.ng-van-hung90.chatgpt.site/sightline-demo.mp4
The Fold footage, audio and VTT are original procedural work, released under CC0. No accounts, backend, paid APIs or client data.
Never cover the moment, right priority. Nice concept.
Thanks, Denis! Really appreciate you checking it out!
"Never cover the moment" is a great rule, and pairing a player that gets out of the way with practice controls for mastering what you see is a really useful angle. Would love your thoughts on Slate if you get a chance 🎬
Thank you so much! I really appreciate your kind words and support. It means a lot to know that the idea resonates with others. Excited to keep improving it and bringing it to life!
It definitely resonates! Can't wait to see where you take SIGHTLINE next.
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 turned a DJ deck into a video player. Every control does a real player job: the jog wheel scrubs, the tempo fader sets playback speed, eight hot-cue pads jump between chapters and light the current one, and the waveform strip is the seek bar, built from the film's real audio peaks.
The deck sits below the video, never on it, and anyone finds play, volume and fullscreen in a second.
I built it on Video.js v10 in plain CSS and 4 KB of TypeScript, with no images or web fonts. It's keyboard-operable, respects reduced motion, contrast and forced colors, and re-brands through a few tokens.
The look is my own Baltic palette: deep green deck, cream labels and amber LED glow.
Try it: https://videojs-cdj-skin.vercel.app, also live on my site: https://modestasgrz.github.io
Film: Tears of Steel © Blender Foundation, CC BY 3.0, streamed from Mux (playback ID lNg95EGnssc00hkLLQSCG02an2R3Ss702005HBDpEXYPBZk).
Hot-cue pads for chapters and a real audio waveform, every control earns its place.
NOCTILUCA — an abyssal Video.js v10 skin that turns playback into an expedition. Original bioluminescent jellyfish artwork and a custom 8-second motion study set the scene; spectral cyan and violet controls emerge from a glassy, low-profile rail, then recede so the picture stays in focus. Built from Video.js v10 media components with responsive layout, accessible labels and focus states, keyboard shortcuts (Space, M, F, ←/→), reduced-motion support, seek, time, mute and fullscreen controls. The player is ready to explore at the links below.
Cutframe: one frame, different worlds
I started Cutframe with a simple idea: a video player should feel like part of the page it lives on.
A website already has its own visual language. Its typography, surfaces, links, and accents establish an atmosphere. I wanted those decisions to carry naturally into the player, reducing the work of designing and maintaining a separate player palette.
The page sets the tone. With page adaptation enabled, Cutframe reads the rendered styles of surrounding text, links, controls, and surfaces. It groups related colors, selects roles with contrast checks, and carries the page’s typography into its controls. Developers can start with the design they already have, with styling overrides available when they want more control.
The cut is the visual language. The frame, controls, menu highlights, and time lens share the same cut-corner geometry. Those shapes remain consistent as the colors and typography change. This gives Cutframe a recognizable identity across different environments.
The time lens turns seeking into exploration. When looking for a moment in a video, someone might remember a picture or a topic more clearly than a timestamp. The lens brings those cues together. Press and drag the timeline, and it unfolds upward from a narrow cut at the seek point, revealing a real video frame, chapter context when available, and precise source time.
Everything is organized around one central axis. The fine ruler moves beneath a fixed cursor. Near either end of the timeline, the panel stays inside the player while a short diagonal connection leads back to the actual seek point. On release, scrubbing ends immediately and the lens folds back into the timeline. A new drag can interrupt that return. Reduced-motion preferences remove the animation.
The demo makes adaptation visible. Journal, Studio, and Cinema have different layouts, typography, and content density. Switch between them during playback: the same video element stays in place, playback continues, and the controls take on the surrounding page’s appearance.
It is built to be reused. Cutframe uses Video.js v10 HTML components with authored CSS and JavaScript. Developers provide their own HLS or MP4 source and can add subtitles and chapters. The time lens can decode the playback source directly; a separate lightweight preview video is an optional optimization.
The page provides the visual language. Cutframe gives seeking its own character.
A player that borrows the page's own visual language is a smart idea.