FD/STUDIO Megashow

00 / 10 Ingresso

Bonus della vetrina FD Studio

MEGA
SHOW

Tutto quello che sappiamo fare, in una pagina sola. Il logo qui accanto è fatto di 12.000 puntini disegnati dalla scheda grafica: passaci sopra col mouse. Poi scorri: ogni capitolo ti mostra una cosa che possiamo costruire per il tuo sito, spiegata in parole semplici.

Three.js · GLSL · 12.000 particelle

02

Tipografia viva

Il testo entra una riga alla volta mentre scorri, la parola arancione cambia da sola ed “ELASTICO” si allarga seguendo il tuo puntatore. Resta testo vero, che Google legge normalmente. Serve quando hai un messaggio importante e vuoi che venga letto davvero, non saltato.

Le parole entrano una riga alla volta, al ritmo di chi legge.

Costruiamo siti web

ELASTICO

Muovi il puntatore qui sopra: larghezza e peso del carattere seguono la tua mano. wdth 100 · wght 400

GSAP SplitText · ScrambleText · font variabili (assi wdth e wght)

03

Lo scroll come regia

Scorrendo, la scena resta ferma e si trasforma: è la rotella del mouse a mandare avanti e indietro l’animazione, come un video. Serve per spiegare un metodo, un prodotto in più fasi o la storia del tuo marchio, e accompagna chi legge fino in fondo.

  1. 01Ascoltiamo

    Una chiamata per capire cosa vendi, a chi e cosa non funziona oggi.

  2. 02Disegniamo

    Struttura, testi e stile, su misura: niente modelli presi a caso.

  3. 03Costruiamo

    Codice scritto a mano, veloce, che si legge bene su ogni schermo.

  4. 04Mettiamo online

    Sul tuo dominio, con assistenza dopo il lancio. Il sito resta tuo.

ScrollTrigger pin e scrub · MorphSVG · DrawSVG · MotionPath

04

Il prodotto si gira con un dito

Un orologio in 3D vero: giralo trascinandolo, cambia materiali e colori, scrivi un nome da incidere e guarda il prezzo aggiornarsi. Serve a chi vende prodotti personalizzabili, come mobili, gioielli o abbigliamento: il cliente vede cosa compra e fa meno domande.

Trascina per girarlo. Le lancette segnano l’ora vera.

FD Cronografo edizione Megashow

Cassa
Quadrante
Cinturino
Totale 690 €

Acciaio, quadrante Notte, cinturino in pelle

Three.js · materiali PBR con riflessi · texture disegnata in Canvas 2D · trascinamento con inerzia

05

Interfacce che si toccano

Prendi un adesivo e lancialo: rimbalza sui bordi, con il mouse o con le dita. Sotto, i lavori si riordinano con un movimento morbido quando filtri. Serve per cataloghi e portfolio: chi guarda capisce subito cosa è cambiato, come in un’app.

Il nostro arsenale. Prendi un adesivo e lancialo.

    GSAP Draggable · InertiaPlugin · Flip

    06

    Numeri che respirano

    Numeri, grafico e mappa si aggiornano da soli, senza ricaricare la pagina. Qui i dati sono simulati; nel tuo sito arriverebbero dal gestionale o dal negozio online. Serve per pannelli di vendite, prenotazioni o consegne da seguire in tempo reale.

    Visitatori adesso

    aggiornato ogni secondo

    Ordini oggi

    +18% rispetto a ieri

    Tempo di caricamento

    media degli ultimi 7 giorni

    Visite al minuto, ultimi 60 secondi

    LIVE

    Da dove arrivano gli ordini

    LIVE

      Calcoli pesanti, pagina sempre fluida

      Cos’è
      Un’immagine che a ogni ingrandimento richiede milioni di calcoli. Il sito li fa dietro le quinte: mentre calcola puoi continuare a scorrere e cliccare, niente si blocca.
      A cosa serve
      Quando il tuo sito deve fare lavori pesanti: filtrare migliaia di prodotti, calcolare un preventivo complesso, preparare foto o documenti prima dell’invio. Il cliente non vede mai la pagina “congelata”.

      Web Components · SVG · Leaflet e OpenStreetMap · Web Worker con trasferimento di memoria

      07

      Il web di oggi, usato davvero

      Sei piccole prove di funzioni già incluse nei browser di oggi: cambio tema, cambio lingua, suoni, schede che si adattano allo spazio. Non servono programmi aggiuntivi, quindi il sito resta leggero e veloce anche sul telefono.

      Cambio tema con View Transitions

      Tutta la pagina passa da scura a chiara con un cerchio che parte dal tuo clic.

      Due lingue, nessun ricaricamento

      Le traduzioni sono scritte in TypeScript, con un tipo che elenca ogni frase: se ne manca una, l’editor lo segnala subito.

      Suoni generati dal vivo

      Nessun file audio: ogni suono è sintetizzato dal browser con la Web Audio API. Suona i tasti.

      Componenti che si adattano allo spazio

      Sposta il cursore per stringere o allargare lo spazio: la scheda cambia forma da sola in base al posto che ha, come succede quando la stessa scheda finisce in una colonna stretta o in una pagina larga.

      Attico in centro3 locali · 112 m²€ 640.000

      Logica in puro CSS

      Spunta tutto: la scheda festeggia senza una riga di JavaScript, grazie al selettore :has().

      Pronto per andare online.

      Animazioni legate allo scroll, solo CSS

      La barra arancione in cima alla pagina e queste tacche avanzano con lo scroll senza JavaScript.

      View Transitions API · TypeScript · Web Audio API · container queries · :has() · animation-timeline

      08

      Oltre il sito

      Non facciamo solo siti. Qui sotto c’è un canale Discord con il nostro bot (prova /evento) e un’interfaccia di gioco FiveM: tieni premuto W per guidare e trascina gli oggetti dell’inventario. Serve se hai una community da gestire o un server di gioco a cui dare un’identità.

      # bot-comandi Prova i comandi del bot

        0km/h

        G N

        Inventario trascina tra gli slot, doppio clic per usare 4,6 / 30 kg

        discord.js e slash command · FiveM con Lua e interfacce NUI in HTML · Draggable con aggancio agli slot

        09

        Laboratorio

        Funzioni che di solito richiedono un’app, dentro un sito: si installa sul telefono e si apre senza internet, usa la fotocamera, prepara le foto per il web e risponde alle domande dei clienti. Senza passare dagli store e senza pagare due sviluppi.

        A

        Si installa come un’app e funziona offline

        Questa pagina si può aggiungere alla schermata home del telefono o al computer, con la sua icona. Dopo la prima visita si apre anche senza connessione.

        • Pronta per l’uso offline…
        • Connessione…
        • Aperta come app…

        Prova: dopo averla aperta una volta, spegni il Wi-Fi e ricarica la pagina. Si apre lo stesso, 3D compreso.

        B

        Prova il prodotto con la fotocamera

        Accendi la fotocamera e indossa gli occhiali FD: trascinali sul viso, ridimensionali, cambia colore e scatta una foto da salvare.

        La fotocamera è spenta

        Tutto succede sul tuo dispositivo: nessuna immagine viene inviata o salvata da noi.

        C

        Foto pronte per il sito, senza programmi

        Carica una foto dal telefono: scegli il formato, sposta il riquadro e ottieni un file leggero, pronto per il web. Utile per chi pubblica annunci, menù o prodotti da solo.

        D

        Un assistente che risponde ai clienti

        Fai una domanda su FD Studio o tocca un suggerimento. Le risposte arrivano parola per parola e rimandano al capitolo giusto della pagina.

          Demo simulata: le risposte sono preparate da noi. Nella versione vera un modello di intelligenza artificiale legge i testi del tuo sito tramite un piccolo server e risponde a qualsiasi domanda, 24 ore su 24.

          Service Worker e Web App Manifest · getUserMedia e Canvas · WebP generato nel browser · risposte in streaming

          10

          Hai visto cosa sappiamo fare. Ora tocca al tuo progetto.

          Sito, negozio, configuratore 3D, bot o server: raccontaci l’idea e ti rispondiamo con tempi e preventivo.

          Scrivi a FD Studio Torna ai template
          • HTML
          • CSS
          • JavaScript
          • TypeScript
          • GLSL
          • SVG
          • Three.js
          • GSAP
          • Lenis
          • Leaflet
          • Web Workers
          • Web Audio
          • View Transitions
          • Web Components
          • Lua
          • discord.js
          • Service Worker
          • getUserMedia