🛰️ WINDOW SEAT

Live: https://window-seat-red.vercel.app Mux playback ID: enqF7Kn02rTtKprBBbkfh2Mp8zf6cV2sUxuqRE01JAhXo Source (Apache 2.0): https://github.com/lexipej/window-seat-skin

Seat: window Altitude: about 420 km View: six real passes of the International Space Station Accent colour: set by the sun Without orbit data: still a complete player

Most skins that react to a video sample its pixels. I wanted this one to know something the picture can't tell it: where the camera is. So Window Seat is a Video.js v10 skin that follows the station's orbit, second by second.

🎨 What the skin does ① The accent follows the sun below the station: gold by day, coral at dusk, green at night. It's computed from the orbit, never sampled from the picture. ② The seek bar is the pass. Played time takes the accent; ahead, blue is ground in daylight and violet is night. Each gap is a new place. ③ Overflight (P) lists the places below as a route, with times. Choose one and the player jumps there. ④ In fullscreen, G opens a live globe porthole that tracks the station, in three sizes. It steps aside when the controls hide. ⑤ Solid two-tone icons, drawn for this skin, change shape with state, and every settings row answers the pointer. ⑥ Every state is designed: loading, buffering, captions, mute-only, ended, error, and videos with no title, chapters or orbit data.

♿ Readable over any footage Text contrast never drops below 8.66:1 across 280 sampled frames, axe-core finds 0 violations, touch targets are 44 px, and every control works by keyboard with Escape out of every menu. Reduced motion, more contrast and forced colours are all honoured.

🧩 Make it yours One attribute swaps the station for a plane, ship, car, helicopter or train, for any journey footage. Accent, radius, font and fit are Video.js's public CSS properties, and the site's live customiser writes the snippet for you.

🛠️ How it was made ① Scaffolded with npx @videojs/cli skin create and built on Video.js v10's HTML components. ② Each NASA time-lapse frame is a photo with a timestamp and the station's position. Sampling about one per second gives every pass its ground track. ③ Places come from reverse-geocoding that track against Natural Earth. They become the chapters, captions and the Overflight list. ④ The sun's height at each point drives the accent, the seek bar and the sky behind the page. The globe is three.js with NASA's Blue and Black Marble. ⑤ The video streams from Mux, and the site runs the skin live.

Footage: Earth Science and Remote Sensing Unit, NASA Johnson Space Center. Music in the video: sigmaeffect, Pixabay. 📱 X: https://x.com/lexipej/status/2121135029447450787