DepthText
Tipografía extruida en capas con parallax 3D.
- Código: RODD·TX·007
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/DepthText-TS-TW
Cuándo usarlo
Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| text | string | "Elevate" |
| layers | number | 34 |
| depth | number | 2.4 |
| faceColor | string | "#f8fafc" |
| depthColor | string | "#7c3aed" |
| tilt | number | 7.5 |
| pointerTracking | boolean | true |
| smoothing | number | 0.14 |
| perspective | number | 900 |
| autoOrbit | boolean | true |
| orbitSpeed | number | 0.35 |
| fontSize | string | "clamp(3rem, 12vw, 7rem)" |
| fontWeight | number | string | 900 |
| shadow | boolean | true |
| className | string | "" |
| style | CSSProperties | {} |
Otros efectos de tipografía
- FuzzyText — Texto vibrante con interferencia analógica controlable al hover.
- Letter3dSwap — Letras que giran en 3D para cambiar de texto.
- RotatingText — Rota entre varias frases con transiciones de muelle.
- 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.