ParticleText

El texto se forma a partir de partículas que se dispersan y reagrupan.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/ParticleText-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"React Bits"
particleSizenumber2
densitynumber4
colorstring"#ffffff"
highlightColorstring"#8b5cf6"
scatternumber180
gatherDurationnumber1600
staggernumber420
pointerRepelnumber40
repelRadiusnumber120
idleDriftnumber0.7
trigger"mount" | "hover" | "click""mount"
fontSizenumber | string"clamp(3rem, 12vw, 8rem)"
fontWeightnumber | string800
fontFamilystring"inherit"
glowbooleantrue
classNamestring""
styleReact.CSSPropertiesundefined

Otros efectos de tipografía

  • ScrollReveal — El texto se desenfoca y revela palabra a palabra con el scroll.
  • SplitFlapText — Panel de aeropuerto split-flap que cambia de frase con clacks mecánicos.
  • TextCursor — Un texto que sigue al cursor dejando una estela de copias.
  • TrueFocus — Un visor de enfoque salta entre palabras desenfocando el resto.
  • WarpText — Distorsión WebGL que dobla y refracta el texto alrededor del puntero.
  • BreathingText — Texto que “respira” cambiando su peso.