Il design, dal vivo.

Ogni pagina, in cima · Terza bozza · meno di 6 min, in tutto

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 12:52 · terza bozza, meno di 6 minuti in tutto

   Intanto prepara una bozza partendo dalla mia spiega, dal mix dei 4 siti, da quello che vorrei e da quello che suggerisci tu. È un buon modo di lavorare mi pare...

   Alle 12:58 commentavo già la bozza: tutta la terza bozza, con questa animazione e altre cinque, è nata in meno di 6 minuti. Il tempo della singola animazione non si può separare.

Com'è fatta

Come funziona

Una riga verde in cima alla pagina si allunga mentre scorri e arriva in fondo quando sei in fondo. Ti dice sempre quanto manca.

Quando lavora

Si aggiorna una volta per fotogramma, solo mentre scorri.

Da dove viene

Dalla barra di ANML, uno dei quattro siti di riferimento.

Codice

18 righe di JavaScript, nessuna libreria.

Ogni pagina · Terza bozza · meno di 6 min, in tutto

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 12:52 · terza bozza, meno di 6 minuti in tutto

   Intanto prepara una bozza partendo dalla mia spiega, dal mix dei 4 siti, da quello che vorrei e da quello che suggerisci tu. È un buon modo di lavorare mi pare...

   Alle 12:58 commentavo già la bozza: tutta la terza bozza, con questa animazione e altre cinque, è nata in meno di 6 minuti. Il tempo della singola animazione non si può separare.

Com'è fatta

Come funziona

Ogni tasto ha uno spessore disegnato sotto. Quando lo premi scende di 5 pixel e lo spessore sparisce, come un tasto vero.

Tempi

Scende e risale in 0,16 secondi, con un piccolo rimbalzo.

Da dove viene

Dal «tatto» che cercavo: quello che si può toccare deve sembrarlo.

Codice

Solo CSS, nessuna riga di JavaScript.

Inizio, in apertura · Terza bozza · meno di 6 min, in tutto

Il confronto è un'idea mia, l'interruttore l'ha proposto l'AI

I prompt, con l'ora

1. 12:52 · terza bozza, meno di 6 minuti in tutto

   Intanto prepara una bozza partendo dalla mia spiega, dal mix dei 4 siti, da quello che vorrei e da quello che suggerisci tu. È un buon modo di lavorare mi pare...

   Alle 12:58 commentavo già la bozza: tutta la terza bozza, con questa animazione e altre cinque, è nata in meno di 6 minuti. Il tempo della singola animazione non si può separare.

2. 25 ottobre, 19:54 → 19:56 · 2 minuti

   In index, hero, la CTA «Guarda la differenza» deve attivare il toggle su Fatto Bene.

   Il tasto porta al telefono e lo accende su «Fatto bene». L'interruttore scatta quando il telefono è in vista: da telefono, dove il tasto sta sopra e il telefono sotto, il cambio si vede alla fine dello scorrimento e non prima. 2 minuti, insieme al marchio nel piede e al testo del banner dei cookie.

Com'è fatta

Come funziona

Un interruttore porta lo stesso sito da «Al risparmio» a «Fatto bene». La manopola scorre in 0,55 secondi con un rimbalzo e la versione buona entra dal basso.

Il dettaglio

Nella versione al risparmio la barra di caricamento non arriva mai in fondo: riparte ogni 6 secondi.

Dal tasto

«Guarda la differenza», in apertura, porta al telefono e lo accende su «Fatto bene» appena è in vista per almeno sei decimi.

Per chi non vede

L'interruttore dice il suo stato e la descrizione del telefono cambia con lui.

Da dove viene

L'interruttore da Don't Do Drugs, uno dei quattro riferimenti.

Codice

35 righe di JavaScript. I due telefoni sono HTML e CSS, nessuna immagine.

Inizio · Terza bozza · meno di 6 min, in tutto

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 12:52 · terza bozza, meno di 6 minuti in tutto

   Intanto prepara una bozza partendo dalla mia spiega, dal mix dei 4 siti, da quello che vorrei e da quello che suggerisci tu. È un buon modo di lavorare mi pare...

   Alle 12:58 commentavo già la bozza: tutta la terza bozza, con questa animazione e altre cinque, è nata in meno di 6 minuti. Il tempo della singola animazione non si può separare.

Com'è fatta

Come funziona

Tocchi un servizio e si apre, gli altri si chiudono: una voce aperta alla volta. Il contenuto entra dal basso in 0,55 secondi.

Con la tastiera

Ogni voce è un tasto che dice se è aperta o chiusa.

Da dove viene

Dai servizi in elenco di Isadora, uno dei quattro riferimenti.

Codice

18 righe di JavaScript.

Lavori · Terza bozza · meno di 6 min, in tutto

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 12:52 · terza bozza, meno di 6 minuti in tutto

   Intanto prepara una bozza partendo dalla mia spiega, dal mix dei 4 siti, da quello che vorrei e da quello che suggerisci tu. È un buon modo di lavorare mi pare...

   Alle 12:58 commentavo già la bozza: tutta la terza bozza, con questa animazione e altre cinque, è nata in meno di 6 minuti. Il tempo della singola animazione non si può separare.

Com'è fatta

Come funziona

I telefoni stanno come carte su un tavolo: quello al centro è dritto, i vicini si spostano di 230 pixel, ruotano di 12 gradi e rimpiccioliscono.

Come si usa

Frecce, tocco su un telefono o trascinamento di almeno 40 pixel. Si muove in 0,8 secondi.

Da dove viene

Dal sito dei CD (il progetto su A24), dove lo scroll fa ruotare i dischi.

Codice

51 righe di JavaScript.

Chi e Inizio · 2 giri · meno di 6 min, poi 20 min con il passaggio

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 12:52 · terza bozza, meno di 6 minuti in tutto

   Intanto prepara una bozza partendo dalla mia spiega, dal mix dei 4 siti, da quello che vorrei e da quello che suggerisci tu. È un buon modo di lavorare mi pare...

   Alle 12:58 commentavo già la bozza: tutta la terza bozza, con questa animazione e altre cinque, è nata in meno di 6 minuti. Il tempo della singola animazione non si può separare.

2. 25 ottobre, 02:03 → 02:23 · insieme al passaggio tra pagine

   …Le transizioni da pagina ancora non sono ok: in chi e dove ci sono molti box fotografici, compaiono prima i box e poi le foto, ad es. poi la transizione è sempre scattosa...

   In Chi il collage è già nello schermo quando la pagina arriva: si apriva mentre la pagina saliva. Ora aspetta che il passaggio finisca, poi le foto si aprono. Le foto pesano la metà, partono subito e, finché non arrivano, nel riquadro c'è una loro copia sfocata.

Com'è fatta

Come funziona

Cinque foto impilate si aprono a ventaglio quando quasi metà del collage entra nello schermo, e si richiudono quando esce. Ogni foto si sposta in 0,7 secondi. Se la pagina arriva con il passaggio, il collage aspetta che finisca.

Perché così

Si apre scorrendo, non al passaggio del mouse: funziona anche da telefono.

Da dove viene

Dal collage dietro il titolo di ANML.

Codice

14 righe di JavaScript.

In basso, fino al 25 ottobre · 7 giri · 8 + 13 + 25 + 13 + 9 + 9 + 17 min

I prompt, con l'ora

1. 17:12 → 17:20 · 8 minuti

   Il prossimo fronte è il design e partiamo dal nav che lo voglio con questo effetto dock performante stile Mac. npx shadcn@latest add @react-bits/Dock-TS-TW

   (Segue il codice d'esempio del componente Dock di React Bits, 43 righe.)

   Il componente era fatto per React: l'AI l'ha riscritto in JavaScript semplice, con gli stessi valori della molla.

2. 23 ottobre, 23:02 → 23:15 · 13 minuti

   …Poi devi guardare nelle transizioni tra pagine: tutto a scatti. Stessa cosa la fluidità del nav…

   L'AI ha filmato il passaggio tra due pagine: il dock arrivava ingrandito, si rimpiccioliva sdoppiato e poi si riallargava. Ora passa alla pagina nuova così com'è, e anche la testata resta ferma. 13 minuti, insieme ad altre correzioni di Parliamone.

3. 23 ottobre, 23:59 → 24 ottobre, 00:24 · 25 minuti

   …sono su Chrome ed anche in questo modo fa lo stesso effetto…

   L'effetto: a ogni cambio pagina il dock si rimpiccioliva e poi ricresceva. Nelle prove dell'AI non succedeva, sul mio computer sì. L'AI l'ha fatto succedere rallentando il JavaScript: se arriva dopo il primo disegno della pagina nuova, il dock nasce a riposo. Ora la misura la rimette la testata della pagina, prima del disegno. Filmando è uscito anche un lampo bianco di un fotogramma, in circa un passaggio su due: il dock non viene più fotografato a parte, e il lampo non c'è più.

4. 24 ottobre, 11:13 → 11:26 · 13 minuti

   Mi fai vedere questi cambiamenti?

   Preparando il video, l'AI ha trovato un'altra causa dello stesso effetto: appena parte il passaggio, il browser dice alla pagina vecchia che il puntatore è uscito, e il dock si sgonfiava proprio mentre veniva fotografato. Ora, quando la pagina se ne va, il dock resta com'è.

5. 24 ottobre, 11:30 → 11:39 · 9 minuti

   Io vedo più o meno come prima…

   L'AI ha provato nel mio Chrome e ha trovato un altro caso: se clicchi mentre il dock sta ancora crescendo, la foto del passaggio lo prende a metà e la pagina nuova lo mostrava già tutto cresciuto. Ora la pagina vecchia ferma il dock dov'è, e la nuova riparte da lì con la stessa velocità: il dock finisce di crescere dopo il passaggio, senza salti.

6. 24 ottobre, 11:54 → 12:03 · 9 minuti

   No…al secondo giro di click torna come prima…ma possibile tu non riesca a sistemarlo?

   La causa vera: durante il passaggio il browser attribuisce i movimenti del mouse alla pagina intera, anche sopra il dock. Bastava muovere il mouse sul dock subito dopo il clic: il dock credeva che il puntatore fosse uscito, si sgonfiava e ricresceva a passaggio finito. Le prove dell'AI non muovevano il mouse dopo il clic, per questo non lo vedevano. Ora il dock guarda le coordinate del puntatore: se è sopra il dock, l'ingrandimento lo segue.

7. 25 ottobre, 08:34 → 08:51 · 17 minuti

   Il problema è sicuramente il dock soprattutto nelle pagine inizio e servizi...ci devi guardare bene...è lì il problema secondo me...

   L'AI ha filmato il dock fotogramma per fotogramma, con la mano sopra durante il passaggio, e ha ripetuto l'arrivo decine di volte. Due cause. Circa un arrivo su cinque il dock si sgonfiava appena cominciava il passaggio e ricresceva alla fine: se il primo movimento del mouse arrivava un attimo prima del passaggio, il dock smetteva di guardare le coordinate, e subito dopo il browser gli diceva che il puntatore era uscito. Ora, finché dura il passaggio, il dock guarda solo le coordinate: nessuno sgonfiamento su 34 arrivi. Poi il vetro smerigliato: durante il passaggio il browser lo disegnava rettangolare, e alla fine gli angoli tornavano tondi di colpo. Si vedeva dove dietro il dock c'è testo o un disegno scuro, come in Inizio e Servizi. Ora è tondo anche durante.

8. 25 ottobre, 12:36 · sostituito

   …o sostituiamo il dock con un altro nav o andiamo a guardarci. Lo sostituiamo con questo, perché è quello che dà dei problemi…

   La mattina l'AI aveva misurato il dock in Safari e in Chrome, con lo stesso gesto per ogni prova. In Safari, nel passaggio tra pagine, si perdono da 2 a 14 fotogrammi per pagina, e il dock si muoveva col JavaScript a ogni fotogramma: ogni fotogramma perso era uno scatto. Al suo posto la barra a pillole, che si muove solo col CSS.

Com'era fatto

Come funziona

Ogni tasto è una molla: rigidità 150, smorzamento 12, gli stessi valori del Dock di React Bits. Il tasto sotto il puntatore passa da 48 a 72 pixel, i vicini crescono meno, lungo una curva a campana.

Al tocco

Sulla stessa pagina il tasto salta e ricade con un piccolo rimbalzo. Se porta a un'altra pagina non salta: il dock passa così com'è.

Tra le pagine

Dock e testata restano fermi mentre la pagina cambia, nei browser recenti. Il dock arriva ingrandito come l'avevi lasciato, anche se la pagina nuova è lenta, e si sgonfia quando il puntatore esce. Durante il passaggio segue la posizione del puntatore, e il vetro resta tondo.

Con la tastiera

Il tasto su cui ti trovi si ingrandisce come sotto il puntatore.

Quando si ferma

Il calcolo gira solo mentre qualcosa si muove. Con «riduci movimento» il dock resta fermo e funziona lo stesso.

Codice

288 righe di JavaScript, più 14 nella testata di ogni pagina. Nessuna libreria. Tutto tolto il 25 ottobre, con il dock.

Ogni pagina · 6 giri · 4 + 7 + 7 + 27 + 20 + 15 min

La dissolvenza l'ha proposta l'AI, l'ingresso del contenuto l'ho chiesto io

I prompt, con l'ora

1. 17:32 → 17:36 · 4 minuti

   …intanto facciamo le pagine, le riempiamo dopo. Intanto facciamole e non essere troppo indulgente ora sui contenuti, ci arriviamo. Costruisci le pagine, partendo da quanto fatto sino ad ora che mi piace…

   4 minuti per dividere il sito in pagine. La dissolvenza tra una pagina e l'altra l'ha aggiunta l'AI nello stesso giro.

2. 23 ottobre, 23:35 → 23:42 · 7 minuti

   La transizione tra pagine risulta ancora pessima...non puoi inserire un fade ed un'animazione dei contenuti ad ingresso che non faccia quegli scatti sconvenienti?

   Il primo tentativo, alle 23:02, aveva fermato dock e testata: non bastava. L'AI ha filmato il passaggio fotogramma per fotogramma: le due pagine si sovrapponevano, e con la fusione del browser per un attimo diventava tutto bianco. Ora la vecchia svanisce e poi entra il contenuto della nuova, a sezioni.

3. 24 ottobre, 11:56 → 12:03 · 7 minuti

   …si fa un'animazione di entrata per pagina dal basso all'alto…

   Il contenuto saliva di 14 pixel: non si vedeva. Ora sale di 48 pixel in sei decimi di secondo, le sezioni a cinque centesimi una dall'altra.

4. 24 ottobre, 12:10 → 12:37 · 27 minuti

   No…solo Design sembra avere la parvenza di un fade ed animazione dal basso verso l'alto. Mi spieghi qual è il problema?

   Il problema: l'ingresso partiva quando la pagina nuova era pronta, non quando cominciava il passaggio, e la distanza tra i due cambiava da pagina a pagina. Spesso l'ingresso finiva dietro la pagina vecchia e restava solo una sovrapposizione delle due. Ora l'ingresso lo fa il passaggio stesso: il contenuto nuovo ha un nome suo e parte sempre nello stesso istante. Testata e dock restano sopra, fermi; la pagina vecchia svanisce com'era a schermo, anche se era scesa.

5. 25 ottobre, 02:03 → 02:23 · 20 minuti

   …Le transizioni da pagina ancora non sono ok: in chi e dove ci sono molti box fotografici, compaiono prima i box e poi le foto, ad es. poi la transizione è sempre scattosa...

   L'AI ha filmato il passaggio da Inizio a Chi e l'ha fermato a istanti precisi. Tre cause. Le foto di Chi si scaricavano solo dopo il primo disegno della pagina nuova, come quelle in fondo alle pagine, e arrivavano a passaggio iniziato. Dopo la pagina vecchia lo schermo restava quasi vuoto per 0,17 secondi, perché il contenuto nuovo compariva lento quanto la sua salita. E il collage si apriva mentre la pagina saliva: due movimenti insieme. Ora le foto di Chi partono subito, pesano la metà (600 pixel di lato invece di 900, quanto basta anche agli schermi più nitidi) e, finché non arrivano, il riquadro mostra una loro copia sfocata. Il contenuto compare in 0,26 secondi e sale come prima. Il collage si apre a passaggio finito.

6. 25 ottobre, 02:34 → 02:49 · 15 minuti

   …Comincio a pensare che il problema delle transizioni fluide da pagina a pagina sia causato dal deck (che non è propriamente un nav).

   Il mazzo c'è solo in Design, quindi non spiega le altre pagine. Ma l'AI ha confrontato ogni pagina con e senza JavaScript: in Design, Lavori, Parliamone e Metodo la prima schermata cambia quando lo script gira. Se lo script arrivava dopo il primo disegno, il passaggio mostrava la pagina senza script e la cambiava a metà strada. Ora il primo disegno aspetta lo script, in tutte le pagine.

Com'è fatta

Come funziona

La barra di navigazione e la testata restano ferme, come in un'app. La pagina vecchia svanisce in 0,14 secondi; il contenuto della nuova parte dopo 0,06 secondi, compare in 0,26 e intanto sale di 48 pixel, in 0,65 secondi. Parte sempre insieme al passaggio. Tornando indietro col browser il contenuto compare e basta. Se il browser interrompe il passaggio appena partito, l'ingresso lo fa la pagina, invece di comparire di colpo.

Dove funziona

Il passaggio animato in Chrome, Edge e Safari 18. Negli altri browser c'è solo l'ingresso del contenuto.

Riduci movimento

Nessuna dissolvenza e nessun ingresso: la pagina cambia e basta.

Codice

CSS, più due cose nella testata di ogni pagina: una riga che fa aspettare al browser la barra di navigazione prima della foto, e 11 righe di JavaScript che dicono al CSS se c'è il passaggio e alla pagina quando finisce. In più main.js blocca il primo disegno finché non ha girato (Chrome ed Edge).

Servizi · 1 giro · 8 min, per la pagina

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 18:36 → 18:44 · 8 minuti

   Sviluppiamo pagina per pagina, con i mix giusti, prendendo dai 4 esempi che ti ho dato: la home comunque deve tornare completa, ora l'hai spezzettata. Partiamo dalla pagina servizi, dove alterniamo tecnica a design. Poi via via facciamo le altre...

   8 minuti per la home di nuovo completa e per tutta la pagina Servizi, con i suoi quattro oggetti da toccare.

Com'è fatta

Come funziona

Premi «Aggiungi al carrello»: il numerino compare con un rimbalzo in 0,45 secondi e un messaggio conferma. Dopo il nono prodotto riparte da uno.

Perché

Un negozio deve rispondere subito, prima ancora di caricare qualcosa.

Codice

16 righe di JavaScript.

Servizi · 1 giro · 8 min, per la pagina

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 18:36 → 18:44 · 8 minuti

   Sviluppiamo pagina per pagina, con i mix giusti, prendendo dai 4 esempi che ti ho dato: la home comunque deve tornare completa, ora l'hai spezzettata. Partiamo dalla pagina servizi, dove alterniamo tecnica a design. Poi via via facciamo le altre...

   8 minuti per la home di nuovo completa e per tutta la pagina Servizi, con i suoi quattro oggetti da toccare.

Com'è fatta

Come funziona

Tre schede di contatti impilate. Al tocco si aprono a ventaglio, al secondo tocco si richiudono, in 0,65 secondi.

Cosa racconta

Ogni contatto ha la sua fase, in un posto solo: è il CRM in un gesto.

Codice

6 righe di JavaScript.

Servizi, Lavori e Metodo · 2 giri · 8 min, per la pagina, + 15

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 18:36 → 18:44 · 8 minuti

   Sviluppiamo pagina per pagina, con i mix giusti, prendendo dai 4 esempi che ti ho dato: la home comunque deve tornare completa, ora l'hai spezzettata. Partiamo dalla pagina servizi, dove alterniamo tecnica a design. Poi via via facciamo le altre...

   8 minuti per la home di nuovo completa e per tutta la pagina Servizi, con i suoi quattro oggetti da toccare.

2. 25 ottobre, 02:34 → 02:49 · 15 minuti

   Nella pagina servizi nei box cliccabili, la formattazione del testo fa modificare il box per adattarsi al contenuto. Formatta il testo in modo che si distribuiscano meglio le parole e non debba modificarsi il box.

   Cambiando voce la didascalia passava da una riga a due, o da due a tre, e il riquadro cresceva o calava di 23 pixel. Ora la didascalia tiene il posto della versione più lunga: le parole si distribuiscono in righe simili e la versione corta sta al centro. Il riquadro non si muove più, anche nelle didascalie dei progetti in Design.

Com'è fatta

Come funziona

Un interruttore a più posizioni cambia l'oggetto accanto e la didascalia sotto. Il tasto scelto scende in 0,16 secondi, l'oggetto cambia in meno di un secondo. La didascalia tiene sempre il posto della versione più lunga, così il riquadro non cambia altezza.

Riuso

Lo stesso pezzo è tornato nei Lavori e nel Metodo senza una riga di codice in più.

Codice

34 righe di JavaScript, uguali per tutti gli interruttori del sito.

Servizi, poi in basso · 3 giri · 8 min, per la pagina, + 6 + 3

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 18:36 → 18:44 · 8 minuti

   Sviluppiamo pagina per pagina, con i mix giusti, prendendo dai 4 esempi che ti ho dato: la home comunque deve tornare completa, ora l'hai spezzettata. Partiamo dalla pagina servizi, dove alterniamo tecnica a design. Poi via via facciamo le altre...

   8 minuti per la home di nuovo completa e per tutta la pagina Servizi, con i suoi quattro oggetti da toccare.

2. 25 ottobre, 20:10 → 20:16 · 6 minuti

   In pagina Servizi abbiamo un secondo mini menù per le schede servizi. O nascondiamo il menù a scroll a scendere e lo facciamo ricomparire con scroll a salire, ma poi si ripresenta lo stesso problema. O in questa pagina, quando comincio lo scroll dall'alto, il menù si posiziona in basso come era per il deck di prima…

   Con la barra di navigazione in alto le barre in cima erano due. Ora l'indice sta sotto il titolo e, quando scorri oltre, scende in fondo allo schermo, al centro, come il dock di prima; tornando su riprende il suo posto. Per strada: l'animazione d'ingresso della pagina, rimasta applicata, teneva l'indice dentro il suo posto invece che in fondo allo schermo, ed è stata tolta da lì. 6 minuti, insieme al capitolo 00 Nuove sfide.

3. 25 ottobre, 20:28 → 20:31 · 3 minuti

   Così però graficamente quel mini-menù ha dei difetti: bottoni troppo grandi che vengono tagliati dal contenitore del mini-menù…

   In basso le pillole erano alte 44 pixel dentro una barra stretta, e restavano tagliate. Ora si vedono alte 36, come le voci della barra in alto, e la zona da toccare resta di 44. 3 minuti, insieme a Social nel gioco di Parliamone.

Com'è fatta

Come funziona

Sotto il titolo di Servizi ci sono i capitoli, a pillole. Si accende quello che stai leggendo, cioè quello che passa a metà schermo.

In basso

Quando il suo posto passa sotto la barra in alto, l'indice scende in fondo allo schermo, al centro, su vetro smerigliato, ed entra dal basso in 0,4 secondi. Lì le pillole si vedono alte 36 pixel, ma si toccano su 44. Tornando su riprende il suo posto, e la pagina non salta. Lo decide un osservatore del browser, non un calcolo a ogni fotogramma.

Da telefono

Le pillole scorrono da sole, così quella accesa resta in vista.

Codice

32 righe di JavaScript.

Metodo · 1 giro · 4 min, per la pagina

Proposta dall'AI, approvata da me

I prompt, con l'ora

1. 20:06 → 20:10 · 4 minuti

   Sì, procedi con metodo. Guarda attentamente come ho lavorato in questi mesi, come lo abbiamo costruito e come non lascio nulla al caso...

   4 minuti per tutta la pagina Metodo.

Com'è fatta

Come funziona

I passi del metodo stanno su un binario. Ogni spia si accende quando il suo passo arriva a metà schermo, e resta accesa: chi torna su vede il percorso già fatto.

Riduci movimento

Le spie sono già tutte accese.

Codice

20 righe di JavaScript.

Parliamone · 4 giri · 10 + 7 + 10 + 9 min

I prompt, con l'ora

1. 17:27 · l'idea

   Nel Parliamone io farei una sorta di questionario fatto bene tutto in design: un tab grande con dentro 3 card, perché cambiare, cosa non funziona, cosa vorresti. All'interno una serie di parole e di frasi…

   L'idea. Rimandata: prima le pagine.

2. 20:25 → 20:35 · 10 minuti

   …Poi progetterei il Parliamone, perché sarebbe carino farlo diventare una sorta di gioco per chi lo usa...

   10 minuti, insieme all'intestazione con «Human & AI Agency». In mezzo, l'AI mi ha chiesto quali tre domande usare.

3. 21:58 → 22:05 · 7 minuti

   …Poi l'animazione delle card non è il massimo, riguardala e dai un effetto più solid alle card…

   7 minuti, nello stesso salvataggio del marchio in loop.

4. 23 ottobre, 18:51 → 19:01 · 10 minuti

   Non funziona bene il meccanismo delle card del gioco.

   L'AI ha filmato il mazzo fotogramma per fotogramma e ha trovato cinque difetti: la carta lanciata tagliata dal riquadro, la carta che copriva la domanda, il cambio di giro che non si vedeva, l'ultima carta che spariva di colpo, «Torna indietro» senza movimento.

5. 25 ottobre, 17:30 → 17:39 · 9 minuti

   Il meccanismo di trascinamento delle carte con il gioco tende a rompersi: la manina rimane ancorata e per bloccarlo devo premere per forza il pulsante Mi riguarda o Passo.

   Lo stesso difetto del 24 ottobre («se le prendo con il mouse si bloccano»), che allora l'AI non aveva riprodotto. Questa volta sì: se il browser perde il rilascio del tasto, la carta resta in mano e segue il mouse. Succede se il tasto si alza fuori dalla finestra, se a metà gesto si apre un menu o un'altra finestra, o con il clic destro. Ora la carta si lascia appena il mouse si muove senza tasti premuti, e torna al suo posto. 9 minuti, insieme ad altre correzioni.

Com'è fatta

Come funziona

Trascini la carta: oltre 90 pixel decide, a destra «Mi riguarda», a sinistra «Passo». In mano ruota di un grado ogni 20 pixel di strada e scende un poco, così non copre la domanda.

Dai tasti

La carta prima si inclina verso la scelta, poi vola fino a uscire dallo schermo. Il timbro dice cosa hai scelto.

Tra un giro e l'altro

L'ultima carta finisce il volo, poi cambiano domanda e spie e arriva il mazzo nuovo. In quella pausa, 0,45 secondi, i tocchi non contano: nessuno decide una carta che non vede.

Torna indietro

La carta rientra dal lato da cui era uscita.

Se il rilascio si perde

Se il mouse si muove senza tasti premuti, o la finestra perde il fuoco, la carta si lascia e torna al suo posto. Si prende solo con il tasto principale.

Chi tocca veloce

Non perde nessun tocco: la carta lanciata vola via da sola mentre la successiva è già pronta.

Con la tastiera

Freccia destra e freccia sinistra.

Senza JavaScript

È un modulo a caselle: si compila lo stesso.

Da computer

La scheda sta a destra e si riempie a ogni «Mi riguarda». A fine gioco, al posto del mazzo, arriva il modulo per mandarla.

Codice

389 righe di JavaScript, con la scheda da mandare, copiare, scaricare o passare alla propria AI.

Ogni pagina, accanto a Valens · 3 giri · 2 + 2 + 7 min

L'effetto l'ha inventato l'AI, su mia richiesta

I prompt, con l'ora

1. 20:42 → 20:44 · 2 minuti

   Prima di fare il check del gioco, da desktop il pallino Human&AI Agency vanno affiancati e poi cambierei il font AI con un font da computer o programmazione. Aggiungerei un effetto, tipo questo: npx shadcn@latest add @react-bits/ShinyText-TS-TW

   (Segue il codice d'esempio del componente ShinyText di React Bits.)

   Un riflesso color ottone su «AI», in solo CSS. Scartato: troppo piccolo per vedersi.

2. 20:46 → 20:48 · 2 minuti

   Non si vede è troppo piccolo (l'effetto) devi inventarne un altro...

   L'AI ha inventato l'effetto da terminale: «AI» si decifra tra caratteri casuali, con un cursore che lampeggia.

3. 21:58 → 22:05 · 7 minuti

   L'effetto deve riscrivere continuamente AI, altrimenti manco te ne accorgi. Loop quindi.

   7 minuti, nello stesso salvataggio delle carte del mazzo.

Com'è fatta

Come funziona

Ogni 3,2 secondi «AI» scorre tra 45 caratteri casuali e si ferma di nuovo. Il testo vero resta sempre «AI»: cambia solo per un istante.

Quando si ferma

Quando è fuori dallo schermo, quando la scheda del browser è nascosta e con «riduci movimento» attivo.

Carattere

JetBrains Mono, ridotto a maiuscole, cifre e pochi simboli: 2,7 KB.

Codice

57 righe di JavaScript, nessuna libreria.

Parliamone, sopra il mazzo · 1 giro · pronto alle 22:43

L'omino l'ho chiesto io; la strada, i cartelli e la scheda in fondo li ha proposti l'AI

I prompt, con l'ora

1. Ora non registrata → 22:43

   …Poi possiamo mettere un'animazione disegnata stile Bisletti con un omino che avanza su di una riga? Hai presente?

   L'AI non ha copiato il personaggio di Bisletti (è un disegno protetto) e ha proposto un omino suo con il casco da cantiere. Poi tre messaggi brevi: «un omino che costruisce una strada si può fare?», «un pochino più carino?», «vai, proviamo». Prima un bozzetto fermo, poi l'animazione. Salvato su GitHub alle 22:43.

Com'è fatta

Cosa fa

Ventiquattro mattonelle, una per frase (ventuno fino al 25 ottobre, poi tre frasi sui social). A ogni risposta l'omino posa la sua: verde se «Mi riguarda», chiara se «Passo». Poi fa un passo avanti in 0,38 secondi, con le gambe che camminano. Con «Torna indietro» riprende la mattonella e arretra, girato dall'altra parte.

I cartelli

Due, alla fine del primo e del secondo giro: quando l'omino li supera si accendono e ondeggiano per mezzo secondo.

La meta

In fondo alla strada c'è la scheda. All'ultima risposta l'omino posa la mattonella, resta a mani vuote e la scheda fa un saltello.

Il disegno

SVG scritto dal JavaScript, 420 per 90 unità, si adatta alla larghezza del mazzo. I colori vengono tutti dai token del sito: niente colori nuovi.

Con «riduci movimento»

La strada si aggiorna senza passi e senza camminata.

Codice

102 righe di JavaScript, nel blocco del gioco. Nessuna libreria.

Nella barra, sotto Parliamone · 1 giro · 16 min

I prompt, con l'ora

1. 15:40 → 15:56 · 16 minuti

   …Ragionando, potremmo anche far comparire la tab del gioco, dopo che un utente ha navigato almeno 3 pagine del sito...rendiamo giocoso il tutto...

   L'AI ha sconsigliato di nascondere Parliamone fino alla terza pagina: chi arriva già convinto non lo troverebbe. Ha proposto il salto del tasto e un fumetto che compare una volta sola. 16 minuti fino alle schermate da approvare, insieme alla scheda del progetto in Parliamone.

2. 15:44 · il via

   Procedi così...

   Sulla proposta dell'AI.

3. 16:58 · il mio ok

   ok

   Dopo le schermate. Poi l'AI ha aggiunto questa scheda al registro e ha salvato su GitHub.

4. 25 ottobre, 12:36 · nella barra a pillole

   …Lo sostituiamo con questo, perché è quello che dà dei problemi…

   Con il dock è andato via anche il salto del tasto. Il fumetto è passato nella barra a pillole, e dalle 13:51, con la barra in alto, compare sotto Parliamone. Il tempo sta nella scheda della barra.

Com'è fatta

Quando compare

Alla terza pagina diversa che apri, dopo 1,4 secondi. Una volta per visita. Chi è già passato da Parliamone non lo vede.

Il fumetto

Compare sotto la barra e sale di 12 pixel in 0,55 secondi, con la punta sotto Parliamone; da telefono sotto il tasto menu. Se apri il menu, se ne va.

Cosa ricorda

Solo le pagine viste, in questa scheda del browser. Niente cookie, niente dati che escono dal telefono.

Per chiuderlo

La X, da 44 pixel, o Esc quando sei sul fumetto con la tastiera. Il testo porta a Parliamone.

Con «riduci movimento»

Il fumetto compare fermo.

Codice

54 righe di JavaScript, dentro il blocco della barra. Nessuna libreria.

Design, in apertura · 1 giro · 17 min

I prompt, con l'ora

1. 01:10 → 01:27 · 17 minuti

   …ma non puoi produrre (non ricordo se volevi fare una sezione o una pagina) una prova di Design. Deve essere più stilosa, mantenendo lo stile...

   L'AI ha messo i progetti in apertura di Design, con le schermate prese dai siti veri a 1440 e a 375 pixel: lo schermo del computer con la pagina che scorre mentre scorri, il telefono appoggiato davanti, i segmenti per vedere un pezzo da vicino. 17 minuti fino al filmato e alle schermate da approvare, su un ramo a parte.

2. 01:36 · il mio ok

   A me va bene... se a sto punto aggiungiamo anche (il negozio di moda), andiamo!

   Il nome del negozio resta su richiesta, anche qui. L'AI ha aggiunto il negozio come quarto progetto, disegnato invece che fotografato, e questa scheda al registro.

Com'è fatta

Lo scorrimento

La home intera va dall'alto al basso mentre lo schermo attraversa la finestra: parte quando lo schermo è tutto in vista e finisce quando comincia a uscire.

Senza JavaScript

È solo CSS, un'animazione legata allo scorrimento della pagina. Dove il browser non la conosce, come Firefox, la home resta ferma in cima.

Il telefono

Inclinato di 3 gradi. Quando scegli un dettaglio scende e sparisce in 0,55 secondi, con la stessa molla dei tasti; torna quando torni alla home.

Le schermate

Prese dai siti veri il 25 ottobre, in WebP: 19 file, circa 850 KB, che si scaricano solo quando arrivano vicino allo schermo. Nelle pagine intere le fasce vuote sono accorciate.

Con «riduci movimento»

La home resta ferma in cima e il telefono non si muove.

Codice

6 righe di JavaScript in più, nel blocco degli interruttori a segmenti. Il resto è CSS.

Design, accanto al titolo · 2 giri · 8 + 15 min

I prompt, con l'ora

1. 01:51 → 01:59 · 8 minuti

   …riesci a fare slider schede che si sovrappongono in animazione. Come delle card. Sempre utilizzando il garbo del tema.

   L'AI ha chiesto dove metterlo e ha proposto quattro posti. Ho scelto i progetti in apertura di Design, «ma fatta bene». L'AI ha proposto una scheda per progetto, impilate come fogli, con la prima che vola via e torna in fondo. 8 minuti fino ai filmati da approvare, su un ramo a parte.

2. 02:03 · il mio ok

   Va bene!

   Poi l'AI ha aggiunto questa scheda al registro e ha salvato su GitHub.

3. 02:34 → 02:49 · 15 minuti

   Quando approdo sulla pagina design le card risultano per 1 sec tutte aperte in verticale. È da fixare.

   Le schede restavano in fila finché il JavaScript non girava, e se lo script arrivava dopo il primo disegno la pagina compariva così. L'AI l'ha rifatto rallentando lo script di mezzo secondo. Ora il mazzo è impilato già dal CSS, nelle stesse posizioni di dopo, e il primo disegno di ogni pagina aspetta lo script.

Com'è fatta

Le schede

Cinque, una per progetto e una per questo sito. Ognuna più in alto di 17 pixel, più piccola del 4% e girata di qualche grado, come fogli su un tavolo. Dalla quinta in poi non si vedono.

Il volo

La prima esce di lato in 0,34 secondi, girandosi di 14 gradi; poi rientra dietro le altre con la molla dei tasti, in 0,55 secondi.

Con le mani

Si trascina con il dito o con il mouse: oltre 90 pixel vola via da quella parte, sotto torna al suo posto. Un trascinamento non apre il progetto.

Con la tastiera

Le frecce, o i tasti destra e sinistra quando il focus è nel mazzo. Le schede dietro non si raggiungono: si sente solo quella davanti, «Progetto 2 di 5».

Con «riduci movimento»

Le schede cambiano senza volare.

Senza JavaScript

Le schede restano in fila, una sotto l'altra, senza frecce, e i link funzionano. Prima che lo script arrivi, invece, il mazzo è già impilato.

Codice

Circa 100 righe di JavaScript, nessuna libreria.

Ogni pagina, in alto · 2 giri · 9 + 3 min

La barra e le impostazioni le ho scelte io; i colori del sito, l'entrata solo alla prima pagina e la pillola che resta piena cambiando pagina li ha proposti l'AI

I prompt, con l'ora

1. 12:36 → 12:45 · 9 minuti

   …c'è qualcosa di sbagliato alla base del progetto... c'è una parte sviluppata che non funziona a dovere... o sostituiamo il dock con un altro nav o andiamo a guardarci. Lo sostituiamo con questo, perché è quello che dà dei problemi, poi dimmi la tua: npx shadcn@latest add @react-bits/PillNav-JS-TW

   (Seguono le impostazioni scelte e il codice d'esempio del componente PillNav di React Bits.)

   Il componente era fatto per React e Tailwind: l'AI l'ha riscritto in HTML, CSS e JavaScript semplici, con i colori del sito, e l'ha messo in basso al posto del dock. Il riempimento al passaggio lo fa il CSS: nella barra non gira niente a ogni fotogramma, e i fotogrammi che Safari perde nel passaggio tra pagine non la fanno scattare.

2. 13:48 → 13:51 · 3 minuti

   Mettilo in alto... in basso non si vede...

   In alto e fissa: resta visibile mentre scorri. Il menu del telefono si apre verso il basso, il fumetto dell'invito compare sotto la barra, e la testata, le ancore e tutto quello che resta attaccato in alto lasciano 70 pixel alla barra.

3. 15:59 · il mio ok

   Sì, tutto quello che suggerisci, ma non ho capito dove va a finire Social. Lo mettiamo nel nav anche?

   Social è entrato nella barra, tra Servizi e Lavori: le voci sono otto e la barra intera è larga 666 pixel. Poi l'AI ha aggiunto questa scheda al registro e ha salvato su GitHub.

Com'è fatta

Le impostazioni

Logo e barra staccati, voci a pillola, riempimento al passaggio, puntino verde sulla pagina in cui sei, vetro smerigliato. Le pillole sono alte 36 pixel, dentro una zona da toccare di 44.

Al passaggio

Un cerchio scuro sale dal bordo basso e riempie la pillola in 0,55 secondi, mentre la scritta rotola verso l'alto in 0,5. Quando il puntatore esce si svuota in 0,36. Con la tastiera succede lo stesso al focus.

Da telefono

Niente riempimento: dopo il tocco resterebbe acceso. Sotto i 700 pixel le otto voci non ci stanno e restano il logo e il tasto menu. Il menu si apre dal tasto verso il basso in 0,56 secondi, con le voci una dopo l'altra, e si chiude col tasto, con Esc o toccando fuori.

Tra le pagine

La barra resta ferma mentre la pagina cambia. La pillola cliccata col mouse arriva piena nella pagina nuova e si svuota quando il puntatore esce: prima si svuotava e si riempiva di nuovo, un lampo a ogni cambio di pagina.

L'entrata

Solo alla prima pagina che apri: il logo si gonfia, la barra si apre da sinistra in 0,76 secondi e le voci arrivano una dopo l'altra. Alle pagine dopo la barra c'è già.

Con «riduci movimento»

Niente entrata e niente rotolamento: la pillola si riempie e il menu si apre senza movimento.

Codice

152 righe di JavaScript, più 12 nella testata di ogni pagina per la pillola che resta piena. Il riempimento è solo CSS. Nessuna libreria.

Servizi e Social, accanto al testo · 2 giri · 11 + 2 min

I prompt, con l'ora

1. 14:01 → 14:12 · 11 minuti

   Mettiamo una sezione FAQ per AI? Magari spieghiamo anche cos'è un'agenzia AI & Human. Poi manca la pagina gestione social, che ho fatto e continuerò a fare.

   L'AI ha aggiunto il capitolo 06 in Servizi e la pagina Social, con un telefono disegnato che cambia schermata: il post, il video verticale, la sponsorizzata con la fascia «Scopri di più». 11 minuti, insieme ai prezzi e alle domande e risposte.

2. 14:34 → 14:36 · 2 minuti

   Falla un pochino più bella come grafica. In alcuni periodi anche un'ora al giorno...

   Il telefono è salito in apertura della pagina Social, accanto al titolo, con gli stessi tre tasti.

3. 15:59 · il mio ok

   Sì, tutto quello che suggerisci…

   Poi l'AI ha aggiunto questa scheda al registro e ha salvato su GitHub.

Com'è fatta

I tre contenuti

Post, Video e Sponsorizzata, con tre tasti a segmenti sotto il telefono. La didascalia cambia con il tasto.

Il cambio

La schermata vecchia svanisce in 0,35 secondi e la nuova sale di 10 pixel con la molla dei tasti, in 0,45. Nella sponsorizzata compaiono la scritta «Sponsorizzato» e la fascia «Scopri di più», in 0,3 secondi.

Dove sta

Nel capitolo 06 di Servizi e in apertura della pagina Social.

Con «riduci movimento»

Le schermate cambiano senza movimento.

Codice

Solo CSS e HTML. I tasti sono gli interruttori a segmenti che c'erano già: nessuna riga di JavaScript in più.

Servizi, capitolo 00 · 1 giro · 6 min

I prompt, con l'ora

1. 20:10 → 20:16 · 6 minuti

   …Poi vorrei aggiungere in servizi, e vorrei che fosse la prima scheda, che sono aperto a nuove sfide, proprio perché da founder mi sono trovato ad affrontare sfide enormi. Il primo muro sono stati i preventivi per lo sviluppo dell'app. Quello mi ha fatto provare a mettere mano al codice e a occuparmi in prima persona di cose che prima delegavo…

   Il capitolo 00 viene prima dei servizi. L'AI ha messo in frasi le mie parole e ha proposto un oggetto in tre quadri: i preventivi impilati, il codice, l'app finita, la stessa del caso in Lavori. 6 minuti, insieme all'indice che scende in basso.

Com'è fatta

I tre quadri

Il muro: tre preventivi impilati e storti. Il codice: una finestra scura con le righe colorate. Il prodotto: l'app, con i suoi colori.

Il cambio

Il quadro vecchio svanisce in 0,35 secondi e il nuovo sale di 10 pixel con la molla dei tasti, in 0,45. La didascalia cambia con il tasto.

Con «riduci movimento»

I quadri cambiano senza movimento.

Codice

Solo HTML e CSS. I tasti sono gli interruttori a segmenti che c'erano già: nessuna riga di JavaScript in più.