8 libri da sfogliare GitHub

Da una riga
a un libro
che si apre.

Scrivi in una riga il luogo e cosa deve alzarsi dalla pagina. Claude ti restituisce un file HTML con un libro pop-up di carta in tre aperture, ognuna con un pezzo da muovere.

git clone https://github.com/paolobortolotti/paperjoy ~/.claude/skills/popup-carta

Una skill gratuita per Claude Code. Come installarla · Cosa c'è dentro

Va bene per luoghi e storie, una città o un evento. Per un oggetto da spiegare dall'interno, come un motore, serve un'illustrazione in sezione.

Esempi

Ogni libro è nato dalla richiesta scritta sotto, sullo stesso motore. Qui le pagine girano da sole; per toccare i pezzi apri il libro a tutta pagina.

“Un libro pop-up di Roma: il Colosseo con l'arena da scoperchiare, San Pietro, una Vespa davanti a Trevi.” Apri → 3 aperture · sportello · ruota · linguetta
“Venezia in tre aperture: una gondola sul Canal Grande, Rialto, l'orologio di San Marco.” Apri → 3 aperture · linguetta · sportello · ruota
“Firenze: dentro la cupola del Duomo, i canottieri sotto Ponte Vecchio, il giorno e la notte dal Piazzale.” Apri → 3 aperture · sportello · linguetta · ruota
“Genova: una nave che entra in porto sotto la Lanterna, il portone di un palazzo dei Rolli, il cielo su Boccadasse.” Apri → 3 aperture · linguetta · sportello · ruota
“Torino: le stagioni sulle Alpi dietro la Mole, un caffè storico sotto i portici, una barca sul Po.” Apri → 3 aperture · ruota · sportello · linguetta
“Parigi: la Tour Eiffel dal giorno alla notte, un battello sulla Senna, il telo di un pittore a Montmartre.” Apri → 3 aperture · ruota · linguetta · sportello
“Londra: un orologio da girare a Westminster, un bus su Tower Bridge, la metro sotto la strada.” Apri → 3 aperture · ruota · linguetta · sportello
“Tokio: l'omikuji di Asakusa, Shibuya che si accende di sera, uno shinkansen verso il Fuji.” Apri → 3 aperture · sportello · ruota · linguetta

La tua città

Le otto città sono esempi. Per un altro luogo cambia la descrizione e il codice resta lo stesso.

  1. Descrivi il luogo

    Cosa si alza dalla pagina e cosa si muove. Di solito bastano due righe.

  2. Il controllo delle pieghe

    Prima di consegnare, un validatore apre e chiude il libro e prova ogni piega come se fosse carta. Se un pezzo sporge o ne urta un altro, dice quale e di quanti millimetri.

  3. Un solo file

    Un HTML tra 160 e 270 KB senza dipendenze, che si apre nel browser o si incolla in una pagina del sito.

Richieste di esempio, da copiare con un clic

Cosa si muove

Sei meccanismi presi dai libri pop-up veri. Ogni pezzo è incollato alla pagina e si piega con lei, come succede con la carta.

Facciate

Una piega parallela alla costola, per palazzi e ponti.

Gradoni

Pieghe annidate che scendono verso chi legge, come le terrazze di un borgo.

Torri

Una piega a V sulla costola, per campanili e fari.

Linguetta

Si tira dal bordo e porta qualcosa da un lato all'altro della pagina, una nave o un bus.

Sportello

Si alza e mostra cosa c'è sotto, un cortile o la metro.

Ruota

Si gira e cambia l'ora o la stagione della scena.

Installa

Tre passi, un paio di minuti. Servono Claude Code e Node.js; per sapere se hai Node scrivi node -v nel Terminale.

  1. Installa

    Apri il Terminale (su Mac ⌘ Spazio, poi scrivi Terminale), incolla questa riga e premi Invio.

    git clone https://github.com/paolobortolotti/paperjoy ~/.claude/skills/popup-carta
  2. Riavvia Claude Code

    Claude Code legge le skill all'avvio, quindi va chiuso e riaperto.

  3. Chiedi un libro

    Descrivi il luogo a parole, oppure comincia con /popup-carta. Claude salva il file .html nella cartella in cui lavori e lo apri con un doppio clic.

È sicuro?

Puoi leggere ogni file prima di installarlo. Il codice è su GitHub.

Testo in chiaro

Dentro ci sono le istruzioni per Claude, il motore in JavaScript, lo schema della scena, i libri d'esempio e due font. Nessun eseguibile compilato.

All'installazione non parte niente

L'installazione copia dei file in una cartella e basta. Non esegue script e non scarica pacchetti.

Il libro resta nel browser

Ogni libro è un file HTML con motore e font dentro. Non chiama server esterni e non chiede account.

Domande

Cos'è una skill?

Una cartella di istruzioni e file che Claude legge quando il compito la riguarda. Questa gli insegna a scrivere la scena del libro in un JSON e a farla controllare dal motore prima di consegnarla.

Claude non la usa

Controlla che esista ~/.claude/skills/popup-carta/SKILL.md e riavvia Claude Code. Puoi anche chiamarla per nome con /popup-carta.

Funziona su claude.ai?

Non l'ho provata lì. Il controllo delle pieghe gira con Node.js, quindi l'ambiente sicuro è Claude Code sul tuo computer.

Posso metterlo in una pagina del mio sito?

Sì. Chiedi il libro «da incollare in una pagina» e ricevi il blocco con stile, libro e script, che prende la larghezza del contenitore.

Come la aggiorno o la tolgo?

Per aggiornarla usa git -C ~/.claude/skills/popup-carta pull, per toglierla cancella la cartella ~/.claude/skills/popup-carta.

Posso usarla per lavori commerciali?

Sì. Il codice ha licenza MIT e i font Bebas Neue e DM Sans la SIL Open Font License. I libri che crei sono tuoi.