La tipografia si legge mentre gira: niente parole sovrapposte, niente frasi che spariscono

[antoninobig-beep]

Sul sito la sezione tipografica aveva ancora tre difetti visibili: cose che compaiono e scompaiono, cose che scattano, scritte una sopra l'altra. Nessun banco li vedeva, perché demo-check.py misura la tesi di ogni voce e loop-close.py la giunta del ciclo.

Il banco nuovo: scripts/type-check.py

Per ogni fotogramma di ogni voce tipografica, a più larghezze, legge il DOM reso (non i pixel, dove una dissolvenza e uno stacco si somigliano troppo) e controlla quattro cose:

• copertura: nessun testo visibile sopra un altro testo o sopra la HUD;
• quadro: nessun testo fuori dal palco;
• parola intera: in ogni fotogramma almeno una parola si vede tutta;
• scatti: niente cambia di colpo in un fotogramma mentre si vede (quanto se ne vede, posizione, colore);
• fermo: col movimento ridotto emulato, il fotogramma unico che la pagina mostra è uguale al precedente e al successivo.

Sulla pagina pubblicata ora boccia 10 voci su 10:

• TYP-02 copre la seconda riga per 59 fotogrammi ed esce dal quadro per 63;
• in TYP-04 "pose" sta sopra "is" per 118 fotogrammi;
• TYP-03 cambia colore in un fotogramma;
• in tutte e dieci ci sono tratti senza niente di intero sullo schermo.

Su questo branch le passa tutte a 390, 768, 1440 e 2560 px. Passano anche con soglie molto più strette.

Cosa è cambiato nelle voci

La regola della parola intera è quella che ha cambiato le demo. Sfalsare uscite e ingressi teneva il quadro fuori dal nero, ma le frasi sparivano lo stesso, in onda: in TYP-01 per mezzo secondo restava un quinto della frase, e in TYP-04 la parola più visibile arrivava al 23%.

• TYP-01: due righe di 29 caratteri si passano il turno dentro una finestra che ritaglia. Le soste restano 56 e 35 fotogrammi fermi, cioè 15,5 contro 24,9 c/s. Ogni riga è spezzata in due a mano: lasciate andare a capo da sole, una stava su una riga e l'altra su due, e a metà corsa nessuna aveva una riga intera nella finestra.

• TYP-04: ogni parola è una casella con due copie che scorrono insieme. La coppia adesso è click / drag (200,6 e 200,9 px a corpo 100): join in una cella larga quanto pose (154 contro 215) galleggiava in un vuoto, proprio nel caso giusto.

• TYP-05 e TYP-06: "Real UI," resta in campo mentre il resto della frase arriva. I conteggi diventano 16 momenti d'ingresso contro 5.

• TYP-09: la didascalia stesa non scende sotto i 34 px. Sul telefono copriva il contatore dei fotogrammi per 130 fotogrammi su 230.

• Rotazioni e uscite in seno invece che in cubica: a metà corsa una riga di TYP-01 passava il bordo in meno di tre fotogrammi, e a 30 fps quello è un salto.

• Motore: il fotogramma si legge dal timestamp di requestAnimationFrame, non da performance.now() dentro il callback. In Chrome headless i fotogrammi tenuti per uno o tre refresh invece di due passano dal 3,3% allo 0,7%.

• Movimento ridotto: con prefers-reduced-motion (acceso su molti telefoni) ogni demo mostra un fotogramma solo, ed era il 55% del ciclo per tutte. Sulla tipografia cadeva a metà di un passaggio: una riga tagliata dalla finestra in TYP-01, parole a mezza dissolvenza in TYP-05 e TYP-06, la parola chiave ancora grande in TYP-02 sotto la scritta che la diceva tornata normale. Ogni demo può dichiarare un fotogramma fermo in still, e le dieci voci tipografiche lo fanno.

I testi delle voci, la tabella dei banchi e il README sono aggiornati con i numeri misurati.

CI

• type-check.py gira a 390 e 1440 px (più un passaggio col movimento ridotto), con cinque copie guaste che deve bocciare nominando voce e motivo:
  • parola chiave scalata dal centro (copertura);
  • frase che svanisce mentre prende peso (parola intera);
  • colore acceso in un fotogramma (scatto);
  • didascalia di nuovo a 4cqw sul telefono (HUD);
  • fotogramma fermo di TYP-05 spostato in mezzo a una dissolvenza (movimento ridotto).
• La copia guasta di TYP-01 per demo-check.py è riscritta sulla nuova sosta: quella vecchia cercava codice che non esiste più, e la CI sarebbe fallita.
• Tutto il passo "le dimostrazioni mostrano ancora la loro tesi?" è stato eseguito in locale dall'inizio alla fine: exit 0, tutte le copie guaste bocciate.

🤖 Generated with Claude Code