When working on essential animations like carousels, there's always an inner drive to take things to the next level. This time, it's a carousel animation for Juice Agency and their project with Metlok.

Which one do you think looks best?

Love that drive to push even the essential animations. Spicy gets my vote, it has a lot more character.

🛰️ 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

an orbit-aware skin for iss footage is such a unique idea, window seat is beautiful 🌍