Componentes de Page Transitions

Componentes de Page Transitions listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.

• CrossFade — Transición de página canónica: fundido cruzado de dos vistas solapadas. La saliente se desvanece con una ligera deriva/zoom (opacidad 1→0, escala 1→1.04, deriva vertical) mientras la entrante aparece desde una escala/posición ligeramente distinta (1.04→1). Sin overlay de color, base limpia y elegante (~550ms). Auto-bucle para el preview, deriva y escala configurables, y modo movimiento-reducido con fundido simple. Solo React + CSS.
• PushSlide — Transición de página de empuje direccional: la vista actual se desliza hacia fuera mientras la siguiente entra empujándola desde el lado opuesto, ambas acopladas en un track que se traslada (translate). Sin overlay de color, limpio y direccional, ~600ms con easing ease-in-out. Dirección (up/down/left/right) y separación (gap) configurables, auto-bucle para el preview y modo movimiento-reducido con fundido corto. Solo React + CSS.
• BlockSwap — Transición de página estilo menú color-block tipo Awwwards: cada vista es un panel de color sólido a pantalla completa con una palabra gigante centrada (HOME/WORK/STUDIO/CONTACT). Una banda del color de la siguiente vista barre verticalmente de arriba abajo cubriendo la pantalla; al cubrir cambia palabra y fondo, y la banda sigue bajando revelando el panel nuevo. Tipografía bold muy contrastada, ~600ms, auto-bucle para el preview y modo movimiento-reducido con fundido corto. Solo React + CSS.
• BlurDissolve — Transición de página sin capa de color: un crossfade cinematográfico entre dos vistas solapadas. La saliente se desenfoca y escala ligeramente mientras se desvanece; la entrante aparece desde desenfocada+escalada hasta nítida. Auto-bucle para el preview, easing suave (~650ms), desenfoque y escala configurables, tinte opcional y modo movimiento-reducido con fundido corto sin blur. Solo React + CSS.
• MosaicReveal — Transición de página tipo mosaico: una rejilla a pantalla completa de tiles cuadrados (columnas × filas) que se rellenan del color de overlay en orden aleatorio y estable hasta cubrir la vista, la cambia y luego los tiles se vacían en otro orden aleatorio revelando la nueva. Efecto pixelado con stagger aleatorio por tile (~700ms), auto-bucle para el preview y modo movimiento-reducido con fundido corto. Solo React + CSS.
• BlobSweep — Transición de página tipo tinta/líquido: una capa sólida de color cuyo borde de ataque es una curva orgánica (blob SVG ondulado y asimétrico) barre en diagonal de una esquina a la opuesta cubriendo la pantalla, cambia de vista y sigue hasta salir por la esquina contraria revelando la nueva. Auto-bucle para el preview, easing suave (~750ms), profundidad de onda y dirección configurables, y modo movimiento-reducido con fundido corto. Solo React + CSS/SVG.
• PanelStack — Transición de página tipo baraja: varios paneles a pantalla completa de colores distintos suben en cascada desde abajo hasta cubrir la vista, se cambia el contenido bajo la cobertura total, y los paneles siguen subiendo hasta salir por arriba revelando la nueva pantalla. Sensación de deck de colores deslizando. Auto-bucle para el preview, control de nº de paneles, paleta y stagger, y crossfade accesible en prefers-reduced-motion.
• WedgeWipe — Transición de página con una cuña diagonal de color que barre la pantalla de lado a lado: en cobertura total cambia la vista y sigue hasta revelar la siguiente. Sensación angular y geométrica con el ángulo de la diagonal ajustable. Auto-bucle para el preview, respeta prefers-reduced-motion (crossfade corto). Solo React + CSS (skewX + clip por overflow).
• StairWipe — Transición de página en escalera: un overlay dividido en K bandas horizontales entra deslizándose desde la izquierda con retardo creciente por banda (la de arriba primero), dibujando una diagonal de escalera hasta cubrir. En cobertura total cambia la vista y las bandas se retiran hacia la derecha con el mismo escalonado. Auto-bucle sobre tus paneles, sin dependencias (solo React + CSS) y con crossfade en prefers-reduced-motion.
• IrisWipe — Transición de página tipo diafragma de cámara: un círculo de color crece desde el centro (o una esquina) con clip-path hasta cubrir la pantalla, cambia de vista y se encoge de nuevo revelando la nueva. Auto-bucle para el preview, easing suave (~650ms), origen configurable y modo movimiento-reducido con fundido corto. Solo React + CSS.
• SlatReveal — Transición de página tipo persiana vertical: N láminas entran en cascada (stagger de izquierda a derecha) escalando en Y hasta cubrir la pantalla, se cambia la vista bajo cobertura total y las láminas se retiran revelando la nueva. Modo "alternate" para que pares entren desde arriba e impares desde abajo. Auto-bucle para el preview y crossfade corto en prefers-reduced-motion. Solo React + CSS.
• CurtainSweep — Transición de página clásica de Awwwards: una cortina sólida con el borde de ataque curvo (una cúpula SVG) barre de abajo arriba cubriendo la pantalla, cambia la vista en el instante de cobertura total y sigue subiendo hasta salir por el borde superior. Barrido suave (~700ms, ease-in-out), profundidad de curva y sentido configurables. Auto-bucle entre vistas y crossfade accesible con prefers-reduced-motion. Solo React + CSS/SVG.