From e54daa105fe5e8dbbf779585465c0c0d38fb7bcc Mon Sep 17 00:00:00 2001 From: AdrianoDev Date: Thu, 2 Jul 2026 12:58:34 +0200 Subject: [PATCH] docs: spec animazioni stile template prowess --- .../2026-07-02-animazioni-template-design.md | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 docs/superpowers/specs/2026-07-02-animazioni-template-design.md diff --git a/docs/superpowers/specs/2026-07-02-animazioni-template-design.md b/docs/superpowers/specs/2026-07-02-animazioni-template-design.md new file mode 100644 index 0000000..f3ae7ae --- /dev/null +++ b/docs/superpowers/specs/2026-07-02-animazioni-template-design.md @@ -0,0 +1,61 @@ +# Animazioni stile template Prowess — Design + +Data: 2026-07-02 · Stato: approvato dall'operatore + +## Obiettivo + +Il sito InsanityLab, oggi quasi del tutto statico, deve riprendere il linguaggio di animazione del template WordPress "Prowess" (Qode Interactive) da cui deriva il design Figma. L'operatore ha scelto il pacchetto completo: reveal allo scroll, parallax degli sfondi, animazione d'ingresso della hero, effetti hover su card e team, e citazione con testo a scorrimento continuo. + +## Evidenze raccolte dal template + +Dalla demo ufficiale `prowess.qodeinteractive.com` (cassetta.me è in manutenzione): + +- gli elementi appaiono allo scroll con un offset di attivazione di −100 px dal viewport (`qodefElementAppearAmount: -100`); +- due sezioni usano parallax di sfondo (`data-parallax-bg-speed="1"`); +- la hero è uno Slider Revolution con testi che entrano in sequenza; +- card e foto hanno hover con zoom immagine e transizioni morbide. + +## Decisioni + +1. **Implementazione vanilla**: CSS + IntersectionObserver, nessuna libreria. Il sito non ha dipendenze frontend e resta così; costo totale ~2 KB. +2. **Citazione**: si mantiene il banner su foto scura del Figma, ma il testo della citazione scorre in orizzontale a loop infinito come il marquee del template (scelta esplicita dell'operatore). La firma "Insanitylab" resta statica. +3. **Accessibilità**: con `prefers-reduced-motion: reduce` ogni animazione è disattivata (reveal, marquee, parallax, hero). Senza JavaScript il sito resta interamente visibile: lo stato nascosto si applica solo sotto `html.js`. + +## Architettura + +- **`src/styles/global.css`** — utilities: `[data-reveal]` (stato iniziale `opacity: 0` + `translateY(40px)`, transizione `.9s ease`; varianti `left`, `right`, `fade`; ritardo per stagger via variabile `--reveal-delay` impostata inline), keyframes marquee, blocco `prefers-reduced-motion`. +- **`src/layouts/Base.astro`** — uno script inline in `` aggiunge la classe `js` a `` prima del paint (evita flash); uno script bundled attiva l'IntersectionObserver (`rootMargin: 0 0 -100px`, `unobserve` dopo il primo ingresso) e il parallax (`transform: translateY` calcolato su scroll con `requestAnimationFrame`, velocità ~0.3, attivo solo da 992 px in su e senza reduced-motion). +- **Componenti** — ricevono attributi `data-reveal` e stagger inline; nessuna modifica strutturale se non il wrapper overflow per gli zoom hover e la ristrutturazione del banner citazione (sfondo su div dedicato trasformabile, testo in marquee con copia `aria-hidden`). + +## Dettaglio per componente + +| Componente | Effetto | +|---|---| +| HeroSlider | Ingresso al load: righe del titolo slide-up in sequenza (stagger 150 ms), bottone dopo, immagine da destra con fade | +| InfoColumns | Reveal fade con stagger 0/150/300 ms | +| FeatureBlocks | Immagine entra dal proprio lato, testo dal lato opposto | +| QuoteBanner | Sfondo parallax + testo citazione in marquee loop (pausa su hover), firma statica | +| TrainingCards | Reveal con stagger; hover zoom foto (wrapper overflow hidden) | +| ProgramsGrid | Heading reveal; item con stagger; hover: traslazione -4 px e colore | +| Agenda | Reveal heading e tabella | +| TeamSection | Head reveal; card con stagger; hover zoom foto | +| MethodSteps | Heading reveal; step con stagger | +| PartnersStrip | Reveal fade dell'intera striscia | +| PageHero (pagine interne) | Reveal del titolo all'ingresso pagina | +| Header | Transizione morbida dell'ombra già presente | +| Bottoni `.btn` | Freccia trasla a destra su hover | + +## Errori e casi limite + +- JS assente: nessun elemento nascosto (gate su `html.js`). +- Reduced motion: contenuto immediatamente visibile, marquee fermo su testo statico multilinea. +- Il marquee usa due copie identiche del segmento (`translateX(-50%)`) per loop senza scatti; la seconda copia è `aria-hidden`. +- Solo `opacity` e `transform`: nessun layout shift, nessun impatto CLS. + +## Verifica + +Build senza errori, vitest esistenti verdi, controllo visivo locale su homepage e pagine interne, poi deploy su VPS e smoke test produzione. + +## Fuori scope + +Slider hero multi-slide automatico (oggi esiste una sola slide), animazioni admin, contatori animati e BMI calculator (assenti dal design Figma).