VoicePill

Botón de micrófono que se convierte en ecualizador al grabar.

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/VoicePill-TS-TW

Cuándo usarlo

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

Props para personalizarlo

PropTipoPor defecto
accentColorstring"#f5f5f5"
iconColorstring"#a1a1aa"
backgroundstring"#27272a"
sizenumber28
shape'pill' | 'rounded''pill'
reachnumber8
showTimebooleantrue
waveformbooleantrue
slideToCancelbooleantrue
cancelDistancenumber64
attacknumber40
releasenumber240
sensitivitynumber1
floornumber0.1
openDurationnumber200
pressScalenumber0.95
mode'auto' | 'hold' | 'toggle''auto'
holdAfternumber300
reactive'simulated' | 'mic''simulated'
disabledbooleanfalse
ariaLabelstring"Dictate"
onStart({ source }) => void-
onStop({ reason, duration }) => void-
classNamestring""

Otros efectos de microinteracciones

  • BranchedMenu — Menú desplegable con ramas curvas hacia cada opción.
  • FlipCard — Tarjeta de dos caras que gira en 3D con clic o arrastre.
  • InteractiveHoverButton — Botón cuya flecha y texto se transforman al pasar el ratón.
  • PeekRating — Valoración con estrellas que se levantan en ola al pasar.
  • RefineFrame — Marco que muestra el progreso de una imagen generada sin saltos.
  • ShinyButton — Botón con un brillo que lo cruza.