VESTIGIA

Tracce di memoria — un archivio cinematografico di frammenti e ricordi in formazione.

Vestigia trasforma la classica to-do list in un'esperienza visiva contemplativa. Ogni task diventa un frammento di memoria che galleggia in uno spazio scuro, come un ricordo in formazione. L'interfaccia è pensata per essere uno spazio funzionale ma anche poetico, dove ogni interazione genera una risposta visiva fluida e appagante.

---

Concetto

Non è una semplice lista di cose da fare. Vestigia è un archivio minimale dove i task diventano frammenti — schegge di vetro con profondità, luce e movimento. Completare un task genera una piccola esplosione di particelle. La priorità è espressa con colori sobri e simboli geometrici minimali. Il tutto in un ambiente scuro, cinematico, con parallasse 3D, glassmorphism e animazioni GSAP.

---

Funzionalità

• Frammenti — ogni task è un oggetto vivo con rotazione organica, bordo colorato per priorità e profondità prospettica
• Priorità — Alta (◆), Media (◈), Bassa (○) con palette di colori raffinata e non invasiva
• Completamento — animazione con esplosione di particelle, checkmark fluido, semitrasparenza e barratura
• Drag & drop — riordina i frammenti trascinandoli con il mouse
• Filtri — Tutti / Attivi / Completati con pulsanti a pillola vetrosa
• Modalità Flusso — attiva dal pulsante nella navbar, i frammenti iniziano a galleggiare con un'animazione continua e organica. Ideale per una revisione lenta e contemplativa
• Due atmosfere — passa da Dark (caldo, accenti dorati) ad Abyss (nero profondo, accenti acciaio-blu) con un click
• Parallasse 3D — i frammenti seguono il movimento del mouse con una leggera rotazione prospettica
• Scroll fluido — barra di progresso sotto la navbar, parallasse dell'hero, animazioni d'ingresso staggherate
• Salvataggio automatico — tutto persiste nel localStorage del browser
• Supporto tastiera — Invio per aggiungere, Esc per uscire dall'input
• Responsive — funziona su desktop, tablet e mobile
• Accessibilità — ruoli ARIA, label, gestione del focus

---

Struttura del progetto

vestigia/
├── index.html             # entry point
├── css/
│   └── style.css          # tutti gli stili (custom properties, layout, animazioni)
├── js/
│   └── app.js             # logica modulare (Store, State, Actions, Scroll, Flow, Particles)
├── docs/
│   └── index.html         # documentazione completa
├── README.md
└── .gitignore

---

Come iniziare

1. Apri il progetto con un server locale (VS Code Live Server, python -m http.server, o qualsiasi altra opzione)
2. Scrivi un frammento nella barra di input e premi Invio o clicca +
3. Seleziona la priorità cliccando i tre cerchi nella barra di input (○ ◌ ●)
4. Completa un frammento cliccando il cerchio a sinistra del testo
5. Elimina passando con il mouse sopra un frammento e cliccando ✕
6. Riordina trascinando i frammenti
7. Attiva il Flusso dal pulsante nella navbar per vedere i frammenti galleggiare
8. Cambia atmosfera con il pulsante in basso a destra

Nota: per aprire correttamente il progetto usa un server locale. L'apertura diretta del file (file://) potrebbe non gestire correttamente i percorsi relativi.

---

Tecnologie

• HTML5 semantico con ARIA
• CSS3 — custom properties, flexbox, backdrop-filter, animazioni keyframe
• JavaScript vanilla con pattern modulare
• GSAP 3.12 — animazioni fluide e performanti (unica dipendenza esterna)

Niente framework, niente build tools, niente dipendenze pesanti. Un solo file HTML, un CSS, un JS. Pronto per GitHub Pages o qualsiasi hosting statico.

---

Licenza

Progetto originale a scopo portfolio. Libero di essere utilizzato, modificato e condiviso.