27:T9d01,
// A floating glass display around two kinds of media: a photograph, and a live
// component (a terminal session) that plays while its display is looked at and
// rests at its last frame otherwise. Each has a caption on the scrim and a cover,
// the button that makes the whole display one target.
const SESSION = `$ trash thesis-draft.txt
trashed: ~/Desktop/thesis-draft.txt

@700 $ trash list
thesis-draft.txt  2026-08-20 14:27  ~/Desktop/thesis-draft.txt

@700 $ trash restore thesis-draft.txt
restored: ~/Desktop/thesis-draft.txt`

const CLIP = sessionTimeline(parseSession(SESSION)).clip

function Caption({ name, note }: { name: string; note: string }) {
  return (
    <div className="p-5 text-white">
      <p className="text-lg font-semibold tracking-tight">{name}</p>
      <p className="text-sm opacity-75">{note}</p>
    </div>
  )
}

function Displays() {
  const [opened, setOpened] = React.useState<string | null>(null)
  const cover = (name: string) => (
    <button
      type="button"
      aria-label={`open ${name}`}
      onClick={() => setOpened(name)}
      className="absolute inset-0 z-10 rounded-[inherit] focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white"
    />
  )
  return (
    <div className="space-y-3">
      <div className="grid gap-6 sm:grid-cols-2">
        <GlassDisplay
          className="aspect-video"
          cover={cover("valley")}
          caption={
            <Caption name="No hurry" note="A photograph, edge to edge." />
          }
        >
          {/* biome-ignore lint/performance/noImgElement: portable demo asset */}
          <img
            src="/glass-valley.jpg"
            alt="A green valley beneath distant mountains"
            className="size-full object-cover"
          />
        </GlassDisplay>
        <GlassDisplay
          className="aspect-video"
          cover={cover("terminal")}
          caption={
            <Caption name="trash" note="Point at it: the session plays." />
          }
        >
          <DisplayPlayback
            clip={CLIP}
            rest={CLIP.duration}
            className="size-full bg-zinc-950 p-4"
          >
            <Terminal session={SESSION} accent="#4ade80" alt="trash at work" />
          </DisplayPlayback>
        </GlassDisplay>
      </div>
      <p role="status" className="text-xs text-muted-foreground">
        {opened ? `opened: ${opened}` : "point at a display, or press one"}
      </p>
    </div>
  )
}

function Frame() {
  // The frame alone: the same edge, and nothing moves under the pointer (media looked
  // at in place, a video with its own controls). Its two knobs live: how bright its
  // line is, and how far its curved edge bends the picture under it.
  const [rim, setRim] = React.useState(1)
  const [bend, setBend] = React.useState(0.6)
  return (
    <div className="space-y-6">
      <div className="grid gap-x-6 gap-y-4 sm:grid-cols-2">
        <Field label="rim" aside={`${rim.toFixed(2)}×`}>
          <Slider
            label="rim"
            value={rim}
            onValueChange={setRim}
            max={3}
            step={0.05}
            format={(v) => `${v.toFixed(2)}×`}
          />
        </Field>
        <Field label="bend" aside={`${bend.toFixed(2)}×`}>
          <Slider
            label="bend"
            value={bend}
            onValueChange={setBend}
            max={3}
            step={0.05}
            format={(v) => `${v.toFixed(2)}×`}
          />
        </Field>
      </div>
      <div className="grid gap-6 sm:grid-cols-2">
        {["/glass-valley.jpg", "/glass-river.jpg"].map((src) => (
          <GlassFrame
            key={src}
            rim={rim}
            bend={bend}
            className="aspect-video"
            caption={
              <Caption name="A frame" note="The same edge; it never moves." />
            }
          >
            {/* biome-ignore lint/performance/noImgElement: portable demo asset */}
            <img
              src={src}
              alt="A landscape, edge to edge"
              className="size-full object-cover"
            />
          </GlassFrame>
        ))}
      </div>
    </div>
  )
}

<Frame />
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]