This page is plain HTML with one script tag. The video below is a
<vid-scroll> element, and each caption is a
<vid-scroll-section> inside it. It's experimental for now.
<script type="module">import "vidscroll/element";</script>
<vid-scroll src="/commute.mp4" length="500vh" easing="inOutSine">
<vid-scroll-section from-time="0" to-time="4">
<p>Doors close.</p>
</vid-scroll-section>
</vid-scroll>Doors close. Another morning.
The carriage rocks itself to sleep.
Somewhere, a window opens.
Water, all the way to the edge.
The train lets go of the rails.
And sails on.
film.scrollToTime(seconds) scrolls the page to a moment in the video.
Captions get data-active and a --progress variable, the bar uses
--video-progress, and the active chapter comes from
vidscroll-enter events. The element keeps your content as ordinary children,
so page CSS styles it as usual.
Train animation: “30 second animation assignment” by roenais.