Toma el tiempo de carrera de animación de la página de inicio por completo

Performancekamo-marketing
Se descapó
19 de agosto de 2026 a las 20:27 UTC
Autor
Kamo
Compromit
f911fd4

Paso A del trabajo de hidratación. Framer Motion se ha ido de la página de inicio con ganas bundle: 798,723 - 687.593 bytes raw, 245,367 --- 209,422 gzip. Eso es 35.945 menos bytes sobre el alambre, contra una predicción de 36.444 hecha midiendo el de antemano, más el par y la ejecución que vino con él. Catorce componentes lo usaron. Ninguno de ellos lo necesitaba. Cada sección por debajo de la pliegue conducía un "whileInView" o un "ustá" de View. react-intersección-observador para desvanezar su contenido en el desplazamiento. Son dos. bibliotecas y un límite de hidratación por sección para hacer qué La línea de tiempo de la reiniación: view() * hace de forma nativa, en el compositor, sin tiempo de ejecución y llevaba el mismo defecto que tenía el héroe, porque Framer serializa .inicial. en el servidor HTML. 96 elementos estaban llegando a la Oopacidad: 0o y permaneciendo invisible hasta que reaccione hidratado. El contenido debajo del pliegue estaba cerrado en un JavaScript bulle. Son 9 ahora, y los nueve son deliberados: el JumpToBar antes de su primera despeño, el carrete de héroe antes de que se quiere, y siete decoraciones hexagonales en opacidad 0.1-0.15 que un partido de subcarnada por "opacidad:0" atrapa. El protector de soportes (animation-timeline: view()) El guardián es la parte que lleva la carga. El regla base .reveal. rule establece no opacidad propia, por lo que un navegador sin desplazamiento accionado Las animaciones no aplican nada y el contenido es simplemente visible. Nada aquí puede El contenido oculto de la nave, que es la propiedad que la versión antigua no tenía. El resto eran más pequeños y más obviamente extraviados: Mientras tantoHover, /, entonces, en tarjetas y botones se convirtió en "lift" y "Prensa". La retroalimentación de la cobertura que necesitaba hidratación antes de funcionar siempre fue el mal la forma. HoverMorph publicó un bucle de fotograma *infinito* en el radio de frontera - una propiedad el compositor no puede animar hasta que un puntero descansado en una carta. Ahora es una transición. El acordeón animado de FAQ "altura: 0 -" auto, la única transición CSS podría no lo hacen durante años y una razón justa para haber llegado a una biblioteca. Una fila de cuadrícula ir 0fr - 1fr lo hace de forma nativa. Las respuestas también permanecen en el DOM mientras colapsar ahora, donde la transición de la presencia solía desmontarlos, así que los motores de búsqueda y encontrar en la página pueden verlos; los botones ganaron el Siempre deberían haber tenido. HeroOfferBanner importó todo el tiempo de ejecución para el uso de la Moción, que es una consulta mediática. Footer envolvió el local encanzando en "motion.crear" así que un estado flotante podría animarse, lo que puso el tiempo de ejecución en el diseño compartido de cada página. MagneticButton es la única cosa genuinamente perdida. Inclinó al CTA hacia la fue la última retención de importación 36 KB en su lugar para un efecto no táctil puede productos en absoluto. El botón se mantiene. Su archivo se deja en el árbol, sin usar; Vale la pena saber que importarlo de nuevo restaura silenciosamente el tiempo de ejecución. La conversión fue hecha por un escáner en lugar de por regex, y está en el sesión scratchpad en lugar de la repo porque es una sola vez. Atributo JSX los valores contienen aparatos de corsé anidado, cuerdas y funciones de flecha, por lo que "motion.div ... no puede ser igualado por nada que no rastree la profundidad. se le cayó y todo lo demás se mantuvo literalmente y en orden. Cada archivo diff se leyó individualmente después; Features tenía dos objetos de variantes a la izquierda Huérfano de ella, y esos se eliminan. Lo que esto NO hace es detener las secciones hidratándose. "utilizar cliente", porque HomeClient lo es, y un componente cliente no puede importar un el servidor uno. Ese es el paso B, y es un cambio en la composición de la página más bien que a estos archivos. Este paso deliberadamente aterriza solo para que las revelaciones puedan ser mirado en un navegador antes de cualquier movimiento estructural.

Todos los cambios

Como lo que ves enviaste?

Cada una de estas actualizaciones aterriza en su espacio de trabajo automáticamente. Empieza gratis y verlo crecer semana tras semana.

Arranzar gratis para siempreVer Precios