Saltar al contenido
Menú

Animación

Archetype morph shape

Archetype morph shape: Una 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.

Cómo usar Archetype morph shape

Archetype morph shape 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.

ControlTipoValor inicialLímites de la vista previa
accentcolor#1F45FFLos metadatos no indican otro límite.
detailcolor#EEEAE2Los metadatos no indican otro límite.
holdnumber1.1De 0.4 a 4; paso 0.1
morphnumber0.9De 0.3 a 2.5; paso 0.1
readoutsbooleantrueLos metadatos no indican otro límite.
autoplaybooleantrueLos metadatos no indican otro límite.
¿Para qué frameworks está disponible Archetype morph shape?

Archetype morph shape 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 Archetype morph shape?

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

¿Qué detalles de accesibilidad se observan en Archetype morph shape?

El código React de Archetype morph shape incluye: atributos y manejadores (aria-hidden, aria-label, aria-readonly, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, tabIndex); roles explícitos (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 Archetype morph shape el movimiento reducido?

Archetype morph shape 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