FlipCard

Tarjeta de dos caras que gira en 3D con clic o arrastre.

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/FlipCard-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
frontReactNodenull
backReactNodenull
flippedboolean-
defaultFlippedbooleanfalse
onFlipChange(flipped: boolean) => void-
axis'y' | 'x''y'
flipOnClickbooleantrue
draggablebooleantrue
dragDistancenumber0
tiltbooleantrue
tiltMaxnumber12
glarebooleantrue
glareOpacitynumber0.22
hoverScalenumber1.03
perspectivenumber1100
stiffnessnumber170
dampingnumber20
widthnumber300
heightnumber400
radiusnumber22
backgroundstring"#27272a"
colorstring"#f5f5f5"
shadowbooleantrue
shadowColorstring"#000000"
shadowOpacitynumber0.45
disabledbooleanfalse
ariaLabelstring"Flip card"
classNamestring""

Otros efectos de microinteracciones

  • JellyRadio — Grupo de opciones cuya selección se hincha como gelatina.
  • PromptBar — Caja de chat con fuentes @, comandos /, modelo y dictado.
  • RippleButton — Botón con onda al hacer clic.
  • Shredder — Lista con trituradora: arrastra una fila para destruirla.
  • SquishSwitch — Interruptor que se estira según la velocidad y se aplasta al llegar.
  • ThoughtLine — Cabecera de razonamiento de IA con pasos y temporizador.