Crea uno studio dell'interazione in HTML/CSS/JavaScript con stati iniziale, attivo e completato espliciti e un'alternativa leggibile per prefers-reduced-motion per [PROJECT] e [AUDIENCE]. L'attività è: titolo cinetico dell'evento.

## Contenuti e struttura obbligatori

Anima il titolo, la data e il luogo di un evento attraverso una breve sequenza tipografica leggibile.

Usa [APPROVED_CONTENT] come fonte per nomi, date, dati, dichiarazioni e destinazioni. Elenca gli input mancanti prima di sostituire qualsiasi elemento. Se è necessaria una dimostrazione, indica che i contenuti sono fittizi. Non inventare citazioni di clienti, classifiche, loghi di partner o funzionalità del prodotto.

## Direzione del design

Usa [BRAND_RULES] e il design system già selezionato nel progetto. Se non è stato fornito alcun sistema, parti da questa direzione: bianco, antracite e accenti verde acceso; stati iniziale, di transizione e finale chiaramente etichettati. Mantieni coerenti tipografia, spaziatura e ruoli cromatici. Dai priorità all’attività rispetto agli elementi decorativi ed evita una raccolta generica di schede non correlate.

## Preparazione dei contenuti

Prepara il titolo esatto dell'evento, la data, il luogo, la durata della sequenza e il fotogramma statico finale. Individua il testo più lungo che gli spettatori devono leggere.

## Layout e comportamento

Usa la tipografia in una breve sequenza, con pause chiare tra i movimenti. Mantieni stabili le informazioni pratiche abbastanza a lungo da renderle comprensibili, anziché animare continuamente ogni parola.

## Verifica di accettazione specifica dell'attività

- Mantieni visibili i dati esatti dell'evento abbastanza a lungo da poterli leggere e proponi un fotogramma statico.
- Cronometra la sequenza a velocità normale ed esaminane il fotogramma finale.
- Gli utenti che preferiscono movimenti ridotti devono ricevere tutte le informazioni sull'evento senza attendere la fine dell'animazione.

## Implementazione e revisione

Mantieni il testo modificabile. Usa una struttura semantica, controlli descrittivi, un focus da tastiera visibile e stati vuoti/di errore appropriati. Verifica i layout stretti e ampi. Rispetta le preferenze per la riduzione del movimento. Mantieni il framework e le dipendenze esistenti del progetto; non sostituire lo stack senza segnalarlo. Restituisci i file modificabili e spiega eventuali comportamenti incompleti o input non supportati. Esamina questa attività specifica prima di proporre funzionalità aggiuntive.

Rendi disponibili tutte le informazioni e le azioni senza animazione. Ove pertinente, consenti di mettere in pausa o chiudere. Documenta trigger e transizioni; non sostituire l’avanzamento effettivo con un timer decorativo.

## Allegato di riferimento e obiettivo di ricostruzione

Allega reference.webp, incluso nel pacchetto scaricabile di questo prompt, insieme al prompt in OpenDesign. Crea un risultato modificabile con composizione e gerarchia simili; non incorporare l'intera immagine di riferimento come interfaccia finale. Mantieni i contenuti di progetto approvati e le regole del brand se sono in conflitto con le etichette fittizie dell'esempio. Se l'immagine manca o è illeggibile, richiedila invece di dichiarare fedeltà visiva.

## Composizione e contenuti di riferimento

Usa il file reference.webp allegato come riferimento visivo per il titolo cinetico dell'evento. Prima di realizzarlo, individua le aree principali dall'alto verso il basso, le relative larghezze e altezze, l'allineamento, la spaziatura, la gerarchia tipografica, i colori delle superfici, i bordi, le immagini e i componenti ripetuti. Mantieni queste relazioni anziché sostituirle con un modello generico. Contenuto richiesto: anima il titolo, la data e il luogo di un evento attraverso una breve sequenza tipografica leggibile. Quando traduci l'immagine in elementi modificabili, segui queste indicazioni di layout specifiche per l'attività: usa la tipografia in una breve sequenza, con pause chiare tra i movimenti. Mantieni stabili le informazioni pratiche abbastanza a lungo da renderle comprensibili, anziché animare continuamente ogni parola.

## Direzione visiva dal brief di esempio

bianco, antracite e accenti verde acceso; stati iniziale, di transizione e finale chiaramente etichettati.

## Output e modificabilità

Ricrea la grafica finale come testo, forme e livelli immagine modificabili. Il riferimento è una composizione, non l'interfaccia di un editor; non aggiungere elementi di navigazione, moduli o widget per dashboard che non siano presenti. Usa la tipografia in una breve sequenza, con pause chiare tra i movimenti. Mantieni stabili le informazioni pratiche abbastanza a lungo da renderle comprensibili, anziché animare continuamente ogni parola. Conferma le dimensioni previste e mantieni la gerarchia del testo durante l'adattamento della grafica. Mantieni visibili i dati esatti dell'evento abbastanza a lungo da poterli leggere e proponi un fotogramma statico.

## Confronto visivo e consegna

1. Confronta il risultato con l'immagine allegata usando le stesse proporzioni. Prima di perfezionare i dettagli decorativi, verifica il posizionamento delle aree principali, le dimensioni relative delle immagini, le interruzioni di riga, la spaziatura, la gerarchia tipografica, il contrasto, gli stati attivi e la densità dei contenuti.
2. Quindi testa il layout stretto senza comprimere il testo desktop in etichette minuscole.
3. Mantieni loghi, foto e icone come risorse separate e tutte le etichette significative modificabili. Elenca eventuali caratteri o risorse non disponibili e qualsiasi scostamento intenzionale. Restituisci i file funzionanti insieme a una descrizione concisa dei comportamenti implementati e delle integrazioni ancora necessarie; non promettere un risultato identico al pixel basandoti solo sul prompt.