Mensajes de estado

Click ripple burst

Click ripple burst: Un efecto de retroalimentación de puntero que genera una breve forma animada exactamente donde el usuario hace clic o toca.

Click or tap anywhereEach release spawns one effect at the pointer

Cómo usar Click ripple burst

Click ripple burst se presenta con el formato de vista previa «tarjeta» y el tema «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
`variant`	`select`	`ring`	Opciones: ripple, ring, crosshair, burst, particles
`color`	`color`	`#F5C542`	Los metadatos no indican otro límite.
`size`	`number`	`100`	De 40 a 200; paso 10
`duration`	`number`	`400`	De 150 a 900; paso 50

¿Para qué frameworks está disponible Click ripple burst?

Click ripple burst 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 Click ripple burst?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Click ripple burst?

El código React de Click ripple burst incluye: atributos y manejadores (aria-hidden). 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 Click ripple burst el movimiento reducido?

Click ripple burst 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 Empty State Panel de Fieldbook, de la categoría Mensajes de estado.

1922Empty State PanelMensajes de estadoUn marcador de posición centrado que se muestra en lugar de una lista vacía, con un título, una descripción y una o dos acciones iniciales.

Imagen fija del componente Content Loading Card de Fieldbook, de la categoría Mensajes de estado.

2129Content Loading CardMensajes de estadoUn marcador de posición en forma de tarjeta que respira con un lento pulso opacity mientras aún se cargan un gran bloque de imagen y dos líneas de texto.

Imagen fija del componente Count badge cluster de Fieldbook, de la categoría Mensajes de estado.

1945Count badge clusterMensajes de estadoUna fila de píldoras de palabras y fichas numéricas compactas para etiquetar o contar cosas en línea.

Imagen fija del componente Curtain line loader de Fieldbook, de la categoría Mensajes de estado.

2138Curtain line loaderMensajes de estadoUna cortina de carga que se retira detrás de una línea viajera brillante, cortando el contenido terminado a la vista en lugar de desvanecerlo.

2148Empty State PanelMensajes de estadoUn panel centrado para una lista o vista vacía, con una pila de iconos en abanico, un encabezado, una línea de apoyo y un botón de acción principal.

Imagen fija del componente Fill progress loading text de Fieldbook, de la categoría Mensajes de estado.

1958Fill progress loading textMensajes de estadoUna etiqueta de carga se asienta como un tenue contorno de sí misma, mientras que una copia de color sólido la completa desde la izquierda como una barra de progreso con la forma de la palabra, deslizándose hacia adelante y hacia atrás mientras se realiza el trabajo.