La card della lampada snodata

Card, Fisica, Hover, SVGGSAP, Solo CSSImpegnativaPeso compresso: Demo 8,6 KBGSAP 28 KBGratisScarica lo zip

La card di una lampada da architetto in un piccolo negozio di design: la lampada sta su una scrivania di notte e punta la luce dove sei tu. Il paralume mira al puntatore (o al dito, o alle frecce) e i due bracci si piegano per portarcelo, calcolati come un braccio vero con due ossa e il gomito sempre in alto; ogni snodo arriva al suo angolo su una molla sua, così la lampada ha peso e si ferma con un piccolo cenno. Il cono di luce e la pozza sulla scrivania la seguono; un clic la spegne e la riaccende con un piccolo singhiozzo del filamento, e scegliendo un’altra finitura la lampada si ridipinge.

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 desk lamp card</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the card of an architect's desk lamp in a small design shop. The lamp stands on a dark desk and points its
         light where you are: its two arms bend at the elbow, worked out like a real arm, and swing there on springs,
         the shade turns to face the pointer, and the cone of light and the pool on the desk follow. A click (or the
         switch) turns it off and on; choosing another finish repaints it. The lamp and its light are drawn by the
         script at every frame -->
    <article class="lamp" aria-labelledby="lamp-name" data-lamp>
      <div class="desk" tabindex="0" role="group" aria-label="The lamp on the desk. Aim it with the arrow keys; Enter switches it" data-desk>
        <svg class="desk__svg" viewBox="0 0 300 214" preserveAspectRatio="xMidYMid meet" aria-hidden="true" data-svg>
          <defs>
            <linearGradient id="lamp-beam" gradientUnits="userSpaceOnUse" data-beam>
              <stop offset="0" class="glow" stop-opacity="0.7" />
              <stop offset="1" class="glow" stop-opacity="0" />
            </linearGradient>
            <radialGradient id="lamp-pool">
              <stop offset="0" class="glow" stop-opacity="0.9" />
              <stop offset="1" class="glow" stop-opacity="0" />
            </radialGradient>
          </defs>
          <g class="light" data-light>
            <path class="light__beam" fill="url(#lamp-beam)" data-cone />
            <ellipse class="light__pool" fill="url(#lamp-pool)" data-pool />
          </g>
          <path class="desk__top" d="M0 196.5H300" />
          <g class="body" data-body>
            <path class="body__base" d="M40 196c0-7 6-10 24-10s24 3 24 10z" />
            <path class="body__post" d="M64 186v-8" />
            <path class="body__spring" data-spring1 />
            <path class="body__spring" data-spring2 />
            <path class="body__arm" data-arm1 />
            <path class="body__arm" data-arm2 />
            <circle class="body__joint" r="4.2" data-j0 />
            <circle class="body__joint" r="4.2" data-j1 />
            <g data-head>
              <path class="body__mouth" d="M27 -15.5 L27 15.5 L29.5 15.5 L29.5 -15.5 Z" data-mouth />
              <path class="body__shade" d="M-5 -5.5 L7 -6.5 L29 -17 L29 17 L7 6.5 L-5 5.5 Z" />
              <circle class="body__joint" r="4.2" />
            </g>
          </g>
        </svg>
        <button class="desk__switch" type="button" aria-pressed="true" data-switch>
          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.8v5.4M4.6 3.9a5.2 5.2 0 1 0 6.8 0" /></svg>
          <span data-switch-word>On</span>
        </button>
      </div>

      <div class="info">
        <div class="info__head">
          <h2 class="info__name" id="lamp-name">Arca desk lamp</h2>
          <p class="info__price">&euro;240</p>
        </div>
        <p class="info__kind">Steel and cast iron &middot; <span data-finish-name>Graphite</span></p>
        <div class="finishes" role="radiogroup" aria-label="Finish" data-finishes></div>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </article>
  </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.

27 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 «La card della lampada snodata» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una card bianca larga 340 pixel, con un filo grigio e un’ombra morbida. In alto una scrivania di notte, quasi nera, col bordo del piano come una riga sottile, e sopra una lampada da architetto disegnata a tratti chiari: la base di ghisa, due bracci sottili con le molle a spirale di fianco, tre snodi tondi e il paralume conico. All’apertura la lampada si apre dalla posizione piegata, si accende con un piccolo singhiozzo e punta la scrivania: dal paralume esce un cono di luce color ambra che sfuma e sul piano si accende una pozza ovale. Quando il puntatore entra nella scrivania il paralume lo segue: i bracci si piegano al gomito per portare la testa a una distanza fissa da lui, oscillano un poco sulle molle e si fermano, il paralume ruota più svelto dei bracci e il cono e la pozza lo seguono; uscendo dalla scrivania la lampada torna a guardare il piano. In alto a destra un interruttore a pillola dice On in ambra (Off in grigio): un clic lì, o sulla scrivania, spegne e riaccende, e il paralume fa un piccolo cenno. Sotto, il nome Arca desk lamp in Jost, il prezzo, Steel and cast iron · Chalk e tre quadratini di vernice, Chalk, Sage e Brick, con un anello che scivola su quello scelto mentre la lampada cambia colore.

Come funziona

Dove deve stare la testa

La lampada punta dove sei: la testa si mette a REACH unità dal punto mirato, sulla retta che torna verso la spalla, sopra il piano della scrivania e dentro il disegno. Il punto mirato insegue il puntatore con un piccolo ritardo, così la lampada non scatta mai.

Un braccio con due ossa

Spalla, gomito e testa sono un braccio a due ossa (ARMS): la distanza fra spalla e testa, limitata a quello che i bracci arrivano a coprire, dà l’angolo al gomito col teorema del coseno. Delle due soluzioni si prende quella col gomito in alto, come una lampada vera, a meno che il gomito finisca fuori dal disegno.

Una molla per ogni snodo

I due bracci e il paralume hanno ognuno la sua molla d’angolo (SPRING per i bracci, HEAD per il paralume, più svelta), integrate sul ticker di GSAP in quattro sotto-passi col passo limitato a 1/30 di secondo. Gli angoli si srotolano verso la meta, così uno snodo non fa mai il giro lungo; quando tutto è fermo il ticker si stacca.

La luce

Dalla bocca del paralume partono due raggi aperti di BEAM gradi: dove toccano il piano si fermano, altrimenti vanno lontano, e fra loro c’è il cono, riempito da un gradiente lineare lungo l’asse che sfuma a zero. Dove l’asse tocca la scrivania c’è la pozza, un’ellisse con un gradiente radiale larga quanto il cono lì. Tutta la luce è in mix-blend-mode screen sopra il fondo scuro.

Accendere e spegnere

Accendendo la luce sale al 55%, ricade al 40% e poi sale piena, come un filamento che si scalda; spegnendo cala in un quinto di secondo. In tutti e due i casi il paralume riceve una piccola spinta e fa un cenno. La finitura cambia la variabile --lamp con un tween di colore.

Tastiera e tocco

La scrivania prende il focus: le frecce spostano il punto mirato di 14 unità (40 con Maiuscolo), Invio e Spazio accendono e spengono, Esc la rimanda a guardare il piano. L’interruttore è un button con aria-pressed e le finiture un radiogroup. Al telefono il dito che tocca o trascina sulla scrivania mira la lampada (touch-action: none) e l’interruttore la accende.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FINISHES`	script.js	`[{ name: 'Chalk', color: '#ebe7e0' }, …]`	Le finiture in vendita: il nome e il colore della vernice. Al massimo cinque; meglio colori chiari o accesi, perché la scrivania è scura.
`ARMS`	script.js	`[92, 86]`	La lunghezza dei due bracci, nelle unità del disegno (la scrivania è larga 300).
`REACH`	script.js	`74`	A che distanza resta il paralume dal punto a cui mira.
`SPRING`	script.js	`[70, 0.55]`	La molla dei bracci: quanto è rigida e quanto è frenata (1 = senza rimbalzi).
`HEAD`	script.js	`[150, 0.6]`	La molla del paralume.
`BEAM`	script.js	`21`	Metà dell’apertura del cono di luce, in gradi.

Provali nel Playground

Quando usarla

Per la scheda di una lampada, di un faretto o di un oggetto d’arredamento in un negozio di design; anche per un’app della casa intelligente, una lampada da lettura in un catalogo o la pagina di uno studio che disegna oggetti. Funziona dove si vuole che il prodotto risponda alla mano come farebbe in negozio.

Sul telefono

La card è larga 340 pixel, o lo schermo meno 32, e il disegno si adatta con la sua viewBox. Il dito che tocca la scrivania sposta la mira e trascinandolo la lampada lo segue (sopra la scrivania il dito non fa scorrere la pagina); per accendere e spegnere c’è l’interruttore, alto 34 pixel. Molle e luce sono quelle del computer.

Con il movimento ridotto

La lampada non insegue il puntatore lungo la strada: quando la mira cambia il disegno si attenua un attimo e torna con la lampada già girata. Niente entrata, niente singhiozzo: la luce si accende e si spegne con una dissolvenza, e le finiture cambiano colore in un attimo.

Trappole

Mirando in alto a sinistra, vicino alla base, il gomito «in alto» usciva dal bordo sinistro del disegno: si prende l’altra soluzione quando quella in alto finirebbe fuori, e la testa resta sempre dentro il disegno.
Le molle sugli angoli, quando l’angolo passava da +180 a −180 gradi, facevano fare allo snodo un giro intero all’indietro: ogni meta si srotola verso l’angolo attuale prima di darla alla molla.
Il colore della luce scritto come var() negli attributi stop-color dei gradienti non funziona: gli attributi di presentazione non leggono le variabili CSS, quindi lo stop-color sta in una regola CSS.
Il cono, sfumato fino a zero esattamente nel punto in cui l’asse tocca il piano, finiva con un taglio netto dove i raggi di bordo andavano più lontano: il gradiente arriva al 125% di quella distanza.

Librerie

GSAP 3.15.0, Jost (font variabile) 5.3.0.

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

Collaudo

Provata il 19 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.