WarpText

Distorsión WebGL que dobla y refracta el texto alrededor del puntero.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/WarpText-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"Bend the moment"
colorstring"#f8f5ff"
warpStrengthnumber0.08
warpScalenumber1.7
speednumber0.55
pointerInfluencenumber0.42
pointerStrengthnumber0.38
refractionnumber0.018
ripplebooleantrue
fontSizestring | number"clamp(3rem, 10vw, 9rem)"
fontWeightstring | number800
fontFamilystring"inherit"
letterSpacingstring | number"-0.06em"
lineHeightstring | number0.9
classNamestring""
styleReact.CSSPropertiesundefined

Otros efectos de tipografía

  • CircularText — Texto en órbita circular que acelera o se detiene al pasar el ratón.
  • DepthText — Tipografía extruida en capas con parallax 3D.
  • FoldText — Las líneas se despliegan como papel doblado que se abre.
  • Highlighter — Subrayado dibujado a mano sobre el texto.
  • ParticleText — El texto se forma a partir de partículas que se dispersan y reagrupan.
  • ScrollFloat — Las letras flotan hacia su posición al hacer scroll.