MaskedHeading

Titular gigante con imagen o malla de color vista a través de las letras.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/MaskedHeading-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'Designed in the details'
tagstring'h2'
mediaType"image" | "video""image"
srcstring''
posterstring''
fillScalenumber1.25
parallaxnumber26
driftnumber18
brightnessnumber1
saturationnumber1
grayscalebooleanfalse
reveal"rise" | "wipe" | "fade" | "none""rise"
trigger"view" | "mount" | "hover""view"
durationnumber1.1
staggernumber0.09
align"left" | "center" | "right""center"
weightnumber700
trackingnumber-0.03
lineHeightnumber1.06
textScalenumber0.115
classNamestring''
styleobject—

Otros efectos de tipografía

  • ScrollAndSwapText — Texto que cambia de letras al hacer scroll.
  • Shuffle — Las letras barajan su posición antes de asentarse.
  • TextAlongPath — Texto que sigue un trazado curvo.
  • 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.