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]>

7 files changed, 54 insertions, 30 deletions

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..5b9320d3
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 Gabriel Schneider
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/README.md b/README.md
index c89e9990..c16453b5 100644
--- a/README.md
+++ b/README.md
@@ -20,3 +20,6 @@ detail. `typst compile --root . --ignore-system-fonts docs/typ/book.typ`
 builds them into one PDF.
 
 Contributors: [building](docs/typ/building.typ).
+
+pardes is under the ISC license ([LICENSE](LICENSE)); the libraries it builds keep
+their own (MuPDF, on by default, is AGPL; `-Dmupdf=false` leaves it out).
diff --git a/docs/site/media/clips.toml b/docs/site/media/clips.toml
index f927450f..6c834569 100644
--- a/docs/site/media/clips.toml
+++ b/docs/site/media/clips.toml
@@ -1,24 +1,25 @@
 # The landing page's recordings, in the order shown. For each clip the
 # site ships media/<name>.webm and media/<name>.mp4, with media/<name>.png
-# as the poster. While `ready` is false the clip shows placeholder.svg and
-# no video, so the site builds before the recordings exist.
+# as the poster; the first ready clip's poster is also the landing's
+# hero image. While `ready` is false the clip shows placeholder.svg and
+# no video, so the site builds before a recording exists.
 
 [[clip]]
-name = "look-and-execute"
-caption = "Right-click opens what you point at; middle-click runs it."
-ready = false
+name = "text-is-the-interface"
+caption = "Middle-click runs a word; right-click an error opens its line."
+ready = true
 
 [[clip]]
-name = "terminals"
-caption = "Terminal panes: type to the program, or move around its output."
-ready = false
+name = "terminals-are-panes"
+caption = "A terminal is a pane: Ctrl-b, then move over its output."
+ready = true
 
 [[clip]]
-name = "scripting"
+name = "scripting-over-9p"
 caption = "A script drives the session by reading and writing files."
-ready = false
+ready = true
 
 [[clip]]
 name = "diff-review"
 caption = "Right-click a diff line to open that line of the file."
-ready = false
+ready = true
diff --git a/docs/site/site.css b/docs/site/site.css
index bbb1140f..2435841b 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -107,14 +107,14 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 .toc ol { padding:8px 14px 10px 2.4em; columns:2 14em; font-size:18px; }
 .masthead { font:clamp(56px, 12vw, 104px)/1 var(--pixel) !important; text-shadow:5px 5px 0 var(--amber) !important; margin:.1em 0 .1em !important; }
 .pitch { font-style:italic; font-size:22px; color:var(--dim); margin-top:0; }
-.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:22px; margin:1.4em 0; }
+.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:18px; margin:1.4em 0; }
 .clip { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:5px 5px 0 var(--shadow); }
-.clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:16/10; background:var(--deep); }
+.clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:960/700; background:var(--deep); }
 .clip figcaption { padding:8px 12px; font-size:18px; color:var(--dim); border-top:2px solid var(--leaf); }
 .lead { font-size:23px; line-height:1.5; hyphens:manual; margin:.2em 0 .5em; }
 .pitch { font-style:italic; font-size:19px; hyphens:manual; color:var(--dim); margin:0 0 .3em; }
 .runs { font-size:18px; color:var(--dim); margin:0 0 1.2em; }
-.hero { display:block; width:100%; height:auto; margin:0 0 1.4em; border:2px solid var(--leaf); box-shadow:6px 6px 0 var(--shadow); }
+.clip.hero { margin:0 0 1.4em; box-shadow:6px 6px 0 var(--shadow); }
 .start { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 .8em; }
 .start .go { display:inline-block; padding:8px 16px; font:20px var(--pixel); text-decoration:none; color:var(--leaf); background:var(--tag); border:2px solid var(--leaf); box-shadow:4px 4px 0 var(--amber); }
 .start .go:first-child { font-size:24px; color:var(--panel); background:var(--leaf); }
@@ -140,3 +140,5 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
   .content { font-size:18px; }
   .content pre { font-size:13px; }
 }
+/* a shell line wraps on a phone rather than hide its end */
+@media (max-width:600px) { .cmd pre { white-space:pre-wrap; overflow-wrap:anywhere; } }
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]
diff --git a/docs/typ/install.typ b/docs/typ/install.typ
index 9114f44c..37e07d1a 100644
--- a/docs/typ/install.typ
+++ b/docs/typ/install.typ
@@ -3,6 +3,6 @@
 #import "style.typ": cmd
 
 With Zig 0.16 (the build fetches everything else):
-#cmd("zig build -Dplatform=tty --prefix ~/.local   # pardes, in a terminal")
-#cmd("zig build -Dplatform=gui --prefix ~/.local   # pardes-gui, its own window")
+#cmd("# pardes, in a terminal\nzig build -Dplatform=tty --prefix ~/.local")
+#cmd("# pardes-gui, its own window\nzig build -Dplatform=gui --prefix ~/.local")
 Then run `pardes` or `pardes FILE`.
diff --git a/docs/typ/style.typ b/docs/typ/style.typ
index 903a8273..ed713537 100644
--- a/docs/typ/style.typ
+++ b/docs/typ/style.typ
@@ -202,7 +202,7 @@
 #let file(p) = context if html-out() { span("file", raw(p)) } else { m(p, fill: palette.str) }
 
 /// A shell line.
-#let cmd(c) = context if html-out() { raw(c, block: true, lang: "sh") } else {
+#let cmd(c) = context if html-out() { html.elem("div", attrs: (class: "cmd"), raw(c, block: true, lang: "sh")) } else {
   let tight = density.get() == "tight"
   block(
     width: 100%, spacing: if tight { 0.4em } else { 0.9em },
@@ -256,7 +256,7 @@
 
 /// Where pardes lives and under what licence, for the site's footer (and
 /// any output that wants them). none until decided.
-#let project = (source: none, license: none)
+#let project = (source: "https://git.0x4200.cafe/pardes", license: "ISC")
 
 /// A glossary: like #pairs, under its own heading. On paper the heading
 /// and the table; in HTML a <details> that starts closed, its summary the