davideandClaude Opus 5
e7863ab950
Il movimento era fatto con `@keyframes` e transizioni a durata fissa: nessuna di quelle animazioni può essere afferrata a metà. Se l'utente scorre o tocca mentre una è in corso, quella va avanti per conto suo e per ripartire deve prima finire. `lib/molla.ts` raccoglie i parametri, che sono i due di Apple in «Designing Fluid Interfaces» — rimbalzo e durata, non massa/rigidità/smorzamento. `molla.ui` (nessun sorpasso) è il default; `molla.slancio` si usa solo dopo un gesto che portava già inerzia. `proietta()` calcola dove finirebbe un elemento lanciato, con la stessa decelerazione esponenziale dello scroll iOS. Nei tre componenti: - `Reveal` compare quando entra davvero nel viewport. Prima partiva al mount, quindi gli elementi sotto la piega consumavano l'animazione a vuoto e l'utente li trovava già fermi. Il ritardo massimo scende da 480 a 200 ms. - `Barra` anima `scaleX` invece di `width`: la larghezza rifà il layout a ogni frame, la trasformazione la gestisce il compositore. - `Numero` usa una molla al posto dell'interpolazione a durata fissa: se il dato cambia a metà conteggio il numero cambia rotta da dov'è invece di ripartire da capo. Sparisce la prop `durata`, che nessuno passava. `lib/motion.ts` resta solo per il rilevamento del movimento ridotto (che qui guarda anche `deviceMemory`, cosa che `useReducedMotion` non fa) e per i coriandoli. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { motion, useReducedMotion } from "motion/react";
|
|
import { cn } from "@/lib/utils";
|
|
import { molla } from "@/lib/molla";
|
|
|
|
/**
|
|
* Barra di avanzamento a molla.
|
|
*
|
|
* Anima `scaleX` e non `width`: la larghezza rifà il layout a ogni frame,
|
|
* la trasformazione la gestisce il compositore. La molla riparte dal valore
|
|
* a schermo, quindi se il dato cambia a metà riempimento non c'è scatto.
|
|
*/
|
|
export function Barra({
|
|
percentuale,
|
|
className,
|
|
trackClassName,
|
|
altezza = "h-2",
|
|
}: {
|
|
percentuale: number;
|
|
className?: string;
|
|
trackClassName?: string;
|
|
altezza?: string;
|
|
}) {
|
|
const ridotto = useReducedMotion();
|
|
const valore = Math.max(0, Math.min(100, Math.round(percentuale)));
|
|
|
|
return (
|
|
<div
|
|
className={cn("overflow-hidden rounded-full bg-secondary", altezza, trackClassName)}
|
|
role="progressbar"
|
|
aria-valuenow={valore}
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
>
|
|
<motion.div
|
|
className={cn("h-full w-full origin-left rounded-full bg-accent-grad", className)}
|
|
initial={{ scaleX: 0 }}
|
|
animate={{ scaleX: valore / 100 }}
|
|
transition={ridotto ? { duration: 0.2 } : molla.ui}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|