Case study · Sito web · Ingegneria industriale
CCTP
Un'azienda che produce attrezzature per la perforazione vende a ingegneri: gente che vuole dati, non aggettivi. Qui il sito è costruito come un rapporto tecnico che si muove: numeri veri, grafici, una scena 3D nel pozzo che si controlla con lo scroll, e i casi sul campo su una mappa.
- Progetto
- CCTPbrand concept
- Settore
- Ingegneria per la perforazioneriduzione di attrito e vibrazioni
- Tipo
- Sito web multipaginaprodotti, casi, ingegneria, contatti, due lingue
- Cosa abbiamo fatto
- Design, sviluppo, motion, scena 3Ddal sistema visivo al codice
- Tecnologie
- GSAP, Lenis, Barba, WebGL, MapboxHTML statico, ApexCharts
Il punto di partenza
Un sito tecnico che deve muoversi come un prodotto ben fatto
Nel B2B industriale i siti sono spesso cataloghi in PDF con un menu. Chi decide un acquisto da centinaia di migliaia di euro, però, giudica anche dalla cura: se il sito è preciso, forse lo è anche l'attrezzatura. Volevamo un sito che dimostrasse rigore in ogni dettaglio, senza diventare un giocattolo.
Abbiamo costruito un sistema visivo da rapporto tecnico: monospazio per le etichette, parentesi quadre, arancione per una cosa sola alla volta. E abbiamo speso il movimento dove serve: i numeri dei risultati che rotolano, i grafici che confrontano con e senza il prodotto, una scena 3D nel pozzo dove lo scroll fa scendere la colonna di perforazione, una mappa con i casi.
01
Prove prima delle parole
Coppia, carico al gancio, metri raggiunti: i numeri dei casi reali stanno nella seconda schermata, con il grafico.
02
Far capire il prodotto
Una scena 3D controllata dallo scroll mostra dove lavorano gli utensili lungo il pozzo. Si capisce in dieci secondi.
03
Portare ai dati del cliente
In fondo: mandaci i dati del tuo pozzo, ti restituiamo la configurazione e l'impatto atteso. Risposta entro un giorno.
Cosa abbiamo costruito
Un rapporto tecnico che scorre
Home, prodotti, casi, ingegneria, chi siamo, contatti. In due lingue, con le pagine che si passano il testimone senza ricaricare.
01
L'apertura con l'utensile
Un utensile fotografato come un oggetto di design, il titolo sottolineato da un marker arancione che scorre, tre righe di presentazione e il tasto verso i casi. Scorrendo, la foto si scurisce piano e lascia il posto alla sezione dopo.
Prima ancora, un preloader a griglia: il logo, una trama di crocette che si riempie, due illustrazioni, poi la tenda che sale.
02
I risultati con i grafici
«Results, proven on real projects»: meno 48% di coppia, meno 23 tonnellate al gancio. Ogni numero rotola come un contachilometri quando entra nello schermo, e accanto un grafico traccia le due curve, con e senza l'utensile.
I grafici sono disegnati in pagina, non immagini: si leggono anche da telefono.
03
La scena nel pozzo
La pagina si ferma e lo scroll diventa un comando: la colonna scende nel pozzo curvo, gli utensili compaiono nelle zone dove lavorano, una scala segna la profondità. In basso: torna all'inizio, scorri, salta.
È il modo più rapido per spiegare un prodotto che sta a tre chilometri sotto terra.
04
I tre prodotti
FRS, SVR, Transfer X3: per ognuno la foto grande, la sezione, una descrizione di tre righe e i vantaggi numerati. Le forme geometriche accanto ai titoli si aprono a ventaglio scorrendo.
Ogni prodotto ha la sua pagina, raggiunta con una tenda arancione che sale e scende.
05
I casi e la mappa
Dieci casi sul campo, ognuno con il tipo di pozzo, la regione, i risultati e la data. Al passaggio del mouse la card si apre: la foto scende dall'alto, le righe si svelano, la data sale.
Poi la mappa: un globo scuro dove ogni caso è un punto, e le frecce volano da un pozzo all'altro. Chiude il modulo: mandaci i dati del tuo pozzo.
Da telefono la scena nel pozzo va a passi, con uno scatto per fase, e le card dei casi mostrano tutto senza hover.
Come è fatto
Sotto il cofano: lo scroll che comanda
Sei meccanismi costruiti a mano con GSAP, uno alla volta. Dal preloader alla tenda tra le pagine.
- GSAP
- ScrollTrigger
- SplitText
- Lenis
- Barba
- WebGL
- Mapbox
- ApexCharts
pagina ferma · lo scroll cala la colonna
La scena 3D che si controlla con lo scroll
Cosa vedi. Arrivi alla scena e la pagina si ferma. Scorri: la colonna scende nel pozzo curvo, gli utensili compaiono, la scala segna i metri. Alla fine la pagina riparte. C'è sempre «skip».
Come è fatto. La sezione è fissata con ScrollTrigger per quattro schermate di scroll: il progresso da 0 a 1 va alla scena WebGL, che posiziona la colonna lungo la traiettoria. Da telefono si va a passi, con uno scatto per fase, e la rotella esce dalla scena solo agli estremi. La scena si carica da sola quando ti avvicini.
of drilling
Il preloader a griglia
Cosa vedi. Quattro celle: il logo su arancione, una trama di crocette che si riempie da sinistra con la percentuale, due illustrazioni che si muovono. A cento, «ready», e la tenda sale.
Come è fatto. Il riempimento non è il caricamento vero: segue una curva a punti, veloce all'inizio, una pausa a metà, poi lo scatto finale, per sembrare un sistema che lavora. Le illustrazioni girano e si sovrappongono in ciclo. Alla fine un livello copre tutto e la griglia esce verso l'alto. Si vede una volta per sessione.
ogni cifra è un rullo: due giri e si ferma
I numeri che rotolano come un contachilometri
Cosa vedi. Meno 48%: quando entra nello schermo, ogni cifra gira su se stessa e si ferma sul valore giusto, una dopo l'altra.
Come è fatto. Ogni cifra diventa un rullo verticale con i numeri da 0 a 9 ripetuti due volte. Un'animazione lo fa scorrere fino alla cifra finale con una curva che frena forte; le cifre partono con quaranta millisecondi di ritardo l'una dall'altra, e i blocchi con cento. Il segno e il simbolo non girano.
la barra copre la riga, il testo resta
Il marker arancione sui titoli
Cosa vedi. I titoli entrano riga per riga: una barra arancione copre la riga da sinistra, e quando si ritira il testo è lì sotto.
Come è fatto. Il titolo è diviso in righe con SplitText. Per ogni riga una barra cresce da sinistra in 0,78 secondi, poi cambia origine e si ritira verso destra mentre il testo diventa visibile. Le righe partono a cento millisecondi di distanza. Se il plugin non carica, dopo quattro secondi il testo compare comunque.
hover: foto dall'alto, righe mascherate, data dal basso
La card del caso che si apre al passaggio
Cosa vedi. Sulla card di un caso: la foto dell'utensile scende dall'alto, la sigla si sposta, la descrizione compare riga per riga e la data sale dal basso.
Come è fatto. Le righe della descrizione sono divise con SplitText e ognuna ha una maschera: al passaggio traslano da meno cento a zero, con sei centesimi di ritardo l'una dall'altra. La foto parte sopra la card e scende, la data parte sotto e sale. Da telefono, dove non c'è hover, la card mostra tutto subito.
sale 0,8 s · etichetta · continua 1 s
La tenda tra una pagina e l'altra
Cosa vedi. Clicchi un prodotto: una tenda arancione sale dal basso in meno di un secondo, mostra il nome della pagina, e continua verso l'alto scoprendo la pagina nuova.
Come è fatto. Le pagine si cambiano senza ricaricare, con Barba: la pagina nuova viene caricata mentre la tenda sale (0,8 secondi), la tenda si ferma il tempo dell'etichetta, poi prosegue (1 secondo) e la pagina vecchia viene rimossa. Lo scroll, le animazioni e la scena vengono reinizializzati a ogni arrivo.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni azienda tecnica
Industria, ingegneria, componenti, macchine: se vendi a tecnici, il sito deve parlare la loro lingua e muoversi con precisione.
01
Numeri veri, in alto
Un risultato misurato con il grafico accanto vale più di qualsiasi claim. Mettilo nella seconda schermata.
02
Spiega con una scena, non con un paragrafo
Se il prodotto lavora dove nessuno lo vede, mostralo: una scena controllata dallo scroll fa capire in dieci secondi.
03
Il rigore è un sistema
Monospazio, parentesi, un colore per una cosa sola. Quando ogni dettaglio segue la regola, il sito sembra costruito come il prodotto.
04
Ogni effetto ha un'uscita
Skip sulla scena, tenda breve, preloader una volta sola. Il movimento non deve mai trattenere chi ha fretta.
05
Chiudi con i dati del cliente
«Mandaci i dati del tuo pozzo» è una richiesta precisa: chi la fa è già un cliente.
Il prossimo potrebbe essere il tuo
Vuoi un sito tecnico che si muova con precisione?
Industria, ingegneria, componenti, macchine: se il tuo sito è un catalogo fermo, costruiamo un sistema che dimostri il rigore del prodotto. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti