Film strip

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-film-strip class="tui-film-strip" label="Lode 4.2, the release frame by frame">
  <div class="tui-film-strip__viewer">
    <div class="tui-film-strip__reel" tabindex="0" role="group" aria-label="Frames">
      <div class="tui-film-strip__film">
        <figure class="tui-film-strip__frame" data-name="Cut">
          <img src="/release/cut.jpg" alt="The release branch, cut from main">
        </figure>
        <figure class="tui-film-strip__frame" data-name="Build">
          <div class="tui-film-strip__card">…</div>      <!-- or a card of words -->
        </figure>
        <!-- three to twenty frames -->
      </div>
    </div>
  </div>
</tui-film-strip>

import { filmStripHTML } from '/kit/kit.mjs';   // also defines <tui-film-strip>

// The markup above, written for you: names become "4 of 12: Canary".
box.innerHTML = filmStripHTML({ label: 'Site survey', frames: photos.map((p) => ({ name: p.title, html: `<img src="${p.src}" alt="${p.alt}">` })) });

const strip = document.querySelector('tui-film-strip');
strip.addEventListener('tui-frame', (e) => {
  e.detail.frame;   // 4
  e.detail.name;    // 'Canary'
});
strip.go(6);        // bring the seventh frame into the gate

Needs kit.css and kit.mjs. How to install the kit.

• It is a region with aria-roledescription="carousel", named by its label, and each frame is a group named “4 of 12: Canary”, so a screen reader hears where it is and what the frame is before anything on it.
• When a frame comes to rest, the same words go to a polite live region. While the thumbwheel has focus they are left to the slider, which speaks its own value, so nothing is said twice.
• Underneath is a native scroller with a snap point at every frame. Without the script a swipe, a trackpad and the arrow keys still move it a frame at a time, and the film is a tab stop for that.
• The thumbwheel is a slider with aria-valuetext and the keys are real buttons named “Previous frame” and “Next frame”. At an end the key is aria-disabled, so focus is never dropped.
• The LCD counter is a second signal for the eye and is hidden from assistive technology.
• A frame beside the gate takes one click to come in before anything on it acts.
• With reduced motion the film goes straight to the frame, with no glide and no settle.

The reel is a scroller with scroll-snap-type: x mandatory and a snap point at the middle of every frame, with scroll-snap-stop: always so a flick moves one. The film inside it is as long as its frames, padded so the first and the last can reach the gate, and carries the sprocket holes as two repeating backgrounds, so they travel with it. Frames are sized in container units: 320px at most, and never so wide that less than 44px of each neighbour shows. The gate is a pseudo-element over the middle of the viewer whose shadow, spread a long way, is the smoked cover; a second one lights it from behind in screen. The thumbwheel is 36 ridges laid round a circle with CSS sin() and cos(): each one sits at its own angle less --turn, narrows as it turns away and is gone round the back, under a light that stays put. The script sets --turn from the scroll position, 36 degrees a frame, so the wheel turns with the film however the film is moved. The settle is a Web Animations nudge on the film, four pixels past and back, as a frame arrives.