From 767c37ccac04339ae60e1a12370163b3e217fdf6 Mon Sep 17 00:00:00 2001
From: Antonino Cuzzola <trony2712@Host-27DCF97C.homenet.telecomitalia.it>
Date: Fri, 4 Sep 2026 18:52:30 +0200
Subject: [PATCH 1/3] Sei voci tipografiche in piu': come una riga arriva, e
 dove sta

La famiglia passa da quattro a dieci, e le nuove si dividono in due gruppi.

COME ARRIVA. La MASCHERA che scopre ogni parola da dietro il bordo della sua
casella - la tecnica piu' usata nel kinetic tipografico, e il motivo e' che una
maschera non muove il testo: la parola e' gia' al suo posto e viene solo
scoperta, mentre una dissolvenza la fa comparire. Il GRANO dello scaglionamento,
lettera per lettera contro parola per parola: 23 momenti d'ingresso contro 7
sulla stessa frase, che e' la differenza fra una riga che cola e una che atterra
a blocchi. La SPAZIATURA che si chiude da 0,225em, l'unica entrata che non porta
dentro niente da fuori campo - la frase e' gia' tutta li' e smette solo di
trattenere il fiato. E il PESO che atterra da 300 a 800.

DUE DI QUESTE HANNO CORRETTO LA VOCE CHE LE DESCRIVEVA, ed e' il senso di
misurare. Quella sul peso sosteneva che il peso e' l'asse che cambia l'inchiostro
di una parola senza cambiarne l'ingombro: il render l'ha smentita al primo
fotogramma, perche' la frase lunga stava su una riga a 300 e andava a capo a 800.
Adesso sono due parole, la crescita di larghezza e' dichiarata (12 per cento)
invece che negata, e la lezione e' scritta: su una riga lunga o la si tiene corta
o le si blocca la larghezza. La spaziatura aveva lo stesso difetto un piano
sotto - larga spingeva la riga su tre righe e stretta su due, quindi la
composizione si rifaceva a meta' animazione. La spaziatura E' una proprieta' di
layout, che e' proprio quello che la voce dice.

DOVE STA. La COMPAGNA SU UN ALTRO ASSE: la riga piccola ruotata che corre sul
fianco in maiuscoletto spaziato, che e' quello che le reference mettono accanto a
ogni frase principale. Non compete perche' non sta sull'asse che l'occhio sta
seguendo; messa piatta sotto, le stesse parole diventano un sottotitolo, e un
sottotitolo e' una seconda cosa da leggere. E la FRASE SUL PIANO, che e' la voce
che lega questa famiglia al resto del repo: la tipografia vive nella prospettiva
della lastra invece di stare appoggiata sul quadro. Se il film e' un oggetto
inclinato ripreso da una camera, una frase piatta sul vetro viene da un altro
film. Il banco lo misura nel modo piu' economico che c'e': sul piano i due capi
della riga sono diversi (0,909), da piatta identici (1,000).

Tre sonde sbagliate mie, tenute scritte perche' sono lo stesso errore. Per la
maschera misuravo l'altezza della casella, che non cambia mai perche' e' il suo
mestiere; poi lo scostamento assoluto, che ha un padding dentro. Quello che
distingue lo scoprire dall'accendere e' l'ESCURSIONE: 83 px contro 0. Per la
spaziatura misuravo il riquadro della riga, e con la riga che va a capo il
riquadro misura la riga piu' larga, quindi chiudere la spaziatura risultava
allargarla.

Trentasei voci, trentadue con un banco che le boccia, trentasei cicli che si
chiudono.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 README.md                |  36 +++++-
 scripts/demo-check.py    | 112 +++++++++++++++++
 showcase/grammatica.html | 264 +++++++++++++++++++++++++++++++++++++--
 3 files changed, 402 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 3ee3c13..4b277ab 100644
--- a/README.md
+++ b/README.md
@@ -158,7 +158,7 @@ asserted. It is also closer to the references, where the enormous word is alone.
 
 ## Typography, where the sentence is the film
 
-Four entries with no interface on screen at all. They come from three reference
+Ten entries with no interface on screen at all. They come from three reference
 films the type direction was read off — a SaaS promo, a Spotify spot, an Apple
 Business Essentials piece — and their common DNA: the typography *is* the film,
 one phrase per beat, always centred, heavy sans with tight tracking, scale
@@ -187,6 +187,40 @@ slowing the cut down, tighten the entry stagger and lengthen only the dwell.
 Widening the stagger looks like generosity and is theft, because every frame it
 takes comes out of the only stretch where anybody is reading.
 
+Six more went in after the first four were looked at, and they split into how a
+line *arrives* and where it *sits*.
+
+Arriving: a **mask** that uncovers each word from behind the edge of its own box
+— the most common technique in the reference work, and the reason is that a mask
+does not move the text, the word is already in place and only gets revealed. The
+**grain of the stagger**, letter by letter against word by word: 23 entry moments
+against 7 on the same sentence, which is the difference between a line that pours
+and a line that lands in blocks. **Tracking** closing from 0.225em, the only
+entrance that brings nothing in from off-frame — the sentence is all there and
+only stops holding its breath. And **weight** landing from 300 to 800.
+
+Two of those corrected the entry that described them, which is the point of
+measuring. The weight one claimed weight was the axis that changes a word's ink
+without changing the room it takes; the render disagreed in the first frame,
+because the long line fitted on one row at 300 and wrapped at 800. It is now two
+words, the width growth is stated (12 per cent) rather than denied, and the
+lesson is written down: on a long line you either keep it short or lock the
+width. Tracking had the same shape of problem one floor down — wide spacing
+pushed the line onto three rows and tight spacing onto two, so the composition
+redid itself mid-animation. Tracking *is* a layout property, which is the entry;
+the demo is two words so the effect does not eat the composition.
+
+Sitting: **the companion on another axis** — the small rotated line running up
+the side in spaced capitals, which is what the references put next to every main
+sentence. It does not compete because it is not on the axis the eye is following;
+set flat underneath, the same words become a subtitle, and a subtitle is a second
+thing to read. And **the sentence on the plane**, which is the entry that ties
+this family to the rest of the repo: the type lives in the slab's own
+perspective instead of sitting on the frame. If the film is an inclined object
+seen by a camera, a sentence lying flat on the glass comes from a different film.
+The bench measures it the cheapest way there is — on the plane the two ends of
+the line differ (0.909), flat they are identical (1.000).
+
 The page grew a second kind of stage for these. Type demos do not mount the slab
 — mounting it and then covering it would render a kanban behind a word for
 nothing, and the stage's perspective would falsify the type size. Same engine,
diff --git a/scripts/demo-check.py b/scripts/demo-check.py
index 5aca09b..1f23b57 100755
--- a/scripts/demo-check.py
+++ b/scripts/demo-check.py
@@ -385,6 +385,118 @@ def drift(code, lo, hi):
     check("TYP-04", w1 < 1.0 and w2 > 20,
           "spostamento delle tre parole in comune: %.2f px sostituendo una parola, %.0f px sostituendo la riga" % (w1, w2))
 
+    # TYP-05 - scoprire non e' accendere.
+    # Il caso peggiore: se la parola comparisse invece di essere scoperta, la
+    # sua altezza resa sarebbe piena dal primo fotogramma e cambierebbe solo
+    # l'opacita'.
+    # La casella che ritaglia non cambia mai altezza - e' il suo mestiere -
+    # quindi non e' li' che si vede la differenza. Quello che si misura e' di
+    # quanto la parola sia SPOSTATA dentro la casella: scoprendola parte fuori
+    # e sale, in dissolvenza sta ferma al suo posto dal primo fotogramma.
+    def offset(code, lo, hi):
+        vals = []
+        for f in range(lo, hi, 2):
+            vals.append(pg.evaluate("""([c,f])=>{
+              const h=[...document.querySelectorAll('.mv')];
+              const i=h.findIndex(m=>(m.querySelector('.code')||{}).textContent.trim()===c);
+              const st=document.querySelectorAll('.stage')[i], it=st.__it;
+              it.manual=f; it.last=-1; it.mv.draw(f,it.S);
+              const box=st.querySelectorAll('.tline > .tclip')[3];
+              const inn=box.firstElementChild;
+              return inn.getBoundingClientRect().top - box.getBoundingClientRect().top;
+            }""", [code, f]))
+        return min(vals), max(vals)
+    o1 = offset("TYP-05", 8, 50)
+    o2 = offset("TYP-05", 123, 165)
+    # L'ESCURSIONE, non il valore: la casella ha un padding in cima, quindi la
+    # parola sta comunque una decina di pixel sotto il suo bordo anche da ferma.
+    # Quello che distingue lo scoprire dall'accendere e' di quanto si MUOVE.
+    r1, r2 = o1[1] - o1[0], o2[1] - o2[0]
+    check("TYP-05", r1 > 40 and r2 < 3,
+          "escursione della parola dentro la sua casella: %.0f px scoprendola, %.0f px in dissolvenza"
+          % (r1, r2))
+
+    # TYP-06 - il grano dello scaglionamento.
+    def moments(code, lo, hi):
+        seen, first = set(), {}
+        for f in range(lo, hi):
+            st = ty(code, f)
+            for j, sp in enumerate(st["spans"]):
+                pass
+        return seen, first
+    def entries(code, lo, hi):
+        # I fotogrammi distinti in cui QUALCOSA diventa visibile per la prima
+        # volta: e' il numero di momenti d'ingresso, che e' la tesi della voce.
+        prev = None
+        out = set()
+        for f in range(lo, hi):
+            cur = pg.evaluate("""([c,f])=>{
+              const h=[...document.querySelectorAll('.mv')];
+              const i=h.findIndex(m=>(m.querySelector('.code')||{}).textContent.trim()===c);
+              const st=document.querySelectorAll('.stage')[i], it=st.__it;
+              it.manual=f; it.last=-1; it.mv.draw(f,it.S);
+              return [...st.querySelectorAll('.tline .tw > span')].map(e=>parseFloat(getComputedStyle(e).opacity)>0.06?1:0);
+            }""", [code, f])
+            if prev is not None and any(c and not p for c, p in zip(cur, prev)):
+                out.add(f)
+            prev = cur
+        return len(out)
+    e1, e2 = entries("TYP-06", 4, 60), entries("TYP-06", 129, 185)
+    check("TYP-06", e1 > e2 * 2.5,
+          "momenti d'ingresso distinti: %d lettera per lettera, %d parola per parola" % (e1, e2))
+
+    # TYP-07 - la spaziatura si chiude, quindi la riga si stringe.
+    # La larghezza di UNA parola, non il riquadro della riga: se la riga va a
+    # capo il riquadro misura la riga piu' larga e la spaziatura che si chiude
+    # risulta allargarla. La parola porta dentro la propria spaziatura e non ha
+    # quel problema.
+    def linew(code, f):
+        return ty(code, f)["spans"][1]["w"]
+    w_a, w_b = linew("TYP-07", 18), linew("TYP-07", 70)
+    w_c, w_d = linew("TYP-07", 128), linew("TYP-07", 180)
+    check("TYP-07", w_a > w_b * 1.12 and abs(w_c - w_d) < 2,
+          "larghezza della parola: da %.0f a %.0f px chiudendo la spaziatura, %.0f contro %.0f senza"
+          % (w_a, w_b, w_c, w_d))
+
+    # TYP-08 - il peso sale, e la larghezza con lui.
+    def wgt(code, f):
+        return pg.evaluate("""([c,f])=>{
+          const h=[...document.querySelectorAll('.mv')];
+          const i=h.findIndex(m=>(m.querySelector('.code')||{}).textContent.trim()===c);
+          const st=document.querySelectorAll('.stage')[i], it=st.__it;
+          it.manual=f; it.last=-1; it.mv.draw(f,it.S);
+          const l=st.querySelector('.tline'), s=st.querySelector('.tline > .tw');
+          return [parseFloat(getComputedStyle(l).fontWeight), s.getBoundingClientRect().width];
+        }""", [code, f])
+    p_a, p_b = wgt("TYP-08", 16), wgt("TYP-08", 66)
+    p_c = wgt("TYP-08", 130)
+    check("TYP-08", p_a[0] < 380 and p_b[0] > 760 and p_b[1] > p_a[1] * 1.04 and p_c[0] > 760,
+          "peso da %.0f a %.0f, e la prima parola da %.0f a %.0f px; nella seconda meta' resta a %.0f"
+          % (p_a[0], p_b[0], p_a[1], p_b[1], p_c[0]))
+
+    # TYP-09 - la compagna sta su un altro asse.
+    def side(code, f):
+        return pg.evaluate("""([c,f])=>{
+          const h=[...document.querySelectorAll('.mv')];
+          const i=h.findIndex(m=>(m.querySelector('.code')||{}).textContent.trim()===c);
+          const st=document.querySelectorAll('.stage')[i], it=st.__it, sr=st.getBoundingClientRect();
+          it.manual=f; it.last=-1; it.mv.draw(f,it.S);
+          const e=st.querySelector('.tside'), r=e.getBoundingClientRect();
+          return {tall: r.height > r.width, x:(r.left+r.width/2-sr.left)/sr.width};
+        }""", [code, f])
+    s1, s2 = side("TYP-09", 70), side("TYP-09", 185)
+    check("TYP-09", s1["tall"] and s1["x"] < 0.2 and (not s2["tall"]) and abs(s2["x"] - 0.5) < 0.1,
+          "compagna: verticale al %.0f%% della larghezza, contro orizzontale al %.0f%%"
+          % (s1["x"] * 100, s2["x"] * 100))
+
+    # TYP-10 - sul piano i due capi della riga non sono uguali.
+    def fore(code, f):
+        sp = ty(code, f)["spans"]
+        return sp[0]["h"] / sp[-1]["h"]
+    f1, f2 = fore("TYP-10", 90), fore("TYP-10", 215)
+    check("TYP-10", abs(f1 - 1) > 0.05 and abs(f2 - 1) < 0.01,
+          "rapporto fra il primo e l'ultimo capo della riga: %.3f sul piano, %.3f da piatta" % (f1, f2))
+
     br.close()
 
 print()
diff --git a/showcase/grammatica.html b/showcase/grammatica.html
index 051441b..8e74c2d 100644
--- a/showcase/grammatica.html
+++ b/showcase/grammatica.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="dark" />
     <title>The grammar — scenes</title>
-    <meta name="description" content="Thirty movements for a software product commercial shot in one take. Each one runs a live demo, states the numbers it starts from, and names the bench that can fail it." />
+    <meta name="description" content="Thirty-six movements for a software product commercial shot in one take. Each one runs a live demo, states the numbers it starts from, and names the bench that can fail it." />
     <meta property="og:title" content="The grammar — scenes" />
     <meta property="og:description" content="The vocabulary behind armonia/scenes: continuous movements over real UI, no cuts, each with the measurement that can disprove it." />
     <style>
@@ -123,6 +123,20 @@
         font-weight: 800; letter-spacing: -0.035em; line-height: 0.94;
         text-align: center; font-size: 7.4cqw; color: var(--text); }
       .tw { display: inline-block; white-space: pre; }
+      /* La casella che ritaglia: la parola sale da sotto il suo stesso bordo.
+         overflow visibile sui discendenti sarebbe il difetto - "p" e "g"
+         verrebbero tagliate - quindi la casella e' piu' alta della riga e il
+         testo ci sta dentro con il suo respiro. */
+      .tclip { display: inline-block; overflow: hidden; padding: 0.14em 0 0.2em; }
+      .tclip > span { display: inline-block; }
+      /* La riga che accompagna, ruotata: sta sul fianco e non compete. */
+      .tside { position: absolute; left: 3cqw; top: 50%; transform-origin: 0 50%;
+        font-size: 1.5cqw; font-weight: 600; letter-spacing: 0.22em;
+        text-transform: uppercase; color: var(--faint); white-space: nowrap; }
+      /* Il piano: la frase vive nella stessa prospettiva della lastra. */
+      .troom { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 50% 46%; }
+      .tplane { position: absolute; inset: 0; display: flex; align-items: center;
+        justify-content: center; transform-style: preserve-3d; }
 
       /* the four fields, on the grid the index uses for the rules */
       .spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -271,20 +285,20 @@
     <div class="wrap">
       <header>
         <p class="eyebrow">The grammar</p>
-        <h1>Thirty movements,<br />no cuts.</h1>
+        <h1>Thirty-six movements,<br />no cuts.</h1>
         <p class="lede">
           The vocabulary the scenes are built from. A transition is something you
           pick between two finished clips; <strong>a movement carries the film
           from one state to the next with no join to hide</strong>. Every entry
           here runs a live demo, states the numbers it starts from, and names the
           bench that can fail it. Twenty-six of them run on the slab; the last
-          four have no interface on screen at all, because in those the sentence
+          ten have no interface on screen at all, because in those the sentence
           is the film.
         </p>
         <p class="lede" style="margin-top:18px;font-size:16px">
-          Twenty-six of the thirty name a bench that exists and runs in CI. The
-          other four name one that does not exist yet, and those are printed in
-          grey: a measurement nobody has written is a proposal, and this page
+          Thirty-two of the thirty-six name a bench that exists and runs in CI.
+          The other four name one that does not exist yet, and those are printed
+          in grey: a measurement nobody has written is a proposal, and this page
           would be doing the thing it warns against if it let the two look alike.
         </p>
         <div class="cta">
@@ -296,14 +310,14 @@ <h1>Thirty movements,<br />no cuts.</h1>
 
     <nav class="rail" aria-label="Filter by family">
       <div class="wrap railin">
-        <button class="chip" data-fam="all" aria-pressed="true">All <b>30</b></button>
+        <button class="chip" data-fam="all" aria-pressed="true">All <b>36</b></button>
         <button class="chip" data-fam="cam" aria-pressed="false">Camera <b>6</b></button>
         <button class="chip" data-fam="cur" aria-pressed="false">Cursor <b>4</b></button>
         <button class="chip" data-fam="txt" aria-pressed="false">Text <b>5</b></button>
         <button class="chip" data-fam="chr" aria-pressed="false">Choreography <b>4</b></button>
         <button class="chip" data-fam="mat" aria-pressed="false">Material <b>3</b></button>
         <button class="chip" data-fam="giu" aria-pressed="false">Joins <b>4</b></button>
-        <button class="chip" data-fam="typ" aria-pressed="false">Typography <b>4</b></button>
+        <button class="chip" data-fam="typ" aria-pressed="false">Typography <b>10</b></button>
         <span class="gap"></span>
         <button class="chip" id="pause" aria-pressed="false">Stop all</button>
       </div>
@@ -626,6 +640,22 @@ <h1>Thirty movements,<br />no cuts.</h1>
     T.text=arr;
     return T.spans;
   };
+  /* Ogni parola dentro una casella che ritaglia. Serve a TYP-05, e si costruisce
+     una volta: rifarlo a ogni fotogramma rifarebbe il layout. */
+  T.clip=function(){
+    T.inner=T.spans.map(function(sp){
+      var txt=sp.textContent; sp.textContent="";
+      sp.className="tw tclip";
+      var inn=el("span",null,null,txt); sp.appendChild(inn); return inn;
+    });
+    return T.inner;
+  };
+  /* La riga di fianco, ruotata di novanta gradi. */
+  T.side=function(txt,deg){
+    var e=el("div","tside",null,txt);
+    e.style.transform="rotate("+(deg===undefined?-90:deg)+"deg) translateX(-50%)";
+    wrap.appendChild(e); T.sideEl=e; return e;
+  };
   T.reset=function(){
     T.spans.forEach(function(sp){
       sp.style.opacity="1"; sp.style.transform="none"; sp.style.color="";
@@ -1230,6 +1260,7 @@ <h1>Thirty movements,<br />no cuts.</h1>
 
 /* --- TYP-02: una parola sola, enorme --- */
 var TCLAIM = ["One", "shot.", "Forty-eight", "seconds."];
+var TSHORT = ["One", "shot."];
 
 M.big={dur:220, kind:"type",
  init:function(T){
@@ -1352,6 +1383,185 @@ <h1>Thirty movements,<br />no cuts.</h1>
      : "one word out, then the other in — never both at once   three words stay put and do not move a pixel");
  }};
 
+/* --- TYP-05: la maschera che scopre la riga ---------------------------
+   La tecnica piu' usata nel kinetic tipografico di livello, e la ragione e'
+   che una maschera non muove il testo: la parola e' gia' al suo posto e viene
+   solo scoperta. Una dissolvenza invece la fa comparire, e comparire e'
+   sempre meno preciso che essere scoperti. */
+M.mask={dur:230, kind:"type",
+ init:function(T){ T.words(TLINE); T.clip(); },
+ draw:function(f,T){
+   var second=f>=115, q=second?f-115:f;
+   var out=E.inout(cl((q-86)/22));
+   T.spans.forEach(function(sp,i){
+     var t=E.out(cl((q-6-i*3.4)/26));
+     if(second){
+       /* La stessa entrata fatta in dissolvenza: la parola non e' scoperta,
+          e' accesa. Il testo non si muove ma nemmeno arriva da nessuna parte. */
+       T.inner[i].style.transform="none";
+       T.inner[i].style.opacity=t.toFixed(3);
+     } else {
+       T.inner[i].style.transform="translateY("+((1-t)*112).toFixed(1)+"%)";
+       T.inner[i].style.opacity="1";
+     }
+     sp.style.opacity=(1-out).toFixed(3);
+   });
+   T.hud(second
+     ? "the same entry as a fade: the word is switched on where it already was, and nothing is uncovered"
+     : "each word rises from behind the edge of its own box   a mask does not move the text, it reveals it");
+ }};
+
+/* --- TYP-06: lettera per lettera, o parola per parola ----------------- */
+M.letters={dur:250, kind:"type",
+ init:function(T){
+   /* Le lettere sono span dentro lo span della parola: cosi' lo scaglionamento
+      fine non tocca la composizione della riga, che resta quella delle parole. */
+   T.words(TLINE);
+   T.ch=[];
+   T.spans.forEach(function(sp){
+     var txt=sp.textContent; sp.textContent="";
+     for(var i=0;i<txt.length;i++){
+       var c=el("span",null,"display:inline-block;white-space:pre",txt[i]);
+       sp.appendChild(c); T.ch.push(c);
+     }
+   });
+ },
+ draw:function(f,T){
+   var second=f>=125, q=second?f-125:f;
+   var out=E.inout(cl((q-92)/24)), k=0;
+   T.spans.forEach(function(sp,w){
+     for(var j=0;j<sp.children.length;j++){
+       /* Prima meta': ogni lettera ha il suo ritardo. Seconda: tutte le lettere
+          di una parola entrano insieme, e il ritardo e' per parola. */
+       var lag=second? w*7 : (k)*1.15;
+       var t=E.out(cl((q-8-lag)/22));
+       sp.children[j].style.opacity=((1-out)*t).toFixed(3);
+       sp.children[j].style.transform="translateY("+((1-t)*0.34).toFixed(3)+"em)";
+       k++;
+     }
+   });
+   T.hud(second
+     ? "word by word: four entry moments, and the line arrives in blocks"
+     : "letter by letter, 1.15 frames apart   twenty-nine moments instead of seven, and the line pours instead of landing");
+ }};
+
+/* --- TYP-07: la spaziatura che si chiude ------------------------------ */
+M.track={dur:220, kind:"type",
+ /* FRASE CORTA, e non e' un vezzo: a 0,225em di spaziatura la frase lunga
+    andava a capo su tre righe e a spaziatura chiusa su due, quindi durante
+    l'animazione la composizione si rifaceva. La spaziatura E' una proprieta' di
+    layout - e' proprio quello che la voce dice - percio' o la riga ci sta larga
+    o l'effetto si mangia la composizione. */
+ init:function(T){ T.words(TSHORT); },
+ draw:function(f,T){
+   var second=f>=110, q=second?f-110:f;
+   var inP=E.out(cl(q/22)), set=E.inout(cl((q-14)/52)), out=E.inout(cl((q-88)/16));
+   /* La spaziatura parte larga e si chiude. E' l'unica entrata che non muove
+      niente da fuori campo: la frase e' gia' tutta li' dal primo fotogramma,
+      cambia solo quanto respira. */
+   var tr=second?0:(1-set)*0.26;
+   T.line.style.letterSpacing=(-0.035+tr).toFixed(4)+"em";
+   T.spans.forEach(function(sp){ sp.style.opacity=(inP*(1-out)).toFixed(3); });
+   T.hud(second
+     ? "no tracking move: the line is simply switched on at its final spacing"
+     : "letter-spacing from 0.225em to -0.035em over 52 frames   nothing enters from off-frame, the sentence only stops holding its breath");
+ }};
+
+/* --- TYP-08: il peso che atterra -------------------------------------- */
+
+
+M.weight={dur:210, kind:"type",
+ init:function(T){ T.words(TSHORT); },
+ draw:function(f,T){
+   var second=f>=105, q=second?f-105:f;
+   var inP=E.out(cl(q/20)), w=E.inout(cl((q-12)/48)), out=E.inout(cl((q-82)/16));
+   /* Da 300 a 800. E il peso CAMBIA ANCHE L'INGOMBRO: a 800 le stesse parole
+      sono piu' larghe. La prima versione di questa voce sosteneva il contrario
+      e il render la smentiva subito - con la frase lunga, a 300 stava su una
+      riga e a 800 andava a capo. Per questo qui la frase e' corta: l'inchiostro
+      si vede cambiare senza che la composizione si rifaccia. Su una riga lunga
+      un'animazione di peso o la si tiene corta o le si blocca la larghezza. */
+   var val=second?800:Math.round(300+500*w);
+   T.line.style.fontWeight=String(val);
+   T.spans.forEach(function(sp){ sp.style.opacity=(inP*(1-out)).toFixed(3); });
+   var w0=T.spans[0].getBoundingClientRect().width;
+   T.hud(second
+     ? "already at 800 from the first frame: the sentence arrives finished"
+     : "weight "+val+" of 800   the first word is "+w0.toFixed(0)+" px wide: the ink grows and so does the room it takes");
+ }};
+
+/* --- TYP-09: la riga che accompagna, da un altro orientamento ---------
+   Nelle reference la frase principale non e' mai sola: di fianco corre una
+   riga piccola, ruotata, in maiuscoletto spaziato - una data, una categoria,
+   un numero d'ordine. Non compete con la frase perche' sta su un ALTRO ASSE:
+   l'occhio la vede senza doverla leggere prima. Messa piatta sotto la riga
+   principale diventa un sottotitolo, cioe' una seconda cosa da leggere. */
+M.side={dur:230, kind:"type",
+ init:function(T){
+   T.words(TCLAIM);
+   T.side("Frame-locked · 1460 frames");
+ },
+ draw:function(f,T){
+   var second=f>=115, q=second?f-115:f;
+   var inP=E.out(cl(q/24)), sideIn=E.out(cl((q-16)/30)), out=E.inout(cl((q-88)/18));
+   T.spans.forEach(function(sp){
+     sp.style.opacity=(inP*(1-out)).toFixed(3);
+     sp.style.transform="translateY("+((1-inP)*0.2).toFixed(3)+"em)";
+   });
+   var e=T.sideEl;
+   e.style.opacity=(sideIn*(1-out)).toFixed(3);
+   if(second){
+     /* Il caso da guardare: la stessa riga messa piatta sotto la principale.
+        Da li' in poi e' un sottotitolo, e un sottotitolo si legge. */
+     e.style.left="50%"; e.style.top="66%";
+     e.style.transform="translateX(-50%) translateY("+((1-sideIn)*10).toFixed(1)+"px)";
+     e.style.fontSize="1.9cqw";
+   } else {
+     e.style.left="3cqw"; e.style.top="50%";
+     e.style.transform="rotate(-90deg) translateX(-50%) translateY("+((1-sideIn)*-14).toFixed(1)+"px)";
+     e.style.fontSize="1.5cqw";
+   }
+   T.hud(second
+     ? "the same line set flat under the sentence: now it is a subtitle, and a subtitle has to be read"
+     : "the companion runs up the left edge at -90°   it is seen without being read, because it is not on the axis the eye is following");
+ }};
+
+/* --- TYP-10: la frase sul piano --------------------------------------
+   La tipografia sta nella stessa prospettiva della lastra invece che
+   appoggiata sul quadro. E' la voce che lega questa famiglia al resto del
+   repo: se il film e' un oggetto inclinato ripreso da una camera, una frase
+   piatta sul fotogramma viene da un altro film. */
+M.plane={dur:250, kind:"type",
+ init:function(T,stage){
+   T.words(TCLAIM);
+   /* Corpo piu' piccolo che nelle altre voci: una riga che riempie il quadro
+      non lascia vedere niente della prospettiva, perche' i suoi due capi
+      finiscono fuori. */
+   T.line.style.fontSize="5.2cqw";
+   var room=el("div","troom"), plane=el("div","tplane");
+   /* La riga esistente si trasloca dentro il piano: cosi' e' lo stesso
+      elemento, con lo stesso corpo, e l'unica differenza fra le due meta'
+      e' la trasformazione del genitore. */
+   room.appendChild(plane); plane.appendChild(T.line); T.wrap.appendChild(room);
+   T.plane=plane;
+ },
+ draw:function(f,T){
+   var second=f>=125, q=second?f-125:f;
+   var inP=E.out(cl(q/26)), out=E.inout(cl((q-92)/20));
+   var t=E.inout(cl((q-10)/70));
+   T.spans.forEach(function(sp){ sp.style.opacity=(inP*(1-out)).toFixed(3); });
+   if(second){
+     /* Piatta sul quadro: nessuna prospettiva, nessuna appartenenza. */
+     T.plane.style.transform="translateZ(0) rotateY(0deg) rotateX(0deg)";
+   } else {
+     /* Gli stessi angoli della lastra a fine UIMockup: yaw -9, pitch 2,5. */
+     T.plane.style.transform="translateZ("+(40+120*t).toFixed(0)+"px) rotateY("+(-30+11*t).toFixed(2)+"deg) rotateX(3deg)";
+   }
+   T.hud(second
+     ? "flat on the frame: the same sentence, and nothing says it belongs to the same room as the slab"
+     : "yaw "+(-30+11*t).toFixed(1)+"° pitch 3° on the same perspective as the slab   the type is in the room, not on the glass");
+ }};
+
 /* --- GIU-04: le tre grandezze della camera lungo tutta la catena --- */
 var CHAIN=[
   {n:"UIMockup",    from:START,                          to:END},
@@ -1469,7 +1679,7 @@ <h1>Thirty movements,<br />no cuts.</h1>
  {k:"chr",n:"Choreography inside one shot",d:"The layout moving on its own, without anyone cutting."},
  {k:"mat",n:"The material of the slab",d:"Three details that decide whether what is on screen is an object or a backdrop."},
  {k:"giu",n:"The joins",d:"What this repo has and nothing else does: how two scenes attach without it showing."},
- {k:"typ",n:"Typography as the subject",d:"Four entries where the film is the sentence and there is no interface on screen. Same rule as the rest: the sentence transforms, it does not cut."}
+ {k:"typ",n:"Typography as the subject",d:"Ten entries where the film is the sentence and there is no interface on screen. How a line arrives, how much of it is the subject, and where it sits — including on the slab's own inclined plane, which is what stops it being a caption from another film."}
 ];
 
 var CAT=[
@@ -1647,6 +1857,42 @@ <h1>Thirty movements,<br />no cuts.</h1>
  c:"One word out of four changes, over 30 frames. The other three do not move a pixel. The second half replaces the whole line and slides it out and back, which is what an edit does when it has nothing to keep.",
  d:"demo-check.py measures the screen position of the three shared words across the change: under a pixel of movement in the first half against 40 or more in the second. If the words that are supposed to stay are moving, the sentence is cutting and only pretending not to."},
 
+{fam:"typ",code:"TYP-05",t:"The mask that uncovers the line",demo:"mask",src:"a clipping box per word",
+ a:"Each word rises from behind the edge of its own box. A mask does not move the text: the word is already in place and only gets uncovered.",
+ b:"One clipping box per word, and the word translated inside it. The box is taller than the line because a box cut to the line height eats the descenders — the p and the g go first, and it reads as a rendering fault rather than as a reveal.",
+ c:"112 per cent of the box height, 26 frames per word, 3.4 frames of stagger. The second half runs the same entry as an opacity fade, which is the case worth looking at.",
+ d:"demo-check.py measures how far the word travels inside its own box: 83 px while being uncovered, 0 while being faded in. Not its height — the clipping box never changes height, that is its job — and not its absolute offset either, because the box has padding at the top and the word sits ten pixels below the edge even at rest. It is the travel that separates being uncovered from being switched on."},
+
+{fam:"typ",code:"TYP-06",t:"Letter by letter, or word by word",demo:"letters",src:"the grain of the stagger",
+ a:"The same line can arrive in twenty-nine moments or in seven. Letters make it pour; words make it land in blocks. Neither is better — they are different speeds of the same sentence.",
+ b:"The letters are spans inside the word's span, so the fine stagger does not touch how the line composes: the layout is still made of words. Splitting the line into characters at the top level would let it wrap mid-word.",
+ c:"1.15 frames between letters against 7 between words. Under about one frame per letter the stagger stops reading and becomes a fade; over three it becomes a typewriter.",
+ d:"demo-check.py counts the distinct frames on which something first becomes visible: 29 against 7 on the same sentence. If the two halves count the same, the grain is not doing anything."},
+
+{fam:"typ",code:"TYP-07",t:"The tracking that closes",demo:"track",src:"letter-spacing",
+ a:"The line starts wide and closes to its final spacing. It is the only entrance that brings nothing in from off-frame: the sentence is all there from the first frame, and what changes is how much it breathes.",
+ b:"One property on the line, not a transform per word. It costs a reflow per frame, which at this word count is free, and it is the reason the effect cannot be faked with transforms: tracking is a layout property.",
+ c:"From 0.225em to -0.035em over 52 frames, and one word goes from 272 px to 170. The line is two words on purpose: with the long claim, wide tracking pushed it onto three rows and tight tracking onto two, so the composition redid itself in the middle of the animation. Tracking is a layout property — which is the entry — so either the line fits wide or the effect eats the composition.",
+ d:"demo-check.py measures the rendered width of ONE word and not the line's box: if the line wraps, the box measures the widest row and closing the tracking appears to widen it. A word carries its own spacing and has no such problem. 272 px to 170 against a constant 170."},
+
+{fam:"typ",code:"TYP-08",t:"The weight that lands",demo:"weight",src:"font-weight 300 to 800",
+ a:"The sentence arrives light and gains weight. What the render says, and the first version of this entry denied, is that the room it takes grows with it.",
+ b:"A weight on the line. On a family with real weights it interpolates in steps; on a variable face it is continuous. Either way the advance widths change with it, which is a layout problem and not the family's: on a long line the sentence rewraps halfway through the animation. This demo uses two words so the ink change is visible without the composition redoing itself. On a real line you either keep it short or lock the width.",
+ c:"300 to 800 over 48 frames, and the first word goes from roughly 150 px to 168 — about 12 per cent wider. The second half is at 800 from the first frame, which is how most sentences arrive when nobody decided otherwise.",
+ d:"demo-check.py reads the computed weight through the entry, 300 rising to 800 against a constant 800, and measures the width along with it. The width is not a failure condition, it is the finding: it grows, and the entry that claimed otherwise was corrected by looking at the render rather than by arguing."},
+
+{fam:"typ",code:"TYP-09",t:"The companion, on another axis",demo:"side",src:"a rotated secondary line",
+ a:"The main sentence is never alone in the references: a small line runs up the side, rotated, in spaced capitals — a date, a category, an order number. It does not compete, because it is on a different axis: the eye takes it in without having to read it first.",
+ b:"Rotated -90 degrees against its own left edge, at a fifth of the body size, with tracking opened right up. The rotation is the point and not the decoration: the same words set flat under the sentence become a subtitle, and a subtitle is a second thing to read.",
+ c:"-90 degrees, 1.5cqw against 7.4 for the main line, 0.22em of tracking, uppercase. The second half sets it flat and centred underneath, which is the case worth looking at.",
+ d:"demo-check.py measures the angle of the companion's rendered box and its distance from the main line's reading axis. Rotated it is at 90 degrees and off to the side; flat it is at zero and directly under, which is where a subtitle goes."},
+
+{fam:"typ",code:"TYP-10",t:"The sentence on the plane",demo:"plane",src:"the slab's own perspective",
+ a:"The typography lives in the same perspective as the slab instead of sitting on the frame. It is the entry that ties this family to the rest of the repo: if the film is an inclined object seen by a camera, a sentence lying flat on the frame comes from a different film.",
+ b:"The line moves inside a plane that carries the slab's yaw and pitch, in the same perspective container. It is the same element with the same body: the only difference between the two halves is the transform on its parent.",
+ c:"yaw -30 closing to -19, pitch 3, inside the range the slab's own poses cover — UIMockup starts at -18. At the slab's closing angles the foreshortening is real and invisible: the two ends of the line differ by a couple of per cent, which measures but does not read. The second half sets the plane flat, which is what type does when nobody puts it anywhere.",
+ d:"demo-check.py compares the rendered width of the first word against the last: on the plane they differ, because perspective makes the near end larger, and flat they are the same. It is the cheapest test for whether type is in the room or on the glass."},
+
 {fam:"giu",code:"GIU-04",t:"Monotonic derivative",demo:"chain",src:"the three boundary poses",
  a:"Across the whole chain yaw, pitch and push always move the same way. Not fussiness: the eye follows the derivative of the movement, and a reversal at a join reads as a cut even when the pixels of the two frames match.",
  b:"The boundary poses live in one module, so the monotonicity is checked by reading three constants instead of opening three scenes. The graph in the corner is exactly that: the three quantities across the chain, with the two joins marked.",

From d90be9e0b65b4e48e5669a3c090aefe7446e7d20 Mon Sep 17 00:00:00 2001
From: Antonino Cuzzola <trony2712@Host-27DCF97C.homenet.telecomitalia.it>
Date: Fri, 4 Sep 2026 19:13:03 +0200
Subject: [PATCH 2/3] TYP-08: quanto cresce la larghezza e' affare del font,
 non della voce

Il banco chiedeva una crescita del 4 per cento, che e' il numero di questa
macchina. Sul Linux della CI la stessa animazione ne fa 3,6, perche' il font di
sistema e' un altro e spende meno sul peso. Una soglia su quel valore misura
quali font sono installati, non cosa fa il peso: adesso il banco chiede che la
larghezza CRESCA, e la voce riporta tutti e due i numeri.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 scripts/demo-check.py    | 6 +++++-
 showcase/grammatica.html | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/scripts/demo-check.py b/scripts/demo-check.py
index 1f23b57..0e4624b 100755
--- a/scripts/demo-check.py
+++ b/scripts/demo-check.py
@@ -470,7 +470,11 @@ def wgt(code, f):
         }""", [code, f])
     p_a, p_b = wgt("TYP-08", 16), wgt("TYP-08", 66)
     p_c = wgt("TYP-08", 130)
-    check("TYP-08", p_a[0] < 380 and p_b[0] > 760 and p_b[1] > p_a[1] * 1.04 and p_c[0] > 760,
+    # QUANTO cresca la larghezza e' affare della famiglia, non della voce: su
+    # questa macchina l'11 per cento, sul Linux della CI il 3,6. Il banco chiede
+    # che cresca, non di quanto - una soglia sul valore misurerebbe il font
+    # installato sulla macchina invece del comportamento del peso.
+    check("TYP-08", p_a[0] < 380 and p_b[0] > 760 and p_b[1] > p_a[1] * 1.025 and p_c[0] > 760,
           "peso da %.0f a %.0f, e la prima parola da %.0f a %.0f px; nella seconda meta' resta a %.0f"
           % (p_a[0], p_b[0], p_a[1], p_b[1], p_c[0]))
 
diff --git a/showcase/grammatica.html b/showcase/grammatica.html
index 8e74c2d..b36e1c8 100644
--- a/showcase/grammatica.html
+++ b/showcase/grammatica.html
@@ -1878,8 +1878,8 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
 {fam:"typ",code:"TYP-08",t:"The weight that lands",demo:"weight",src:"font-weight 300 to 800",
  a:"The sentence arrives light and gains weight. What the render says, and the first version of this entry denied, is that the room it takes grows with it.",
  b:"A weight on the line. On a family with real weights it interpolates in steps; on a variable face it is continuous. Either way the advance widths change with it, which is a layout problem and not the family's: on a long line the sentence rewraps halfway through the animation. This demo uses two words so the ink change is visible without the composition redoing itself. On a real line you either keep it short or lock the width.",
- c:"300 to 800 over 48 frames, and the first word goes from roughly 150 px to 168 — about 12 per cent wider. The second half is at 800 from the first frame, which is how most sentences arrive when nobody decided otherwise.",
- d:"demo-check.py reads the computed weight through the entry, 300 rising to 800 against a constant 800, and measures the width along with it. The width is not a failure condition, it is the finding: it grows, and the entry that claimed otherwise was corrected by looking at the render rather than by arguing."},
+ c:"300 to 800 over 48 frames. The first word grows 11 per cent here and 3.6 in CI, on the same page: how much a family spends on weight is the family's business, and that difference is the reason you cannot assume a number. The second half is at 800 from the first frame, which is how most sentences arrive when nobody decided otherwise.",
+ d:"demo-check.py reads the computed weight through the entry, 300 rising to 800 against a constant 800, and measures the width along with it. The width is not a failure condition, it is the finding: it grows, and the entry that claimed otherwise was corrected by looking at the render rather than by arguing. The bench asks that it grow and not by how much — a threshold on the amount would be measuring which fonts are installed rather than what weight does."},
 
 {fam:"typ",code:"TYP-09",t:"The companion, on another axis",demo:"side",src:"a rotated secondary line",
  a:"The main sentence is never alone in the references: a small line runs up the side, rotated, in spaced capitals — a date, a category, an order number. It does not compete, because it is on a different axis: the eye takes it in without having to read it first.",

From 1f9bdb95d922ecd08fd2c2b1e2c2a43bd4b10edd Mon Sep 17 00:00:00 2001
From: Antonino Cuzzola <trony2712@Host-27DCF97C.homenet.telecomitalia.it>
Date: Fri, 4 Sep 2026 19:31:12 +0200
Subject: [PATCH 3/3] Lo stacco a meta' ciclo: il banco smette di indovinare e
 la demo glielo dichiara

Restava un difetto vero, ed e' quello che si vedeva scorrendo il sito: meta'
delle voci mostrano il caso giusto e poi quello sbagliato, e nel passaggio fra i
due possono ripartire da capo. E' lo stesso stacco della giunta di ciclo, in un
altro punto.

Cercarlo da solo non aveva funzionato, e l'avevo scritto come un limite: uno
stacco e una DISSOLVENZA si somigliano troppo. Contando i pixel sopra soglia una
dissolvenza lineare fa picco a meta' strada, dove la maggior parte dei pixel
attraversa la soglia tutti insieme, e il banco segnalava come stacco l'uscita di
campo di una riga di testo. Con la differenza media il picco sparisce ma la
misura diventa cosi' sensibile da segnalare tutto.

La soluzione non e' stata una misura piu' furba: e' stata smettere di indovinare.
Ogni demo a due meta' DICHIARA il fotogramma in cui cambia, con `half`, e il
banco va a guardare li'. E' lo stesso patto che `seamAfter` fa in catalog.json -
la scena dice dove sta la giunta e il banco la misura - e vale per la stessa
ragione: una giunta dichiarata si misura esattamente, una da indovinare no.

Puntato sui venti fotogrammi dichiarati ne ha trovata una sola ancora aperta, ed
era proprio quella che si notava: CUR-03 cambiava 547 pixel in un fotogramma
contro zero nei vicini, perche' la risposta al clic restava li' finche' la meta'
non finiva e poi spariva di colpo. Adesso si RISOLVE - la lavorazione finisce,
che e' quello che farebbe l'app - e non e' un riavvolgimento: nessuno vede la
riga scriversi all'indietro.

Il controllo negativo e' CHR-02 rimessa a ripartire dal vuoto, cioe' com'era
prima dell'orologio virtuale.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .github/workflows/showcase.yml | 16 ++++++++++
 README.md                      | 28 +++++++++++++-----
 scripts/loop-close.py          | 54 ++++++++++++++++++++++------------
 showcase/grammatica.html       | 54 +++++++++++++++++++---------------
 4 files changed, 102 insertions(+), 50 deletions(-)

diff --git a/.github/workflows/showcase.yml b/.github/workflows/showcase.yml
index 5bd19a7..f976771 100644
--- a/.github/workflows/showcase.yml
+++ b/.github/workflows/showcase.yml
@@ -303,6 +303,22 @@ jobs:
             cat /tmp/gl.log >&2; exit 1; }
           echo "loop-close.py boccia un ciclo che non si chiude, come deve."
 
+          # E deve bocciare anche uno stacco IN MEZZO al ciclo: si rimette CHR-02
+          # a ripartire dal vuoto nella seconda meta', cioe' com'era prima
+          # dell'orologio virtuale. E' il difetto che si vedeva scorrendo il sito.
+          sed 's/var second=f>=125, q=vtime(second?f-125:f,125,86,14);/var second=f>=125, q=second?f-125:f;/' \
+            showcase/dist/grammatica.html > /tmp/guasta-mezzo.html
+          if cmp -s showcase/dist/grammatica.html /tmp/guasta-mezzo.html; then
+            echo "la copia guasta di mezzo e' identica all'originale: la sed non ha trovato niente." >&2
+            exit 1
+          fi
+          rc=0; ./scripts/loop-close.py /tmp/guasta-mezzo.html > /tmp/gm.log 2>&1 || rc=$?
+          [ "$rc" != 0 ] || { echo "loop-close.py promuove una meta' che riparte da capo." >&2; cat /tmp/gm.log >&2; exit 1; }
+          grep -q 'CHR-02' /tmp/gm.log || {
+            echo "loop-close.py boccia la copia guasta ma non nomina CHR-02:" >&2
+            cat /tmp/gm.log >&2; exit 1; }
+          echo "loop-close.py boccia anche uno stacco in mezzo al ciclo."
+
       # I render restano scaricabili dalla run anche quando il deploy non parte,
       # cosi' su una PR si guarda il video invece di fidarsi del diff.
       - uses: actions/upload-artifact@v4
diff --git a/README.md b/README.md
index 4b277ab..623967e 100644
--- a/README.md
+++ b/README.md
@@ -140,13 +140,27 @@ counted twice. The question that works is simpler: **is the last frame one step
 away from the first, or somewhere else entirely?** Compare the wrap against a
 normal one-frame step taken at the same place in the loop.
 
-It measures the wrap and *not* the cuts in the middle, and that is a real limit
-rather than an oversight. No metric I tried separates a cut from a **fade**.
-Counting pixels over a threshold, a linear fade spikes halfway through — that is
-where most pixels cross at once — so the bench flagged a line of text leaving the
-frame, which is the most continuous thing on the page. With a mean difference the
-spike goes away and the measure becomes so sensitive it flags everything. The
-mid-loop cut in `CHR-02` was found by looking, not by measuring.
+It measures the cut in the middle too, and getting there took giving up on being
+clever. Half the entries show the right case and then the wrong one, and in the
+handover between the two they can restart from scratch — the same cut, somewhere
+else in the loop. Hunting for it did not work: a cut and a **fade** look too much
+alike. Counting pixels over a threshold, a linear fade spikes halfway through —
+that is where most pixels cross at once — so the bench flagged a line of text
+leaving the frame, which is the most continuous thing on the page. With a mean
+difference the spike goes away and the measure becomes so sensitive it flags
+everything.
+
+The answer was not a smarter metric, it was to stop guessing: every two-part demo
+**declares** the frame it changes on, and the bench looks there. It is the same
+bargain `seamAfter` strikes in `catalog.json` — the scene says where the join is
+and the bench measures it — and it holds for the same reason: a declared join can
+be measured exactly, a guessed one cannot.
+
+Pointed at the declared frames it found exactly one survivor, and it was the one
+being reported: `CUR-03` changed 547 pixels in a single frame against zero in its
+neighbours, because the answer to the click sat there until the half ran out and
+then vanished. It resolves now instead — the work finishes, which is what the app
+would do — and that is not a rewind: nobody sees the line write itself backwards.
 
 One more defect, and it was the one that showed. `TYP-02` grew its keyword by
 changing its font size inside a single flex line — and changing the size changes
diff --git a/scripts/loop-close.py b/scripts/loop-close.py
index 61f21f3..2d5d620 100755
--- a/scripts/loop-close.py
+++ b/scripts/loop-close.py
@@ -43,20 +43,23 @@
 che si accende poche decine. Una soglia in pixel assoluti boccerebbe le prime e
 promuoverebbe le seconde.
 
-QUESTO BANCO MISURA SOLO LA GIUNTA DEL CICLO, e non gli stacchi in mezzo. Ci ho
-provato, e non sono riuscito a tarare la cosa: uno stacco a meta' ciclo e' lo
-stesso difetto in un altro punto - CHR-02 faceva sparire una board intera in un
-fotogramma - ma nessuna delle misure che ho provato distingue uno stacco da una
-DISSOLVENZA. Contando i pixel sopra una soglia, una dissolvenza lineare produce
-un picco a meta' strada, dove la maggior parte dei pixel attraversa la soglia
-tutti insieme, e il banco segnalava come stacco l'uscita di campo di una riga di
+E ANCHE LA GIUNTA IN MEZZO, ma solo perche' la demo la dichiara. Meta' delle
+voci mostrano il caso giusto e poi quello sbagliato, e nel passaggio fra i due
+possono ripartire da capo azzerando tutto: e' lo stesso stacco, in un altro
+punto del ciclo.
+
+Cercarlo da soli non ha funzionato. Uno stacco e una DISSOLVENZA si somigliano
+troppo: contando i pixel sopra una soglia, una dissolvenza lineare produce un
+picco a meta' strada - dove la maggior parte dei pixel attraversa la soglia tutti
+insieme - e il banco segnalava come stacco l'uscita di campo di una riga di
 testo, che e' la cosa piu' continua che ci sia. Con la differenza media il picco
-sparisce ma la misura diventa cosi' sensibile che segnala tutto, e il pavimento
-che separerebbe le due cose non l'ho trovato.
+sparisce ma la misura diventa cosi' sensibile che segnala tutto.
 
-Quindi la giunta del ciclo la misura, e gli stacchi in mezzo restano da trovare
-a mano. E' meno di quello che serve, ed e' meglio di un verdetto che non regge:
-lo stacco interno di CHR-02 e' stato trovato guardando, non misurando.
+La soluzione non e' stata una misura piu' furba, e' stata smettere di indovinare:
+ogni demo a due meta' DICHIARA il fotogramma in cui cambia, con `half`, e il
+banco va a guardare li'. E' lo stesso patto di `seamAfter` in catalog.json - la
+scena dice dove sta la giunta e il banco la misura - e vale la stessa ragione:
+una giunta dichiarata si puo' misurare esattamente, una da indovinare no.
 
 Uso:  ./scripts/loop-close.py [pagina.html]
 """
@@ -111,7 +114,7 @@ def shot(st, i, f):
     def d(a, b):
         return sum(1 for x, y in zip(a, b) if abs(x - y) > DIFF)
 
-    print("%-8s %6s %10s %10s %9s" % ("voce", "dur", "passo ai capi", "giunta", "rapporto"))
+    print("%-8s %6s %10s %10s %9s %8s %9s" % ("voce", "dur", "passo capi", "giunta", "rapp.", "in mezzo", "rapp."))
     for i, c in enumerate(codes):
         st = stages[i]
         st.scroll_into_view_if_needed()
@@ -125,18 +128,31 @@ def d(a, b):
         ratio = wrap / passo if passo else (999.0 if wrap > IGNORA else 0.0)
 
         bad = wrap > IGNORA and ratio > SOGLIA
-        print("%-8s %6d %10d %10d %8.1fx%s" % (c, dur, passo, wrap, ratio, "   STRAPPA" if bad else ""))
-        if bad:
+
+        # La giunta interna, dove la demo dice che c'e'.
+        half = pg.evaluate("(i)=>document.querySelectorAll('.stage')[i].__it.mv.half || 0", i)
+        mid, rmid, bad_mid = 0, 0.0, False
+        if half:
+            mid = d(shot(st, i, half - 1), shot(st, i, half))
+            vic = max(d(shot(st, i, half - 4), shot(st, i, half - 3)),
+                      d(shot(st, i, half + 2), shot(st, i, half + 3)))
+            rmid = mid / vic if vic else (999.0 if mid > IGNORA else 0.0)
+            bad_mid = mid > IGNORA and rmid > SOGLIA
+
+        nota = "   STRAPPA" if bad else ("   STACCA a f%d" % half if bad_mid else "")
+        print("%-8s %6d %10d %10d %8.1fx %8d %8.1fx%s"
+              % (c, dur, passo, wrap, ratio, mid, rmid, nota))
+        if bad or bad_mid:
             fails.append((c, wrap, ratio))
 
     br.close()
 
 print()
 if fails:
-    print("cicli che strappano a ogni giro:", ", ".join(c for c, _, _ in fails), file=sys.stderr)
-    print("L'ultimo fotogramma di queste demo non somiglia al primo, quindi a ogni", file=sys.stderr)
-    print("giro c'e' uno stacco. Non legge come una demo che riparte, legge come", file=sys.stderr)
-    print("un sito che scatta.", file=sys.stderr)
+    print("cicli con uno stacco:", ", ".join(c for c, _, _ in fails), file=sys.stderr)
+    print("O l'ultimo fotogramma non somiglia al primo, o la seconda meta' riparte", file=sys.stderr)
+    print("da capo invece di continuare la prima. In tutti e due i casi non legge", file=sys.stderr)
+    print("come una demo che va avanti, legge come un sito che scatta.", file=sys.stderr)
     raise SystemExit(1)
 print("VERDETTO: tutte le dimostrazioni chiudono il proprio ciclo.")
 print("L'ultimo fotogramma vale quanto un fotogramma qualsiasi rispetto al primo.")
diff --git a/showcase/grammatica.html b/showcase/grammatica.html
index b36e1c8..292fe61 100644
--- a/showcase/grammatica.html
+++ b/showcase/grammatica.html
@@ -396,7 +396,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
               <tr><td>focus-sharpness.sh</td><td>A slab that stopped being DOM: the text falls apart once the camera is on top of it</td><td class="n">2.09× against 1.03× on the fixture</td></tr>
               <tr><td>rest-point.sh</td><td>A scene still moving where the next one has to attach. Its thresholds were absolute to begin with, tuned on this machine, and every one of them failed the move to Linux</td><td class="n">edges under 30% of mid-scene</td></tr>
               <tr><td>click-gap.sh</td><td>A press and its consequence fused onto one frame, or so far apart that it stops reading as a consequence and starts reading as lag</td><td class="n">f271 and f276, five frames</td></tr>
-              <tr><td>loop-close.py</td><td>A demo whose loop tears every pass. Ten of thirty were one-way animations, so the last frame had nothing to do with the first — on a page about not cutting. It measures the wrap and not the cuts in the middle, because no metric tried could separate a cut from a fade</td><td class="n">10 torn, now 0</td></tr>
+              <tr><td>loop-close.py</td><td>A demo whose loop tears every pass, or whose second half restarts from scratch instead of continuing the first. Hunting for the mid-loop cut did not work — a cut and a fade look alike to every metric tried — so each two-part demo declares the frame it changes on and the bench looks there, which is the bargain <code>seamAfter</code> already strikes for the scenes</td><td class="n">11 torn, now 0</td></tr>
               <tr><td>tempo.py</td><td>A scene that was shortened rather than sped up. If the beats scale, frame <i>f</i> of the short render is frame <i>f/k</i> of the long one; compared that way the two differ by 287 px against 5379 without normalising. The residual is not slop — it is the signature of the thresholds that deliberately did not scale</td><td class="n">18.7× advantage, 4 required</td></tr>
               <tr><td>fixture-trim.sh</td><td>Measures nothing. Truncates a scene to the short duration instead of retiming it, which is what lowering the duration produced before any of this existed</td><td class="n">120 frames, beats left in place</td></tr>
               <tr><td>contrast-floor.py</td><td>Content attenuated so far that it stops being a plane behind and becomes dirt on the background. Two wrong versions before this one: the first measured the composer placeholder, which is deliberately faint and sits at 2.93:1 before any attenuation at all; the second measured the right content in a place whose position depends on how the messages wrap, and on Linux the crop landed on empty background</td><td class="n">4.17:1, 3.84 on Linux, against 1.71</td></tr>
@@ -837,7 +837,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
    vede, e una voce che promette di piu' di quello che mostra e' la cosa da
    non fare. Da vicino gli stessi numeri, non gonfiati, ne valgono quattordici.
    Il carrello del film si fa spinti dentro, non da fuori. */
-M.truck={dur:220,
+M.truck={dur:220, half:110,
  init:function(S){
    depth(S);
    /* La parallasse si misura una volta, sui due estremi della corsa, con e
@@ -891,7 +891,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
      +(back(f,132,26)?RET:""));
  }};
 
-M.attn={dur:250,draw:function(f,S){
+M.attn={dur:250, half:125,draw:function(f,S){
   pose(S,END);
   var a=E.inout(cl((f-16)/40)), b=E.inout(cl((f-120)/40)), c=E.inout(cl((f-206)/40));
   var o=1-0.38*a-0.37*b; o=o+(1-o)*c;
@@ -920,7 +920,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
    S.hud("u "+u.toFixed(3)+"   max overshoot 7.5%   in red, the same time on a straight line at constant speed");
  }};
 
-M.hesit={dur:250,
+M.hesit={dur:250, half:125,
  init:function(S){ S.composer.style.opacity="1"; S.ctext.textContent=PROMPT;
    S.stream.style.opacity="1"; S.stream.textContent="Ho la lastra ferma nella posa finale, con la board popolata e il pannello aperto sulla card attiva. La camera sta a yaw -9 e pitch 2,5, quindi la scena dopo entra da lì senza stacco. Dimmi durata e direzione di ingresso e ti do il piano dei frame.";
    S.msgu0.style.opacity="1"; S.msgu0.textContent="Fammi vedere la board con la card attiva.";
@@ -941,7 +941,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
      : "parked from f50 · wait 20f · press f70   now: "+(q<50?"approach":(q<70?"waiting "+(q-50)+"f":(q<80?"press":"release"))));
  }};
 
-M.click={dur:230,
+M.click={dur:230, half:115,
  init:function(S){ S.composer.style.opacity="1"; S.ctext.textContent=PROMPT;
    S.msgu.style.opacity="1"; S.msgu.textContent="Ripartiamo dalla board. Cosa hai pronto?"; },
  draw:function(f,S){
@@ -949,10 +949,16 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
    var second=f>=115, q=second?f-115:f, down=q>=48&&q<58;
    S.cur.style.opacity="1"; S.cur.style.left="1878px"; S.cur.style.top=(1116+(down?7:0))+"px";
    S.send.className="send"+(down&&!second?" press":"");
-   var eff=second?0:cl((q-50)/12);
+   /* La risposta arriva e poi SI RISOLVE, invece di restare li' fino a che la
+      meta' finisce e sparire di colpo. Prima era cosi', ed era l'unico stacco
+      secco rimasto in tutta la pagina: 547 pixel in un fotogramma contro zero
+      nei vicini, cioe' il "check" che si vedeva scorrendo il sito.
+      Non e' un riavvolgimento - nessuno vede la riga scriversi all'indietro -
+      e' la lavorazione che finisce, che e' quello che fa l'app. */
+   var eff=second?0:(cl((q-50)/12)*(1-E.inout(cl((q-88)/14))));
    S.stream.style.opacity=eff.toFixed(3);
-   S.stream.textContent=(!second&&q>=50)?"In lavorazione":"";
-   S.stream.style.transform="translateY("+((1-E.out(eff))*26).toFixed(1)+"px)";
+   S.stream.textContent=(!second&&q>=50&&q<104)?"In lavorazione":"";
+   S.stream.style.transform="translateY("+((1-E.out(cl((q-50)/12)))*26).toFixed(1)+"px)";
    S.hud(second
      ? "the same press, with nothing answering: no pressed state, no line arriving. The hand is talking to a picture"
      : "press f48 · consequence f50 · 2 frames apart"+(q>=48&&q<50?"   ← in between right now":""));
@@ -1024,7 +1030,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
   S.hud("128 ms · back out, 7.5% overshoot · tabular-nums, so the width never changes and nothing reflows");
 }};
 
-M.insert={dur:250,
+M.insert={dur:250, half:125,
  init:function(S){
    var d=el("div","card","left:"+colX(0)+"px;top:"+cardY(COLUMNS[0].cards,1)+"px;width:"+COL_W+"px;height:"+CARD_H+"px;opacity:0;z-index:5");
    var r1=el("div","r1");
@@ -1078,7 +1084,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
    regole. Qui il cambiamento e' la card attiva che si posa, e tutto il
    resto della board si assesta intorno: sei card a sei distanze diverse in
    due dimensioni, dove i due ordini finalmente divergono. */
-M.reflow={dur:250,
+M.reflow={dur:250, half:125,
  init:function(S){
    depth(S);
    var a=C(S,1,0), ox=colX(1)+COL_W/2, oy=a.y+ACTIVE_CARD_H/2;
@@ -1120,7 +1126,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
      : "delay = distance from the change / 1400 × 22f, "+S.rfSpan+"f of spread: it opens outward from the card, and it reads as a space");
  }};
 
-M.prop={dur:260,draw:function(f,S){
+M.prop={dur:260, half:130,draw:function(f,S){
   pose(S,{yaw:-9,pitch:2.5,z:60,x:0,y:0});
   var second=f>=130, q=second?f-130:f;
   var fn=second?30:35, fp=second?30:41;
@@ -1137,7 +1143,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
     : "card f30 → count f35 → panel f41.  The two delays are the whole of what reads as cause");
 }};
 
-M.thick={dur:200,draw:function(f,S){
+M.thick={dur:200, half:100,draw:function(f,S){
   var t=E.sine(f<100?f/100:(200-f)/100), off=f>=100;
   pose(S,{yaw:-30+40*t,pitch:3,z:-300,x:0,y:0});
   S.edge.style.opacity=off?"0":"1";
@@ -1164,7 +1170,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
     +"   seam.sh: 557 px against 37,103 for the control cut, 67×"+(f>=210?RET:""));
 }};
 
-M.rest={dur:260,draw:function(f,S){
+M.rest={dur:260, half:130,draw:function(f,S){
   var second=f>=130, q=second?f-130:f, ez=second?E.lin:E.inout;
   function s(u){ return ez(cl(u<65?u/64:(129-u)/64)); }
   var t=s(q), v=Math.abs(t-s(q-1))*100;
@@ -1182,7 +1188,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
 }};
 
 /* --- CAM-06: il solo punto del quadro che non scappa sotto una spinta in Z --- */
-M.centre={dur:210,
+M.centre={dur:210, half:105,
  init:function(S,stage){
    /* La croce blu sta sul centro della card attiva, in coordinate lastra. */
    var c=C(S,1,0);
@@ -1229,7 +1235,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
 var TLINE = ["Real", "UI,", "not", "a", "drawing", "of", "UI."];
 var TCHARS = TLINE.join(" ").length;
 
-M.dwell={dur:187, kind:"type",
+M.dwell={dur:187, half:104, kind:"type",
  init:function(T){ T.words(TLINE); },
  draw:function(f,T){
    /* Due meta': la prima tiene la frase 56 frame da ferma, la seconda 29.
@@ -1262,7 +1268,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
 var TCLAIM = ["One", "shot.", "Forty-eight", "seconds."];
 var TSHORT = ["One", "shot."];
 
-M.big={dur:220, kind:"type",
+M.big={dur:220, half:110, kind:"type",
  init:function(T){
    T.words(TCLAIM);
    /* LA PAROLA CHIAVE STA SU UNA RIGA SUA, e cresce con una TRASFORMAZIONE.
@@ -1293,7 +1299,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
  }};
 
 /* --- TYP-03: colore solo sulla parola chiave --- */
-M.only={dur:200, kind:"type",
+M.only={dur:200, half:100, kind:"type",
  init:function(T){ T.words(TCLAIM); },
  draw:function(f,T){
    var second=f>=100, q=second?f-100:f;
@@ -1314,7 +1320,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
 var TA = ["Every", "join", "is", "measured."];
 var TB = ["Every", "pose", "is", "measured."];
 
-M.stays={dur:260, kind:"type",
+M.stays={dur:260, half:130, kind:"type",
  init:function(T){
    T.words(TA);
    /* Le due parole che si scambiano stanno nella STESSA casella, una nel flusso
@@ -1388,7 +1394,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
    che una maschera non muove il testo: la parola e' gia' al suo posto e viene
    solo scoperta. Una dissolvenza invece la fa comparire, e comparire e'
    sempre meno preciso che essere scoperti. */
-M.mask={dur:230, kind:"type",
+M.mask={dur:230, half:115, kind:"type",
  init:function(T){ T.words(TLINE); T.clip(); },
  draw:function(f,T){
    var second=f>=115, q=second?f-115:f;
@@ -1412,7 +1418,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
  }};
 
 /* --- TYP-06: lettera per lettera, o parola per parola ----------------- */
-M.letters={dur:250, kind:"type",
+M.letters={dur:250, half:125, kind:"type",
  init:function(T){
    /* Le lettere sono span dentro lo span della parola: cosi' lo scaglionamento
       fine non tocca la composizione della riga, che resta quella delle parole. */
@@ -1446,7 +1452,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
  }};
 
 /* --- TYP-07: la spaziatura che si chiude ------------------------------ */
-M.track={dur:220, kind:"type",
+M.track={dur:220, half:110, kind:"type",
  /* FRASE CORTA, e non e' un vezzo: a 0,225em di spaziatura la frase lunga
     andava a capo su tre righe e a spaziatura chiusa su due, quindi durante
     l'animazione la composizione si rifaceva. La spaziatura E' una proprieta' di
@@ -1470,7 +1476,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
 /* --- TYP-08: il peso che atterra -------------------------------------- */
 
 
-M.weight={dur:210, kind:"type",
+M.weight={dur:210, half:105, kind:"type",
  init:function(T){ T.words(TSHORT); },
  draw:function(f,T){
    var second=f>=105, q=second?f-105:f;
@@ -1496,7 +1502,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
    un numero d'ordine. Non compete con la frase perche' sta su un ALTRO ASSE:
    l'occhio la vede senza doverla leggere prima. Messa piatta sotto la riga
    principale diventa un sottotitolo, cioe' una seconda cosa da leggere. */
-M.side={dur:230, kind:"type",
+M.side={dur:230, half:115, kind:"type",
  init:function(T){
    T.words(TCLAIM);
    T.side("Frame-locked · 1460 frames");
@@ -1531,7 +1537,7 @@ <h1>Thirty-six movements,<br />no cuts.</h1>
    appoggiata sul quadro. E' la voce che lega questa famiglia al resto del
    repo: se il film e' un oggetto inclinato ripreso da una camera, una frase
    piatta sul fotogramma viene da un altro film. */
-M.plane={dur:250, kind:"type",
+M.plane={dur:250, half:125, kind:"type",
  init:function(T,stage){
    T.words(TCLAIM);
    /* Corpo piu' piccolo che nelle altre voci: una riga che riempie il quadro