Il pulsante a diaframma

Pulsanti, SVG, Hover, FisicaCanvas, GSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

Un pulsante «Play trailer» fatto come il diaframma di un obiettivo da cinepresa: nove lamelle di metallo chiuse a spirale che girano sui loro perni. Col puntatore sopra il diaframma si apre un poco su un film che scorre dietro, al clic si spalanca, il play diventa pausa e il paesaggio passa dall'alba alla notte; richiudendo, le lamelle tornano a spirale.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The iris play button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: round, with the diaphragm of a cine lens, and its label under it. The film behind the blades is
         drawn on a canvas, the blades, the ring and the play icon are an SVG the script builds and moves -->
    <div class="trailer" data-trailer>
      <div class="iris" data-iris>
        <button class="iris__btn" type="button" aria-label="Play trailer, 48 seconds" data-btn data-autoclic>
          <canvas class="iris__scene" data-scene aria-hidden="true"></canvas>
          <svg class="iris__art" viewBox="-136 -136 272 272" aria-hidden="true" data-art></svg>
          <svg class="iris__face" viewBox="-136 -136 272 272" aria-hidden="true" data-face></svg>
        </button>
      </div>

      <p class="trailer__label" aria-hidden="true">
        <span class="trailer__word" data-word>Play trailer</span>
        <span class="trailer__time" data-time></span>
      </p>
      <p class="sr" aria-live="polite" data-live></p>
    </div>
  </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.

16 valori da cambiare

Apri il Playground

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 pulsante a diaframma» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un grande pulsante tondo: l'anello di un obiettivo, zigrinato sul bordo, con i numeri del diaframma da 22 a 1.4 incisi e una tacca ambra in alto, e dentro nove lamelle di metallo scuro chiuse a spirale, ognuna sopra la vicina e sotto l'altra, con un filo di luce sul bordo. Sopra, il triangolo del play; sotto, Play trailer e la durata. Col puntatore sopra le lamelle girano sui loro perni e il diaframma si apre su un'apertura rotonda, con un piccolo rimbalzo: dietro si vede un film, montagne su un lago al tramonto, con il sole che brilla sull'acqua, le nuvole che passano e qualche uccello; l'anello gira con le lamelle e sotto la tacca ora c'è 5.6. La luce sui bordi delle lamelle segue il puntatore. Cliccando, il diaframma si spalanca, il triangolo si apre nelle due barre della pausa e il trailer sale dal nero: un giorno intero in pochi secondi, dall'alba blu al mezzogiorno, al tramonto rosa, alla notte con le stelle, mentre un arco ambra sull'anello segna l'avanzamento e il tempo scende. Alla fine il film torna nero, il diaframma si richiude e al posto della pausa si disegna una freccia tonda, con la scritta Watch again. Cliccando durante il trailer, si mette in pausa: le lamelle tornano a spirale sul fotogramma fermo e la scritta dice Resume.

Come funziona

Lamelle con la geometria vera

Ogni lamella gira su un perno posto su un cerchio sotto l'anello (raggio 104), e il suo bordo tagliente è l'arco di un cerchio grande (raggio 144) il cui centro sta a 150 dal perno. Girare la lamella di un angolo sposta quel cerchio; l'apertura è lo spazio che resta dentro a tutti i cerchi. Per avere un'apertura di raggio a il centro deve stare a 144 − a dal mezzo, e il teorema del coseno dà l'angolo della lamella: così il movimento è quello di un obiettivo, non una rotazione finta.

Una sopra l'altra, tutto intorno

In un diaframma vero ogni lamella sta sopra la vicina e sotto l'altra, tutto intorno: con un ordine di disegno normale una lamella resterebbe sopra a tutte. Qui ogni lamella si disegna solo dentro al cerchio tagliente della successiva (un clipPath SVG con quel cerchio): dove la successiva la copre, lei non c'è. La geometria è stata controllata punto per punto: per ogni apertura e con 5–12 lamelle non resta mai un buco.

Metallo, luce e anello

Ogni lamella ha una sfumatura sua, scura al perno e chiara verso il bordo; l'ombra che getta sulla lamella sotto e il filo di luce sul bordo sono lo stesso cerchio tagliente disegnato con tratti diversi. Ogni lamella è girata a modo suo, quindi la luce, che viene dal puntatore e gira dalla parte più corta, ne accende alcune più delle altre. L'anello coi numeri gira con le lamelle, 11 gradi a numero: sotto la tacca si legge il diaframma vero.

Il film su canvas

Dietro alle lamelle un canvas disegna il film a ogni fotogramma: cielo, stelle, sole lungo il suo arco, nuvole, tre catene di montagne con il loro riflesso nel lago, il luccichio del sole sull'acqua, la riva coi pini e gli uccelli; la camera scorre piano (DRIFT) e la pellicola tremola appena nel proiettore, con la grana sopra. Un giorno è una tabella di otto momenti (colore del cielo in alto e all'orizzonte, del sole, delle ombre) mescolati con smoothstep: in hover è sempre l'ora d'oro, mentre il trailer va dall'alba alla notte nei suoi TRAILER secondi.

Molla, icona e stati

L'apertura è un numero su una molla (SPRING), integrata a passi di 1/240 di secondo; a zero si ferma con un piccolo colpo, come le lamelle che battono. Il play è fatto di otto punti in due quadrilateri che diventano le due barre della pausa. Il pulsante ha quattro stati: fermo, in corsa, in pausa sul fotogramma fermo, finito con la freccia per rivederlo; l'etichetta e l'aria-label cambiano con lui.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BLADES`	script.js	`9`	Quante lamelle (da 5 a 12).
`PEEK`	script.js	`50`	Quanto si apre il diaframma col puntatore sopra: il raggio dell'apertura, su 96.
`OPEN`	script.js	`80`	Quanto si apre mentre il trailer va (96 è tutto aperto: le lamelle spariscono).
`SPRING`	script.js	`[150, 15]`	La molla delle lamelle: la rigidità e lo smorzamento (più basso, più rimbalzo).
`TRAILER`	script.js	`48`	I secondi del trailer finto.
`DRIFT`	script.js	`0.006`	Quanto in fretta la camera scorre sul paesaggio.

Provali nel Playground

Quando usarla

Per il pulsante che fa partire un video dove il video è il prodotto: il trailer di un film o di una serie, lo showreel di uno studio, il video di presentazione di una macchina fotografica o di un festival. Al posto del film disegnato va un fotogramma del video vero, disegnato sul canvas.

Sul telefono

Il pulsante si stringe a tre quarti dello schermo. Senza puntatore, tenere il dito sul pulsante apre il diaframma come l'hover e lasciarlo fa partire il trailer; il film si disegna al massimo a densità 2.

Con il movimento ridotto

Le lamelle non girano: passano da chiuse ad aperte in dissolvenza, senza molla e senza aprirsi a metà col puntatore. Il film è fermo, senza camera che scorre, senza tremolio e senza grana, ma il trailer va lo stesso e la luce cambia piano dall'alba alla notte; play e pausa cambiano subito.

Trappole

Con un ordine di disegno normale l'ultima lamella resta sopra a tutte e il diaframma sembra un ventaglio: ogni lamella va tagliata col cerchio della successiva, così ognuna sta sopra a una vicina e sotto all'altra.
Un foglio di stile che dà a tutte le lamelle lo stesso fill vince sull'attributo fill dell'SVG: le sfumature di ogni lamella non si vedevano. Il fill di ognuna lo mette lo script, e il CSS dà solo i colori delle fermate.
La luce che segue il puntatore è un angolo: passando da −179 a 179 gradi faceva il giro lungo. Si muove sulla differenza ridotta fra −π e π.
Ridisegnare le nove lamelle a ogni fotogramma mentre gira solo il film è lavoro sprecato per il browser: lamelle, icona e film stanno in tre strati separati, e le lamelle si ridisegnano solo se si muovono o se si sposta la luce.
Il passo del fotogramma è limitato a 1/30 di secondo e la molla si integra a passi di 1/240: dopo una scheda in secondo piano un salto di tempo spalancava il diaframma oltre il bordo.

Librerie

GSAP 3.15.0, Geist (font variabile) 5.3.0, Geist Mono (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 4 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.