The landing shows the four recordings, pardes is ISC-licensed, and the install lines fit a phone

clips.toml names the recordings (text-is-the-interface,
terminals-are-panes, scripting-over-9p, diff-review), each ready, its
caption checked against what the clip shows. The first ready clip
plays at the top, full width and on its own (autoplay, muted, looping),
and the grid below shows the others, three across. Videos and posters keep the recordings' 960x700 shape. The footer
links the source at git.0x4200.cafe/pardes and names the ISC license,
from `project` in style.typ. LICENSE holds the ISC text, and the README
names it and says the libraries keep their own (MuPDF, on by default, is
AGPL). The install lines put their comments on lines of their own, and
on a phone a shell line wraps rather than scroll its end away.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 15 insertions, 12 deletions

diff --git a/docs/site/site.typ b/docs/site/site.typ
index 03d9a15d..068b5b9c 100644
--- a/docs/site/site.typ
+++ b/docs/site/site.typ
@@ -70,7 +70,7 @@
       #el("footer", (class: "colophon"))[
         pardes ·
         #if project.source != none [#el("a", (href: project.source))[source] · ]
-        #if project.license != none [#project.license · ]
+        #if project.license != none [#project.license license · ]
         built from `docs/typ` with Typst ·
         #el("a", (href: "fonts/LICENSE-DepartureMono.txt"))[fonts] (OFL)
       ]
@@ -94,7 +94,13 @@
 
 #doc-links.update(true)
 
-#let ready = clips.filter(c => c.ready)
+// The first ready clip plays at the top; the grid shows the rest.
+#let hero = clips.find(c => c.ready)
+#let video(c, extra) = el("video", (poster: "media/" + c.name + ".png", muted: "", loop: "", playsinline: "",
+    controls: "") + extra)[
+  #el("source", (src: "media/" + c.name + ".webm", type: "video/webm"))[]
+  #el("source", (src: "media/" + c.name + ".mp4", type: "video/mp4"))[]
+]
 #let start = (
   (id: "guide", label: [Start: the guide], note: [about 15 min]),
   (id: "tutor", label: [Hands on: the tutor], note: none),
@@ -108,8 +114,11 @@
   #el("p", (class: "pitch"))[#tagline.]
   #el("p", (class: "runs"))[It runs in a terminal or in its own window (SDL), on Linux;
     macOS and browser builds are in the tree.]
-  #if ready.len() > 0 {
-    el("img", (class: "hero", src: "media/" + ready.first().name + ".png", alt: ready.first().caption))[]
+  #if hero != none {
+    el("figure", (class: "clip hero"))[
+      #video(hero, (autoplay: ""))
+      #el("figcaption")[#hero.caption]
+    ]
   }
   #el("div", (class: "start"))[
     #for s in start {
@@ -122,15 +131,9 @@
     }
   ]
   #el("div", (class: "clips"))[
-    #for c in clips {
+    #for c in clips.filter(c => c != hero) {
       el("figure", (class: "clip"))[
-        #if c.ready {
-          el("video", (poster: "media/" + c.name + ".png", muted: "", loop: "", playsinline: "",
-            controls: "", preload: "none"))[
-            #el("source", (src: "media/" + c.name + ".webm", type: "video/webm"))[]
-            #el("source", (src: "media/" + c.name + ".mp4", type: "video/mp4"))[]
-          ]
-        } else {
+        #if c.ready { video(c, (preload: "none")) } else {
           el("img", (src: "media/placeholder.svg", alt: "", width: "640", height: "400"))[]
         }
         #el("figcaption")[#c.caption]