Tire o tempo de execução da animação da homepage inteiramente

Performancekamo-marketing
Shipped
19 de agosto de 2026 às 20:27 UTC
Author
Kamo
Commit
f911fd4

Passo A do trabalho de hidratação. Framer Motion se foi da página inicial ansioso feixe: 798.723 -> 687.593 bytes brutos, 245.367 -> 209.422 gzip. São 35.945. menos bytes sobre o fio, contra uma predição de 36.444 bloco de antemão, além da análise e execução que veio com ele. Quatorze componentes o usaram. Nenhum deles precisava. Cada seção abaixo da dobra dirigia um `timeInView` ou um `useInView` de Reage-intersection-observador para desbotar seu conteúdo no rolagem. São dois. bibliotecas e um limite de hidratação por seção para fazer o `animation-timeline: view()` faz nativamente, no compositor, sem tempo de execução — e carregava o mesmo defeito que o herói tinha, porque Framer serializa `inicial ` no servidor HTML. 96 elementos estavam chegando em `opacity: 0` e ficando invisível até Reagir hidratado. Conteúdo abaixo da dobra foi fechado em um JavaScript pacote. É 9 agora, e todos os nove são deliberados: o JumpToBar antes do seu primeiro pergaminho, o rolo de herói antes que seja desejado, e sete decorações de hexágono em opacidade 0,1-0,15 que uma subcorda corresponde às capturas de "opacidade:0". O `@supports (animation-timeline: view())` guard é a parte de carregar. A regra base `.reveal` não define opacidade própria, então um navegador sem rolagem animações não se aplica nada e o conteúdo é simplesmente visível. Nada aqui pode enviar conteúdo oculto, que é a propriedade que a versão antiga não tinha. O resto era menor e mais obviamente deslocado: · `whileHover` / `whileTap` em cartões e botões tornou-se `.lift` e `.press`. O feedback de Hover que precisava de hidratação antes de funcionar foi sempre o errado Forma. · HoverMorph executou um loop *infinito* no `border-radius' — uma propriedade o compositor não pode animar — enquanto um ponteiro repousar em um cartão. É uma transição agora. · Acordeão de FAQ animado `altura: 0 -> auto`, a única transição CSS poderia Não fazer por anos e uma razão justa para ter alcançado uma biblioteca. Uma linha da grelha indo `0fr -> 1fr` faz nativa. As respostas também permanecem no DOM enquanto colapso agora, onde a transição de presença usado para desmontá-los, assim encontrar- na página e os motores de busca podem vê-los; os botões ganharam o 'aria-expandida' eles deveriam ter sempre tido. · HeroOfferBanner importou todo o tempo de execução para `useReducedMotion`, que é uma consulta de mídia. · Rodapé embrulhado o locale-aware <Link> em `motion.create` para um estado hover poderia animar, que coloca o tempo de execução no layout compartilhado de cada página. MagneticButton é a única coisa verdadeiramente perdida. Ele inclinou o CTA para o foi a última importação mantendo 36 KB no local — para um efeito nenhum dispositivo de toque pode produzir em tudo. O botão mantém «.pressa». Seu arquivo é deixado na árvore, não utilizado; vale a pena saber que importa-lo novamente silenciosamente restaura o tempo de execução. A conversão foi feita por um scanner em vez de por regex, e está no scratchpad de sessão em vez do repo porque é um único. Atributo JSX os valores contêm chaves aninhadas, cadeias de caracteres e funções de seta, por isso `<motion.div ...>` não pode ser combinado por qualquer coisa que não rastreie a profundidade — somente para animação o prop foi derrubado e tudo o mais preservado verbatim e em ordem. Cada arquivo o diff foi lido individualmente depois; as características tinham dois objetos variantes Órfãos por ela, e eles são removidos. O que isso NÃO faz é parar as seções hidratantes — elas ainda estão todas `"use client"', porque o HomeClient é, e um componente do cliente não pode importar servidor um. Isso é Passo B, e é uma mudança para a composição da página em vez do que a estes ficheiros. Este passo deliberadamente pousa sozinho para que as revelações possam ser olhou para um navegador antes de qualquer coisa estrutural se mover.

All changes

Como o que vês no transporte?

Cada uma dessas atualizações pousa automaticamente em seu espaço de trabalho. Comece grátis e veja crescer semana após semana.

Começar Livre Para SempreVer Preços