01
Design & Brand
Identità visive distintive, design system robusti e direzione artistica end-to-end.
- UX/UI Design
- Brand identity
- Design system
Studio creativo · Anno 2026
Esperienze digitali cinematiche per brand visionari.
Progettiamo prodotti, siti e identità che fondono design, tecnologia e storytelling in un'unica esperienza memorabile.
Scroll
01 — Chi siamo
Un collettivo di designer, sviluppatori e narratori che trasforma idee complesse in esperienze fluide.
NOVA nasce dall'incontro tra estetica radicale e ingegneria di precisione. Lavoriamo con startup ambiziose e brand globali per creare prodotti digitali che non si limitano a funzionare — emozionano, convertono, restano.
Crediamo che il design migliore sia invisibile, che la performance sia un atto creativo e che ogni pixel debba avere un perché.
- ✓Design systems scalabili
- ✓Sviluppo headless & jamstack
- ✓Motion & 3D experience
- ✓Brand strategy end-to-end
02 — Servizi
Quattro discipline. Un'unica visione.
02
Development
Web, mobile e prodotti su misura. Architetture moderne, performance estreme.
- Next.js · Astro · Svelte
- Headless CMS
- Cloud-native
03
Motion & 3D
Animazioni cinematiche, micro-interazioni e mondi 3D real-time per il web.
- WebGL & Three.js
- Motion design
- Interactive 3D
04
Strategy
Roadmap di prodotto, posizionamento di marca e analisi data-driven.
- Product strategy
- Research & insight
- Go-to-market
03 — Selected work
Progetti che spingono il limite del possibile.
2026 · Fintech
Aurora Protocol
Dashboard di trading istituzionale, completamente ridisegnata.
2025 · Editorial
Lumen Studio
Sito immersivo per uno studio fotografico premiato.
2025 · Automotive
Voltari EV
Lancio digitale del concept car a zero emissioni.
2024 · Healthtech
Helix Health
App di monitoraggio biometrico con motion design avanzato.
2024 · Travel
Atlas Travel
Piattaforma di viaggi su misura, completamente headless.
0
+
Progetti consegnati
0
Award internazionali
0
%
Clienti soddisfatti
0
Talenti nel team
04 — Il nostro processo
Quattro fasi. Zero compromessi.
Fase 01
Discovery
Workshop, ricerca utente e analisi competitiva. Decodifichiamo il problema.
Fase 02
Strategy
Definiamo posizionamento, architettura informativa e roadmap.
Fase 03
Design & Build
Prototipi alta fedeltà, design system, sviluppo iterativo settimanale.
Fase 04
Launch & Evolve
Deploy, monitoraggio performance e iterazione data-driven post-lancio.
05 — Cosa dicono
La fiducia di team straordinari.
06 — FAQ
Le domande più frequenti.
Quanto dura un progetto medio?
Tipicamente tra 6 e 14 settimane, in base alla complessità. Pianifichiamo sempre fasi chiare con milestone settimanali.
Lavorate anche con startup early-stage?
Sì, abbiamo un programma "Founders" con condizioni dedicate per realtà pre-seed e seed selezionate.
Posso vedere case study dettagliati?
Certamente. Su richiesta condividiamo case study riservati con metriche, processi e learning.
Offrite supporto post-lancio?
Sì. Proponiamo retainer mensili per evoluzione di prodotto, performance monitoring e nuove feature.
Con quali tecnologie lavorate?
Next.js, Astro, Svelte, Three.js, GSAP, Tailwind, headless CMS (Sanity, Contentful), Cloudflare e AWS.
07 — Dietro le quinte
Come funzionano le animazioni di questo sito.
Niente librerie pesanti né video: solo CSS moderno, JavaScript vanilla e GSAP con ScrollTrigger. Ecco la tecnica dietro ogni effetto, per chi vuole guardare sotto il cofano.
01
CSSJS
Loader d'ingresso
Le lettere di NOVA salgono con @keyframes e ritardi scalati di 80 ms. La barra avanza con un intervallo JS e, al 100%, l'overlay sfuma con una transizione di opacità e visibilità.
02
JSrAF
Cursore personalizzato
Punto e anello sono due layer fissi: il punto segue il mouse 1:1, l'anello lo insegue con interpolazione lineare (lerp 0.15) in requestAnimationFrame. mix-blend-mode: difference lo rende leggibile su ogni sfondo; su touch è disattivato.
03
JS
Barra di avanzamento
Un listener di scroll passivo calcola scrollTop / (scrollHeight − clientHeight) e aggiorna la larghezza della linea sfumata fissata in cima alla pagina.
04
GSAP
Titolo hero
Ogni parola è avvolta in uno span con overflow nascosto e parte da translateY(110%): GSAP la riporta a zero con ease expo.out e stagger, creando l'effetto "sipario" riga per riga.
05
GSAPScrollTrigger
Sfere luminose
Tre gradienti radiali con blur(80px) seguono il mouse con profondità diverse (parallasse) e traslano allo scroll in modalità scrub, legata alla posizione della pagina.
06
CSS
Marquee infinito
La fila di parole è duplicata e trasla del 50% con un'animazione lineare infinita: quando il primo gruppo esce dallo schermo, il secondo è identico — il loop non ha stacchi visibili.
07
GSAPIntersectionObserver
Reveal allo scroll
Sezioni e titoli entrano con ScrollTrigger (fade + slide con stagger); i titoli vengono spezzati parola per parola lavorando sui nodi DOM. Se GSAP non si carica, subentra un IntersectionObserver con classi CSS.
08
CSS varsJS
Glow delle card
Al passaggio del mouse le coordinate vengono scritte nelle custom properties --mx/--my, usate da un radial-gradient: il bagliore segue il puntatore senza ridisegni JS.
09
ScrollTrigger
Showcase orizzontale
La sezione progetti è "pinnata": lo scroll verticale viene mappato sulla traslazione orizzontale della traccia (scrub), con distanza ricalcolata a ogni resize. Su mobile torna una lista verticale.
10
IntersectionObserverrAF
Contatori animati
Quando le statistiche entrano nel viewport, parte un count-up in requestAnimationFrame con easing cubico in uscita: rapido all'inizio, morbido sull'arrivo.
11
ScrollTrigger
Timeline del processo
La linea verticale si riempie in sincrono con lo scroll (scrub), mentre gli step entrano in sequenza da sinistra con un leggero ritardo l'uno dall'altro.
12
CSSJS
Slider testimonianze
La traccia flex trasla via transform con una transizione morbida; autoplay ogni 6 secondi, in pausa quando il mouse è sopra o la scheda del browser è nascosta.
13
CSS
Micro-interazioni
Label fluttuanti dei campi con :placeholder-shown, icona FAQ che ruota su <details> nativo, grana pellicola con SVG in overlay e tema chiaro/scuro con transizioni sulle custom properties.
14
Accessibilità
Rispetto delle preferenze
Con prefers-reduced-motion attivo, animazioni e smooth scroll si disattivano; senza JavaScript un blocco noscript mostra comunque tutti i contenuti; Esc chiude il menu mobile.
08 — Iniziamo
Hai un'idea audace?
Hai un'idea audace?
Costruiamola insieme.
Raccontaci il tuo progetto. Risponderemo entro 24 ore con un piano d'azione.