Texto que sigue un trazado curvo.
npx shadcn@latest add "https://fancycomponents.dev/r/text-along-path.json"
Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.
| Prop | Tipo | Por defecto |
|---|---|---|
| path | string | |
| pathId | string | |
| pathClassName | string | |
| preserveAspectRatio | PreserveAspectRatio | "xMidYMid meet" |
| showPath | boolean | false |
| width | string | number | "100%" |
| height | string | number | "100%" |
| viewBox | string | "0 0 100 100" |
| svgClassName | string | |
| text | string | |
| textClassName | string | |
| textAnchor | "start" | "middle" | "end" | "start" |
| animationType | "auto" | "scroll" | "auto" |
| duration | number | 4 |
| repeatCount | number | "indefinite" | "indefinite" |
| easingFunction | { calcMode?: string keyTimes?: string keySplines?: string } | {} |
| scrollContainer | RefObject<HTMLElement | null> | |
| scrollOffset | UseScrollOptions["offset"] | ["start end", "end end"] |
| scrollTransformValues | [number, number] | [0, 100] |