Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo nel libro pop-up
L’intro di un logo tutta di carta, senza personaggi: un libro rilegato cade sul tavolo, la copertina si apre e dalla piega si alzano i pezzi pop-up, ognuno con la sua molla: il sole, le nuvole, il logo lettera per lettera, le colline. La linguetta si tira da sola e saltano fuori i coriandoli. Nel Playground ci metti il tuo nome o carichi il tuo logo.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The pop-up book logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/young-serif@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it and builds the book, its pages and the paper pieces folded inside -->
<svg class="palco" data-stage role="img" aria-label="Paperlark" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the grain of the paper: a little tile of specks and fibres the script paints on a canvas -->
<pattern id="grain" patternUnits="userSpaceOnUse" width="180" height="180">
<image width="180" height="180" data-grain-image />
</pattern>
<!-- the shade where the pages curve down into the spine -->
<linearGradient id="gutter-near" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="piega-stop" />
<stop offset="1" class="piega-stop piega-stop--via" />
</linearGradient>
<linearGradient id="gutter-far" x1="0" y1="1" x2="0" y2="0">
<stop offset="0" class="piega-stop" />
<stop offset="1" class="piega-stop piega-stop--via" />
</linearGradient>
<!-- the soft shadow of the book on the table -->
<filter id="soft" x="-30%" y="-60%" width="160%" height="220%" data-soft>
<feGaussianBlur stdDeviation="10" data-soft-blur />
</filter>
</defs>
<g data-world>
<path class="ombra-tavolo" filter="url(#soft)" data-table-shadow />
<!-- the book: the back half lies still, the front half (the cover with the first page) turns on the spine -->
<g data-book>
<g data-base></g>
<g data-panel></g>
<!-- the pop-up pieces, from the back to the front: their shadows, the clouds, the sun, the logo, the hills -->
<g data-pops>
<g data-shadows></g>
<g data-clouds></g>
<g data-sun></g>
<g data-letters></g>
<g data-hills></g>
</g>
</g>
<g data-fx></g>
</g>
</svg>
<p class="nota">Click or tap to see it again</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
41 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il logo nel libro pop-up» da Animorio e adattala al mio sitoCosa fa
Su un tavolo color sabbia cade dall’alto un libro rilegato in tela blu, con un’etichetta dorata sulla copertina dove è scritto il nome di un marchio inventato, Paperlark. Atterra schiacciandosi, fa un piccolo saltello e si assesta, con due sbuffi di polvere ai lati e il segnalibro di raso rosso che dondola sul tavolo; dal davanti del libro spunta una linguetta di carta con scritto PULL. La copertina sobbalza due volte, come se dentro qualcosa volesse uscire, poi si apre girando sulla costa: si alza, per un attimo la vediamo di taglio, mostra la pagina interna e sbatte giù piatta con un piccolo rimbalzo. Mentre le pagine si aprono, dalla piega si alzano i pezzi di carta, ognuno con la sua molla e un’ombra morbida sulla pagina dietro: prima un grande sole a raggi, mezzo nascosto in una tasca della pagina, che gira mentre sale; poi due nuvole sulle loro linguette; poi il logo, una lettera alla volta, ogni lettera un cartoncino rosso col bordo bianco del taglio, in piedi su una linguetta, che si alza storto e si raddrizza ondeggiando; infine due file di colline smerlate davanti. La linguetta PULL si tira da sola e torna indietro con un elastico: il sole fa un mezzo giro, le lettere si abbassano e si rialzano una dopo l’altra come un’onda, le nuvole saltano e una manciata di coriandoli di carta vola su e ricade girando sulla pagina davanti, dove c’è stampato Stories that stand up. Il logo resta in mostra con le lettere che ondeggiano appena, il sole che gira piano e le nuvole che galleggiano; dopo qualche secondo i pezzi si ripiegano, la copertina si chiude e il libro scivola via, e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: è stampata su un cartoncino che si alza dalla piega.
Come funziona
Un tavolo visto dall’alto
Il palco è un SVG con il viewBox grande quanto la finestra. Tutto si conta in altezze di lettera e in tre direzioni: X attraverso il libro, D lungo le pagine verso di noi (0 è la costa), Z in alto. Una funzione sola porta un punto del libro sullo schermo: y = D·0,62 − Z·0,785 (il tavolo visto da circa 38 gradi) e un filo di prospettiva che allarga le cose più vicine. Le pagine, il dorso, il taglio delle pagine, il segnalibro e la linguetta sono poligoni costruiti con quella funzione; le scritte stampate (l’etichetta della copertina, la riga della pagina, PULL) sono disegnate in pixel loro e appoggiate sul libro con una matrix() presa da tre angoli.
La copertina che gira
La metà che si apre è un solo angolo, da 0 (chiusa) a 180 (aperta e piatta): un punto a distanza r dalla costa sta a D = r·cos, Z = r·sin, e il cartone della copertina è spostato dello spessore lungo la normale. Ogni fotogramma si ricalcolano i tracciati. Il prodotto scalare con la direzione dello sguardo dice quale faccia vediamo: sotto i 38 gradi la tela con l’etichetta, sopra la pagina interna, e allo scambio cambia anche l’ordine dei livelli (il taglio sotto la copertina da fuori, il cartone dietro da dentro). Il taglio delle pagine si mostra solo finché è girato verso di noi.
I pezzi che si alzano
Ogni pezzo pop-up (sole, nuvole, lettere, colline) è un gruppo con un valore u, da 0 (sdraiato nella piega) a 1 (in piedi), scritto come transform intorno al suo piede: translate, rotate, skewX, scale(1 u). Un velo scuro dello stesso disegno sparisce mentre si alza, e una copia sfocata è la sua ombra sulla pagina di dietro, ritagliata dal contorno della pagina. Le lettere si misurano su una canvas e ognuna è un cartoncino col bordo del taglio e una linguetta; il sole è mezzo nascosto da un clipPath, la tasca della pagina, e gira su sé stesso.
La molla della carta
I pezzi salgono con elastic.out, più o meno lungo secondo SPRING, partendo storti e inclinati e raddrizzandosi con la stessa molla. Oltre 1 il pezzo si inclina all’indietro e sembra un po’ più alto: lo scarto si dimezza, così la carta non diventa gomma. L’onda dopo la linguetta abbassa e rialza le lettere a una a una; i coriandoli volano in un arco (su con power2.out, giù con power1.in), girano e si ribaltano con scaleX e si posano sulla pagina davanti prima di sparire.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, land, knock, open, slap, pop, reveal, pull, rest e leave e timeScale per la velocità. Nel riposo le lettere ondeggiano sfasate, il sole gira piano e le nuvole galleggiano; con LOOP i pezzi si ripiegano, la copertina si chiude e il libro esce. Se IMAGE ha un indirizzo il logo diventa un cartoncino con l’immagine, che si alza come una lettera sola e compare anche sull’etichetta della copertina. Nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Paperlark' | Il logo scritto: ogni lettera è un cartoncino che si alza dalla piega del libro; il nome è anche sull’etichetta della copertina. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola, su un cartoncino che si alza. |
TAGLINE | script.js | 'Stories that stand up' | La riga stampata sulla pagina davanti, sotto il logo (vuota = niente riga). |
SPRING | script.js | 1 | Quanto è elastica la carta: 0 = i pezzi si alzano e basta, 2 = ondeggiano a lungo prima di fermarsi. |
CONFETTI | script.js | 1 | Quanti coriandoli di carta saltano fuori quando si tira la linguetta (0 = nessuno). |
SUN | script.js | true | Il sole di carta che gira dietro il logo e le due nuvole; con false resta solo il logo con le colline. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta in mostra prima che il libro si chiuda. |
LOOP | script.js | true | Se il libro si richiude, scivola via e ne arriva uno nuovo. Con false il logo resta in piedi, ondeggiando. |
Quando usarla
Per presentare un logo con un gesto che sa di carta e di storie: l’apertura del sito di una casa editrice, di una libreria, di una cartoleria, di un marchio per bambini o di un laboratorio di carta, l’anteprima per un cliente, un caricamento, un post per i social. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: su uno schermo alto le pagine diventano più profonde, il sole più grande e il logo è largo quasi quanto lo schermo. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il libro chiuso compare in dissolvenza, poi svanisce e al suo posto compare il libro aperto con il logo e i pezzi già in piedi. Se l’animazione ricomincia, anche il libro se ne va in dissolvenza.
Trappole
- La pagina che gira sembra più alta quando è di fronte a noi (verso i 128 gradi) che quando è piatta: con le misure prese dal libro aperto usciva dal bordo alto dello schermo. La grandezza tiene conto anche di quel momento.
- L’ombra dei pezzi fatta schiacciando e inclinando la loro copia si vedeva fra le linguette, sotto le lettere, come un riflesso: è diventata una copia spostata in alto a destra e sfocata, che cade sulla pagina dietro.
- Con l’elastico i pezzi superavano di molto l’altezza vera e il sole diventava un uovo: oltre 1 lo scarto si dimezza, quanto basta perché sembri carta che si inclina all’indietro.
- Le colline davanti coprivano il piede delle lettere: le lettere stanno su linguette alte un quarto di lettera, e il colmo delle colline arriva sotto la loro base.
- L’ombra del libro sul tavolo, un’ellisse, faceva un alone grigio intorno alla pagina lontana, che è più stretta per la prospettiva: ora è il contorno del libro stesso, chiuso o aperto, sfocato e un po’ più in basso.
- Fra tela e pagina interna cambia anche l’ordine dei livelli della metà che gira, altrimenti da fuori il taglio delle pagine finiva sopra la copertina: si riordina una volta sola, quando la faccia cambia.
Librerie
GSAP 3.15.0, Young Serif 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
