Animación

Easing curve lab

Easing curve lab: Seis curvas de aceleración llevan puntos de A a B frente a un reloj constante, con estelas y valores en vivo que muestran dónde aceleran, frenan o rebasan el destino; elige una curva para repetirla.

How should it land?

t 0.00 · 1100 ms · expo-out

linear

ease-in-out

expo-out

back-out

bounce

elastic

Pick a curve to replay it. Drag along a track to scrub time.

Cómo usar Easing curve lab

Easing curve lab se presenta con el formato de vista previa «ancho» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`title`	`text`	`How should it land?`	Hasta 48 caracteres
`selected`	`select`	`expo-out`	Opciones: linear, ease-in-out, expo-out, back-out, bounce, elastic
`duration`	`number`	`1100`	De 300 a 2400; paso 50
`accent`	`color`	`#1F45FF`	Los metadatos no indican otro límite.
`trails`	`boolean`	`true`	Los metadatos no indican otro límite.
`loop`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Easing curve lab?

Easing curve lab está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Easing curve lab?

Los metadatos de React no indican dependencias npm adicionales a React.

¿Qué detalles de accesibilidad se observan en Easing curve lab?

El código React de Easing curve lab incluye: elementos nativos (button); atributos y manejadores (aria-checked, aria-hidden, aria-label, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); roles explícitos (radio, radiogroup, slider). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Easing curve lab el movimiento reducido?

Easing curve lab consulta la preferencia de movimiento en su código React mediante matchMedia(prefers-reduced-motion). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Archetype morph shape de Fieldbook, de la categoría Animación.

2917Archetype morph shapeAnimaciónUna forma se transforma en botón, interruptor, deslizador, tarjeta y casilla de verificación, con lecturas en vivo de su anchura, altura, radio de esquina y partes durante cada cambio.

Imagen fija del componente Easing preview tile de Fieldbook, de la categoría Animación.

1772Easing preview tileAnimaciónUn mosaico que reproduce la misma ampliación bajo cualquier curva de relajación que elijas, con la curva dibujada al lado y un marcador que la recorre en sincronía.

Imagen fija del componente Spring easing toggle de Fieldbook, de la categoría Animación.

1808Spring easing toggleAnimaciónUn mosaico que se desliza entre dos topes en una curva de resorte incorporada en una transición CSS simple, con la curva generada trazada al lado.

Imagen fija del componente Interruptible hover swell de Fieldbook, de la categoría Animación.

1780Interruptible hover swellAnimaciónUn mosaico cuyo aumento de desplazamiento en dos etapas siempre comienza desde su tamaño actual, por lo que activar y desactivar el puntero nunca hace que se rompa.

Imagen fija del componente Resonant sand plate de Fieldbook, de la categoría Animación.

2916Resonant sand plateAnimaciónArena fina sobre una placa de acero que vibra salta de las zonas que se agitan y se asienta a lo largo de las líneas quietas, dibujando una figura nueva cada vez que cambia el tono.

Imagen fija del componente Burst particle emitter de Fieldbook, de la categoría Animación.

1672Burst particle emitterAnimaciónEnvuelve cualquier elemento y dispara un abanico escalonado de pequeñas motas desde un borde elegido, al hacer clic, en un bucle o la primera vez que se desplaza a la vista.