StrokeText

Las letras se dibujan con trazo y después se rellenan.

  • Código: RODD·TX·025
  • Familia: Tipografía
  • Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

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

Cuándo usarlo

Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.

Props para personalizarlo

PropTipoPor defecto
textstring"Draw Attention"
strokeColorstring"#A78BFA"
fillColorstring"#F8FAFC"
strokeWidthnumber1.4
drawDurationnumber1.6
fillDelaynumber0.2
staggernumber0.05
easestring"power2.out"
trigger"mount" | "hover" | "scroll" | "loop""mount"
fillMode"fade" | "wipe" | "none""wipe"
fontSizenumber | string128
fontWeightnumber | string800
letterSpacingnumber | string-4
reversebooleanfalse
classNamestring""
styleCSSProperties{}

Otros efectos de tipografía

  • TextPressure — Tipografía variable que se ensancha y engorda según la cercanía del cursor.
  • VariableProximity — El peso de cada letra cambia según la distancia al puntero.
  • AuroraText — Texto relleno con una aurora de colores animada.
  • CountUp — Contador animado con separadores y decimales, ideal para métricas.
  • DockText — Letras con magnificación tipo dock.
  • GlitchText — Glitch RGB con separación de canales y temblor.