Rugiada: un lancio fatto solo di codice

L'esperimento

Una domanda ci girava in testa da un po': un brand può presentare un prodotto con la forza di uno spot, ma dentro una pagina web, senza un solo file video? Niente player, niente caricamenti, niente sgranature quando lo schermo è grande. Solo codice che disegna, fotogramma dopo fotogramma, mentre lo guardi.

Per scoprirlo ci serviva un brand. Così abbiamo inventato Rugiada, un piccolo laboratorio skincare milanese, e il suo primo prodotto, il Siero 01: un flacone di vetro color pesca, un siero verde acqua, un'identità fatta di gocce.

Sette capitoli, una goccia

Abbiamo scritto il lancio come un cortometraggio. Una goccia cade nel buio e fa partire tutto. Tre parole entrano in scena, ognuna con il suo colore e il suo modo di muoversi. Centinaia di goccioline piovono dall'alto e si condensano nel nome del brand come su un vetro appannato. Il flacone sale in scena tra bollicine e riflessi, la formula si trasforma in una piccola dashboard in cui la morbidezza della pelle cresce fino a uscire dal grafico e finire, letteralmente, alle stelle. Poi il claim, e il logo, con una goccia pesca che diventa il puntino della "I".

Il liquido è il filo che tiene insieme tutto, lo stesso del nostro Concept 01: i Lab di Glow parlano la stessa lingua.

Lo stack

Nessun framework, nessuna libreria esterna, nessun file video: JavaScript moderno, scritto da zero.

• Rendering a due livelli su HTML5 Canvas 2D. Un livello disegna scene, tipografia e grafici; un secondo livello ospita solo le gocce. Si lavora in uno spazio virtuale di 1600×900 punti, scalato alla dimensione reale e alla densità dello schermo (fino a 2×), così il film è nitido dal telefono al monitor 4K.
• Liquido con filtri SVG. Sul livello delle gocce agisce un filtro feGaussianBlur + feColorMatrix: le forme vengono sfocate e poi "indurite" sulla trasparenza, così quando due gocce si avvicinano si fondono. Il raggio della sfocatura si ricalcola a ogni ridimensionamento.
• Motore a capitoli. Una timeline scritta su misura sopra requestAnimationFrame, con tempo delta limitato, curve di easing cubiche, "back" ed elastiche, e salto istantaneo a qualsiasi capitolo.
• Un logo fatto di particelle. Il nome viene disegnato fuori schermo e campionato pixel per pixel (getImageData): ne escono circa 750 punti, e ogni goccia ne raggiunge uno con il suo ritardo.
• Tipografia del sito. Inter Tight variabile, Instrument Serif e JetBrains Mono in WOFF2 ospitati sul nostro server; il primo fotogramma parte solo dopo document.fonts.ready.
• Web API per l'esperienza. IntersectionObserver per partire quando il film è visibile, Page Visibility API per fermarlo in background, Fullscreen API per lo schermo intero, prefers-reduced-motion per chi preferisce meno movimento.
• Collaudo automatico. Ogni capitolo è verificato con Playwright su Chromium/Edge e WebKit, il motore di Safari, simulando iPhone 13 e iPhone SE.
• Pronto per i social. Lo stesso codice si può registrare fotogramma per fotogramma ed esportare in MP4 verticale per Reels e TikTok.

Per chi è

Per i brand che lanciano qualcosa: un prodotto cosmetico, una linea di trattamenti, un nuovo centro estetico. La stessa presentazione può vivere in tre posti: come apertura del sito, come video verticale per i social e come sigla di una presentazione dal vivo a clienti o distributori.

Un lancio si ricorda per come ti fa sentire nei primi dieci secondi.

Concept realizzato da Glow Creative Agency a scopo dimostrativo. Rugiada è un marchio di fantasia: prodotto, formula, grafici, percentuali e data di lancio sono inventati, non sono indicazioni cosmetiche reali e ogni somiglianza con brand esistenti è casuale. Grafica, animazioni e codice sono originali; nessuna immagine stock.