- Shipped
- 19 agosto 2026 alle ore 20:27 UTC
- Author
- Kamo
- Commit
- f911fd4
Passo A del lavoro di idratazione. Framer Motion è andato dal desiderio della homepage fascio: 798,723 -> 687,593 byte grezzo, 245,367 -> 209,422 gzip. Questo è 35.945 meno byte sul filo, contro una previsione di 36.444 fatta misurando chunk in anticipo, più la parsa e l'esecuzione che è venuto con esso. Quattordici componenti lo usavano. Nessuno di loro ne aveva bisogno. Ogni sezione seguente-il-fold ha guidato un `whileInView` o un `useInView` da reagisce-intersezione-osservatore per sbiadire il suo contenuto su pergamena. Questo è due biblioteche e un limite di idratazione per sezione per fare cosa `animazione-timeline: view()` fa nativamente, sul compositore, senza runtime — e ha portato lo stesso difetto che l'eroe aveva, perché Framer serializza `initial` nel server HTML. 96 elementi stavano arrivando a `opacità: 0` e rimanere invisibile fino a React idratato. Contenuto sotto la piega è stato gated su un JavaScript fascio. Ora sono 9 e tutti i nove sono deliberati: il JumpToBar prima del suo primo scorrere, la bobina dell'eroe prima che sia voluto, e sette decorazioni esagonali a opacità 0.1-0.15 che un substring match per "opacità:0" cattura. La guardia `@supports (animazione-timeline: vista()` è la parte portante del carico. The base `.reveal ` regola non imposta alcuna opacità del proprio, quindi un browser senza scorrimento-driven le animazioni non applicano nulla e il contenuto è semplicemente visibile. Niente qui contenuto nascosto della nave, che è la proprietà la vecchia versione non ha avuto. Il resto era più piccolo e più ovviamente sbagliato: · `whileHover` / `whileTap` su carte e pulsanti divenne `.lift` e `.press`. Hover feedback che aveva bisogno di idratazione prima che funzionasse era sempre sbagliato forma. · HoverMorph ha eseguito un anello portachiavi *infinite* su `border-radius` — una proprietà il compositore non può animare — per finché un puntatore poggiato su una carta. Ora è una transizione. · Fisarmonica di FAQ animata `altezza: 0 -> auto`, la transizione CSS potrebbe non fare per anni e una ragione giusta per aver raggiunto per una biblioteca. Una griglia va `0fr -> 1fr` lo fa in nativo. Le risposte rimangono anche nel DOM mentre è crollato ora, dove la transizione di presenza ha usato per smontarli, quindi trovare-in-pagina e motori di ricerca possono vederli; i pulsanti hanno guadagnato i `aria-espanso` dovevano sempre avere avuto. · HeroOfferBanner ha importato l'intero runtime per `useReducedMotion`, che è una query mediatica. · Footer ha avvolto il locale-aware <Link> in `motion.create` quindi uno stato hover potrebbe animare, che mette il runtime nel layout condiviso di ogni pagina. MagneticButton è l'unica cosa che veramente ha perso. Ha inclinato il CTA verso il era l'ultima importazione che ha 36 KB in atto — per un effetto nessun dispositivo di contatto può produrre affatto. Il pulsante mantiene `.press`. Il suo file è lasciato nell'albero, inutilizzato; vale la pena sapere che importarlo di nuovo silenziosamente restaura il runtime. La conversione è stata effettuata da uno scanner piuttosto che da regex, ed è nel scratchpad sessione piuttosto che il repo perché è un one-off. attributo JSX i valori contengono brace nidificati, stringhe e funzioni di freccia, quindi ` non può essere abbinato a nulla che non traccia profondità — ogni animazione-solo prop è stato abbandonato e tutto il resto conservato verbatim e in ordine. Ogni file è diff è stato letto individualmente in seguito; le funzionalità hanno lasciato due oggetti varianti orfano da esso, e quelli sono rimossi. Ciò che NON fa è fermare le sezioni idratanti — sono tutti ancora `"usa client"`, perché HomeClient è, e un componente client non può importare server uno. Questo è il passo B, ed è un cambiamento alla composizione della pagina piuttosto che a questi file. Questo passo si atterra deliberatamente in modo da poter essere rivelati ha guardato in un browser prima di qualsiasi mossa strutturale.