27:Tc9a8,
// From the gallery's corpus (Wikimedia Commons), on its CDN, each with its stills cut
// a second apart.
const CDN = "https://cdn.untitled.garden/media/ui/gallery"
const film = (id: string, label: string, duration: number, count: number) => ({
  id,
  label,
  src: `${CDN}/${id}.mp4`,
  duration,
  aspect: 16 / 9,
  stills: frameStills({ every: 1, count, src: `${CDN}/${id}.frame-{i}.jpg` }),
})
const FILMS = [
  film("461a38825c3d7b1172c6d6b2", "one small step", 56_112, 56),
  film("e141b3900933b1fd907b5d25", "Le Déjeuner des Minet (1906)", 20_003, 20),
  film("62c7eb4b4d80d8f33d1b3b6e", "a howling husky", 20_000, 20),
  film("f762b3b2b89d96748661931f", "a golden sunset in January", 20_020, 20),
  film("d5c514cac050efb84897d396", "snow falling by a fence", 20_020, 20),
  film("27c88db7b1cd2ca74c71156a", "waves at Isola Rossa", 20_000, 20),
]
type Film = (typeof FILMS)[number]

/** One film on a card: its tiles, and its verdict, whose keys answer while the hand
 *  is on the card. */
function Card({
  film,
  value,
  onValueChange,
  active = false,
  onEnter,
  size = "sm",
}: {
  film: Film
  value: VerdictValue
  onValueChange: (next: VerdictValue, act: VerdictAct) => void
  active?: boolean
  onEnter?: () => void
  size?: "sm" | "md"
}) {
  const card = React.useRef<HTMLDivElement>(null)
  const stills = useStills([film.stills])
  return (
    <div
      ref={card}
      onPointerEnter={onEnter}
      data-active={active || undefined}
      className={cn(
        "flex flex-col gap-2 rounded-2xl border border-border p-3 transition-[opacity,border-color] duration-200",
        active ? "border-foreground/40" : "opacity-80",
        value.hidden && "opacity-40",
      )}
    >
      <div className="flex min-w-0 items-center justify-between gap-2">
        <span className="truncate font-medium text-[13px]">{film.label}</span>
        <Verdict
          label={film.label}
          value={value}
          onValueChange={onValueChange}
          within={card}
          size={size}
        />
      </div>
      <FilmMosaic
        tile={96}
        label={film.label}
        duration={film.duration}
        aspect={film.aspect}
        src={film.src}
        stills={stills}
      />
    </div>
  )
}

/** A pass over a list: the card under the hand (or chosen with ↑ ↓) is the one the
 *  bar judges, each verdict kept by the page; a judgement moves on to the next. */
function Triage({ float = "sticky" }: { float?: "sticky" | "fixed" }) {
  const [verdicts, setVerdicts] = React.useState<Record<string, VerdictValue>>(
    {},
  )
  const [active, setActive] = React.useState(0)
  const [log, setLog] = React.useState<string[]>([])
  const cards = React.useRef(new Map<number, HTMLElement>())
  const go = (i: number) => {
    const next = Math.min(FILMS.length - 1, Math.max(0, i))
    setActive(next)
    cards.current
      .get(next)
      ?.scrollIntoView({ block: "nearest", behavior: "smooth" })
  }
  const judge = (f: Film, next: VerdictValue, act: VerdictAct) => {
    setVerdicts((all) => ({ ...all, [f.id]: next }))
    setLog((all) => [`${act} · ${f.label}`, ...all].slice(0, 4))
    // An opinion is a step in the pass: on to the next.
    if (act === "like" || act === "dislike") go(FILMS.indexOf(f) + 1)
  }
  const current = FILMS[active] as Film
  return (
    <div className="flex flex-col gap-3">
      {FILMS.map((f, i) => (
        <div
          key={f.id}
          ref={(node) => {
            if (node) cards.current.set(i, node)
            else cards.current.delete(i)
          }}
        >
          <Card
            film={f}
            value={verdicts[f.id] ?? NO_VERDICT}
            onValueChange={(next, act) => judge(f, next, act)}
            active={i === active}
            onEnter={() => setActive(i)}
          />
        </div>
      ))}
      <p className="m-0 font-mono text-[11px] text-foreground/60">
        {log.length
          ? log.join("  ·  ")
          : "K like · U neutral · X dislike · W hide · S star · ↑ ↓ move"}
      </p>
      <VerdictBar
        float={float}
        label={current.label}
        value={verdicts[current.id] ?? NO_VERDICT}
        onValueChange={(next, act) => judge(current, next, act)}
        onPrevious={active > 0 ? () => go(active - 1) : undefined}
        onNext={active < FILMS.length - 1 ? () => go(active + 1) : undefined}
      />
    </div>
  )
}

<MaterialProvider material="glass" scheme="dark">
  <div className="rounded-2xl bg-[url(/lightbox/shore.jpg)] bg-cover bg-center p-4 text-white sm:p-8">
    <Triage />
  </div>
</MaterialProvider>
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]