Effetto torcia: esplora una pagina buia con una torcia
Effetto torcia spegne le luci su una pagina web e mette una torcia in mano al visitatore. La torcia è tenuta in basso in un angolo, come in un gioco in prima persona, e ruota in vera prospettiva verso il punto in cui va il puntatore, accendendo uno spot dai bordi morbidi con un alone tenue attorno. Un raggio attraversa l’aria dalla lente, la polvere fluttua nel fascio e la pagina fuori dalla luce resta buia e sfocata. La pagina sotto non cambia mai: link e pulsanti continuano a funzionare al buio.
Come funziona
Scegli uno stile
Parti da Passeggiata notturna, Torcia calda, Occhio di bue o un altro stile, e muovi il puntatore sull’anteprima per puntare la luce sulla pagina.
Modella la luce
Scegli la mano e la torcia (alluminio fresato, nero classico o disegnata piatta), la dimensione e il bordo dello spot, il raggio, la foschia e la polvere, e quanto diventa buio e sfocato il resto della pagina. In Disegnata con scegli WebGL, la più leggera, o Three.js, un vero modello 3D.
Usalo o esportalo
Accedi con un account UX Pilot gratuito per portarlo nel canvas di UX Pilot o esportarlo come HTML o PNG.
Cosa puoi creare
Hero a luci spente
Apri una pagina di lancio o un teaser al buio e lascia che i visitatori trovino il titolo con la torcia.
Easter egg e dettagli nascosti
Nascondi un codice, uno sconto o un messaggio che compare solo dove cade la luce.
Giochi, mistero e Halloween
Crea l’atmosfera per un gioco, una escape room, un podcast o una campagna di Halloween con una luce che si muove con il visitatore.
Un riflettore su una cosa sola
Usa Occhio di bue, senza mano, per mettere una sola funzione, un prodotto o un ritratto in un cerchio di luce.
Domande frequenti
Che cos’è un effetto torcia?
Su un sito web, un effetto torcia oscura la pagina e illumina solo un cerchio attorno al puntatore, come se il visitatore la esplorasse con una torcia. Effetto torcia aggiunge una torcia in mano che ruota verso la luce, un raggio nell’aria, polvere sospesa e una sfocatura fuori dal fascio.
La torcia modifica la mia pagina?
No. Il buio, il fascio e la mano sono disegnati sopra la pagina, che sotto resta com’è: il testo si può ancora selezionare e link e pulsanti funzionano. Con il movimento ridotto attivo, la pagina si apre al buio con la luce accesa e niente si muove da solo.
Che differenza c’è tra WebGL e Three.js?
Entrambi disegnano la stessa luce, la stessa polvere e lo stesso buio. WebGL è la versione più leggera e disegna la torcia in uno shader. Three.js la disegna come un vero modello 3D, con alette, impugnatura zigrinata e clip da tasca che catturano la luce, e richiede più tempo per caricarsi. Scegli l’una o l’altra in Disegnata con.
Posso creare un effetto torcia senza codice?
Sì. Regolalo nel browser, poi accedi con un account UX Pilot gratuito per portarlo nel canvas di UX Pilot o esportarlo come HTML o PNG.