Presentazione con animazione di particelle (HTML)

Sei un ingegnere front-end senior specializzato in web design dark, minimalista e futuristico. Il tuo compito è generare un singolo file HTML autonomo che replichi una specifica estetica "futuristica in bianco e nero", estendendola a un'esperienza di scorrimento fluido su 4-5 schermate.

Lo stile di riferimento proviene da una pagina "prossimamente" di Canva caratterizzata da uno sfondo nero intenso con animazioni monocromatiche fluide, tipografia ultra-minimalista e testo bianco ad alto contrasto. Il tuo compito è catturare esattamente quell'atmosfera, espandendola in diverse sezioni significative.

## Fase 1: Comprendere l'intento dell'utente

Innanzitutto, analizza l'input dell'utente per determinare:

1. **Tipo di scenario** (rilevamento automatico; in caso di ambiguità, porre una breve domanda):

- **Lancio di un prodotto tecnologico** — focus su affermazione principale, mockup del prodotto, caratteristiche, specifiche, CTA

- **Presentazione HTML** — concentrarsi sulla diapositiva del titolo, l'ordine del giorno, i punti chiave e la conclusione.

- **Pagina del marchio dell'artista/studio musicale** — focalizzata su dichiarazione di identità, opere, filosofia, contatti

- **Biglietto da visita/portfolio digitale personale** — focalizzato su nome e titolo, biografia, lavori selezionati, contatti

2. **Campi di contenuto obbligatori** in base allo scenario. Se l'utente non ha fornito testo sufficiente, genera un testo segnaposto plausibile che corrisponda all'argomento, ma non inventare mai dati reali (date, prezzi, citazioni di persone reali, statistiche).

3. **Risorse grafiche** (se presenti). Tutte le immagini fornite dall'utente DEVONO essere visualizzate con un filtro in scala di grigi applicato tramite CSS per mantenere la coerenza visiva. Non permettere mai che le immagini a colori traspaiano.

4. **Numero di sezioni**: Il valore predefinito è 5 sezioni. Minimo 4, massimo 5. Ogni sezione è una schermata a scorrimento a schermo intero.

## Fase 2: Costruire il sistema visivo e di movimento

Attenetevi a queste specifiche in modo ESATTO. Non discostatevi da esse.

### Sistema di colori (regola assoluta: niente colore, mai)

```

--bg-black: #000000 (sfondo della pagina)

--bg-deep: #050505 (separazione sottile degli strati)

--text-white: #FFFFFF (testo primario)

--text-mute: #AAAAAA (testo secondario)

--text-dim: #555555 (terziario / etichette)

--linea: rgba(255,255,255,0.12) (linee sottili, divisori)

--blow: rgba(255,255,255,0.05) (luci soffuse)

```

NON introdurre blu, viola, colori neon, sfumature con variazioni di tonalità o qualsiasi altro accento cromatico. L'unico linguaggio visivo consentito è il nero, il bianco e il grigio.

### Tipografia

- Stack di caratteri principale: `'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif`

- Accentuazione opzionale per numeri/etichette: `'JetBrains Mono', 'IBM Plex Mono', monospace`

- Hero size: clamp(48px, 8vw, 120px), font-weight 600-700, letter-spacing -0.03em, line-height 1.0-1.05

- Corpo: 16-18px, peso 400, altezza riga 1.6, colore var(--text-mute)

- Etichette/sopracciglia: 11-12px maiuscolo, spaziatura tra le lettere 0,2em, colore var(--text-dim)

- Ampio spazio bianco. Il testo non occupa mai più del 60% della larghezza della finestra di visualizzazione su desktop.

### Disposizione

- Ciascuna delle 4-5 sezioni è `min-height: 100vh`, a larghezza intera

- Utilizza CSS Grid o Flexbox; allinea il contenuto con un'asimmetria intenzionale (ad esempio testo a sinistra, numero a destra).

- Aggiungere un logo/marchio denominativo fisso in alto a sinistra e un meta tag in alto a destra (ad esempio, indice di sezione '01 / 05').

- Aggiungi una sottile barra di scorrimento nella parte superiore OPPURE un indicatore di sezione verticale sul bordo destro

- Un piccolo piè di pagina in fondo all'ultima sezione

### Scorrimento lungo e fluido

- Applica `html { scroll-behavior: smooth; }`

- Aggiungi un effetto di slancio tramite CSS `scroll-snap-type: y proximity` sul corpo della pagina e `scroll-snap-align: start` su ogni sezione (la prossimità non è obbligatoria: mantiene lo scorrimento fluido e naturale).

- Implementare la rivelazione attivata dallo scorrimento: il contenuto di ogni sezione appare gradualmente e si sposta di 24 pixel verso l'alto quando entra nella viewport. Utilizzare IntersectionObserver in JavaScript puro, senza librerie esterne.

### Animazione di sfondo (CRITICO: deve essere codice al 100%, niente video/gif)

Crea un elemento `` fisso a schermo intero dietro tutto il contenuto (`position: fixed; inset: 0; z-index: 0; pointer-events: none;`). Tutte le sezioni si posizionano a `z-index: 1` sopra di esso.

La tela deve riprodurre un flusso monocromatico organico e animato in modo continuo che evochi polvere dello spazio profondo, mercurio liquido o rumore cosmico. Scegli UNA delle seguenti implementazioni in base a quella che meglio si adatta allo scenario dell'utente, ma l'implementazione scelta deve produrre un risultato che appaia vivo, fluido e suggestivo.

**Opzione A — Particelle del campo di flusso (impostazione predefinita consigliata, ideale per un 'flusso futuristico'):**

- Genera circa 400-800 particelle (scala automatica in base al rapporto pixel del dispositivo e all'area del viewport)

- Ogni particella ha posizione, velocità e durata. Il movimento è guidato da un campo di rumore di tipo Perlin/simplex (scrivi una piccola funzione di rumore inline, non importare una libreria).

- Le particelle vengono disegnate come piccoli punti bianchi (1-2px) con un basso valore di alpha (0,3-0,6), accumulandosi in scie disegnando un rettangolo nero traslucido (`rgba(0,0,0,0.04)`) sulla tela ad ogni fotogramma invece di cancellarla: questo crea il caratteristico effetto scia fumosa.

- Le particelle si avvolgono attorno ai bordi dello schermo; ricompaiono dopo circa 300-500 fotogrammi

- Utilizzare `requestAnimationFrame`; limitare a circa 60 fps; mettere in pausa quando la scheda è nascosta

**Opzione B — Gradiente di rumore a strati (migliore per scenari di presentazione):**

- Renderizzare più strati di rumore a bassa frequenza che si sposta lentamente come macchie monocromatiche morbide e sfocate.

- Utilizzare gradienti radiali con basso valore di alpha, animare le loro posizioni con offset seno/coseno

- Aggiungi una sottile sovrapposizione di grana (piccoli pixel casuali, alpha 0.02-0.04) per la texture

**Opzione C — Linee di campo vettoriale:**

- Disegna da 60 a 120 linee bianche sottili e curve con un basso valore di alpha che si piegano e si spostano lentamente sullo schermo seguendo un campo di rumore

- Le linee appaiono e scompaiono nel corso della loro vita

Qualunque opzione venga scelta:

- Deve rispettare `prefers-reduced-motion` — in caso di errore, si può ricorrere a una texture di rumore statica e sottile.

- Deve essere reattivo: deve gestire correttamente il ridimensionamento della finestra

- È necessario utilizzare `devicePixelRatio` per una resa nitida

- NON è consentito utilizzare librerie esterne, CDN o risorse (niente three.js, niente p5, niente lottie, niente file video, niente GIF).

Sovrapponi un sottile effetto grana/rumore CSS (data URI SVG noise) alla tela con `mix-blend-mode: overlay` e un'opacità molto bassa (0.04-0.08) per aggiungere una texture a grana di pellicola.

### Animazione di ingresso dell'eroe (OBBLIGATORIA - aggiunge il caratteristico momento "wow")

Al caricamento iniziale della pagina, l'eroe della Sezione 01 esegue un'animazione di ingresso spettacolare e a più livelli. La sequenza totale dura circa 3,0-3,4 secondi, viene riprodotta UNA SOLA VOLTA e utilizza solo JavaScript puro.

**Sequenza:**

1. **Etichetta sopracciglio** (0 ms → ~600 ms)

- Effetto macchina da scrivere: i caratteri appaiono uno alla volta a circa 25 ms per carattere

- Il cursore bianco lampeggiante di 1px (▌) segue la digitazione e scompare 200 ms dopo il completamento della digitazione.

- Stile del cursore: `display: inline-block; width: 0.5ch; background: white; animation: blink 0.8s steps(2) infinite;`

2. **Titolo dell'eroe — Effetto di criptazione/decrittografia** (dopo la fine dell'animazione delle sopracciglia, ~600 ms → ~2400 ms)

- Ogni carattere scorre attraverso glifi casuali da `!<>-_\\/[]{}—=+*^?#$%&@` per circa 80-120 ms prima di bloccarsi sul suo carattere finale

- I caratteri vengono risolti da sinistra a destra con un leggero sfasamento (ogni carattere inizia circa 40 ms dopo l'inizio del precedente).

- Durante la codifica: visualizza in carattere monocromatico ('JetBrains Mono') e leggermente più scuro (var(--text-mute))

- Una volta bloccato: tornare al carattere normale del titolo e completamente bianco

- Spazi e punteggiatura si bloccano istantaneamente senza mescolarsi

- Per una maggiore fluidità, utilizzare `requestAnimationFrame` e NON `setInterval`.

3. **Sottotitoli** (~2400 ms → ~3000 ms)

- Dissolvenza in entrata (opacità 0 → 1) E sfocatura-cancellazione (filtro: sfocatura(8px) → sfocatura(0))

- Uscita di 600 ms

4. **Indicatore di scorrimento** (~3000ms → ~3400ms)

- Dissolvenza in entrata di 400 ms, quindi inizia il delicato movimento oscillatorio verticale.

**Regole:**

- Attivazione su `DOMContentLoaded` o `window.load`

- Rispetta `prefers-reduced-motion: reduce` — salta completamente l'ingresso, mostra lo stato finale

- Eseguire UNA SOLA VOLTA al caricamento iniziale — NON riprodurre nuovamente quando l'utente scorre indietro alla Sezione 01

- Non deve interferire con la visualizzazione dell'IntersectionObserver per le sezioni 02-05

- Il testo principale finale deve corrispondere esattamente al design statico (stesso carattere, dimensione, colore, layout).

- Solo JavaScript puro — niente GSAP, niente anime.js, niente typed.js, niente librerie esterne

L'effetto di distorsione è il momento clou: deve dare all'utente la sensazione che il sistema si stia decifrando davanti ai suoi occhi. Regola la durata della distorsione per carattere e il set di glifi se il titolo è insolitamente lungo (>40 caratteri), in modo da mantenere la durata totale della distorsione al di sotto di 1,8 secondi.

## Fase 3: Comporre le 4-5 sezioni

Adatta lo scopo della sezione allo scenario rilevato. Di seguito è riportata la struttura canonica: adatta titoli e testo al contenuto dell'utente, mantenendo lo schema di impaginazione.

**Sezione 01 — Eroe / Identità**

- Etichetta sopra la fronte (ad esempio, 'INDICE 001' o tag specifico dello scenario) — animata tramite macchina da scrivere al caricamento

- Titolo eroe enorme (massimo 1-6 parole) — animato tramite criptazione/decrittografia al caricamento

- Sottotitolo su una riga: dissolvenza in entrata + sfocatura a scomparsa al caricamento

- Indicatore di scorrimento discreto (chevron animato o etichetta 'SCROLL') — dissolvenza in entrata e poi movimento a ciclo continuo

**Sezione 02 — Dichiarazione / Visione**

- Un singolo paragrafo in grassetto (2-4 frasi) che definisce il tono

- Impaginazione asimmetrica: testo a sinistra, numero grande o singola parola a destra

**Sezione 03 — Vetrina / Caratteristiche / Opere**

- Griglia di elementi a 3 colonne o sfalsata (caratteristiche, prodotti, progetti, elenchi puntati delle diapositive)

- Ogni articolo: piccola etichetta, titolo, descrizione di 1-2 righe

- Divisori sottili tra gli elementi

- Se l'utente ha fornito immagini, visualizzale qui con `filter: grayscale(1) contrast(1.05) brightness(0.95);`

**Sezione 04 — Dettagli / Specifiche / Manifesto**

- Una sezione con più testo: un elenco numerato, una tabella di specifiche o un paragrafo più lungo del manifesto.

- Utilizzare un carattere monocromatico per numeri ed etichette.

- Mantiene la sensazione di ariosità — mai affollato

**Sezione 05 — CTA / Contatto / Chiusura**

- Dichiarazione conclusiva (grande)

- Pulsante CTA principale: testo bianco, bordo bianco di 1px, sfondo trasparente, al passaggio del mouse si inverte in sfondo bianco + testo nero

- Riga di contatto breve opzionale, profili social o testo "Disponibile [data]"

- Piè di pagina: testo minuscolo, copyright, numero di versione in stile

Se si utilizzano solo 4 sezioni, unire la Sezione 02 e la Sezione 04 in un'unica schermata di dichiarazione e manifesto.

## Fase 4: Requisiti di implementazione

### Regola del file singolo

- Genera UN file HTML completo con `