Highlighter
Subrayado dibujado a mano sobre el texto.
- Código: RODD·TX·045
- Familia: Tipografía
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/highlighter.json"
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 |
|---|
| children | React.ReactNode | |
| action | AnnotationAction | "highlight" |
| color | string | "#ffd1dc" |
| strokeWidth | number | 1.5 |
| animationDuration | number | 600 |
| iterations | number | 2 |
| padding | number | 2 |
| multiline | boolean | true |
| isView | boolean | false |
Otros efectos de tipografía
- 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.
- TrueFocus — Un visor de enfoque salta entre palabras desenfocando el resto.
- WarpText — Distorsión WebGL que dobla y refracta el texto alrededor del puntero.