Microinteracciones y botones animados para web

Botones, interruptores, sliders e indicadores con física y feedback táctil.

Cuándo usarlas: Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.

• AnimatedBadge — Etiqueta con brillo animado para novedades.
• AnimatedCircularProgressBar — Indicador circular de progreso animado.
• BellToggle — Botón de notificaciones con campana que suena al activarlo.
• BranchedMenu — Menú desplegable con ramas curvas hacia cada opción.
• CallChip — Chip de llamada a herramienta con progreso y contador en ms.
• CodeSlots — Campo de código de un solo uso (OTP) con animación por dígito.
• CometDial — Dial que se lanza con un gesto y deja una estela de cometa.
• DodgeField — El contenido huye del puntero dentro de un área.
• FlipCard — Tarjeta de dos caras que gira en 3D con clic o arrastre.
• FolderFloat — Carpeta que se abre y deja flotar sus notas.
• FuseButton — Botón con “deshacer” sobre una mecha que se consume.
• GlideSelect — Selector cuyo menú sale de su esquina con un resaltado que se desliza.
• HoldButton — Botón de “mantén para confirmar” con relleno líquido.
• InteractiveHoverButton — Botón cuya flecha y texto se transforman al pasar el ratón.
• JellyRadio — Grupo de opciones cuya selección se hincha como gelatina.
• LatticeLoader — Indicador de estado de agente IA con rejilla de puntos en ola.
• LiveButton — Botón con indicador “en directo”.
• PaperCrumple — Imagen que se arruga como papel al mantenerla pulsada.
• PeekRating — Valoración con estrellas que se levantan en ola al pasar.
• PromptBar — Caja de chat con fuentes @, comandos /, modelo y dictado.
• PulsatingButton — Botón que late para llamar la atención.
• PulseHeart — Botón de “me gusta” que late y cambia el contador.
• RainbowButton — Botón con un borde arcoíris animado.
• RefineFrame — Marco que muestra el progreso de una imagen generada sin saltos.
• RippleButton — Botón con onda al hacer clic.
• RubberSegment — Control segmentado con un selector de goma elástica.
• ScrubField — Campo numérico que se arrastra para cambiar el valor.
• ShimmerButton — Botón con un destello que recorre su borde.
• ShinyButton — Botón con un brillo que lo cruza.
• Shredder — Lista con trituradora: arrastra una fila para destruirla.
• SlideCommit — Desliza para confirmar, con estados de carga, éxito y error.
• SlingButton — Botón de enviar que se tensa como un tirachinas.
• SloshGauge — Indicador de depósito con líquido que se mueve con inercia.
• SpringCheck — Checkbox con muelle que marca, tacha y atenúa la tarea.
• SquishSwitch — Interruptor que se estira según la velocidad y se aplasta al llegar.
• StatusMark — Icono de estado de tareas que cambia de pendiente a hecho.
• SwipeRow — Fila que se desliza para revelar acciones.
• SwipeToast — Notificación que se descarta deslizando y se consume sola.
• TearTicket — Entrada cuya matriz se arranca a mano con fibras de papel.
• ThoughtLine — Cabecera de razonamiento de IA con pasos y temporizador.
• VoicePill — Botón de micrófono que se convierte en ecualizador al grabar.
• WakeSlider — Slider de barras que deja una estela según la velocidad.
• WarmTooltip — Tooltips agrupados: el primero espera y los siguientes aparecen al instante.