Marquesina de imágenes que sigue una curva SVG.
npx shadcn@latest add "https://fancycomponents.dev/r/marquee-along-svg-path.json"
Sustituyen a un componente estándar cuando la experiencia es parte del producto.
| Prop | Tipo | Por defecto |
|---|---|---|
| children | React.ReactNode | |
| className | string | |
| path | string | |
| pathId | string | |
| preserveAspectRatio | PreserveAspectRatio | "xMidYMid meet" |
| showPath | boolean | false |
| width | string | number | "100%" |
| height | string | number | "100%" |
| viewBox | string | "0 0 100 100" |
| baseVelocity | number | 5 |
| direction | "normal" | "reverse" | "normal" |
| easing | (value: number) => number | |
| slowdownOnHover | boolean | false |
| slowDownFactor | number | 0.3 |
| slowDownSpringConfig | SpringOptions | { damping: 50, stiffness: 400 } |
| useScrollVelocity | boolean | false |
| scrollAwareDirection | boolean | false |
| scrollSpringConfig | SpringOptions | { damping: 50, stiffness: 400 } |
| scrollContainer | RefObject<HTMLElement | null> | HTMLElement | null | |
| repeat | number | 3 |
| draggable | boolean | false |
| dragSensitivity | number | 0.2 |
| dragVelocityDecay | number | 0.96 |
| dragAwareDirection | boolean | false |
| grabCursor | boolean | false |
| enableRollingZIndex | boolean | true |
| zIndexBase | number | 1 |
| zIndexRange | number | 10 |
| cssVariableInterpolation | CSSVariableInterpolation[] | [] |
| responsive | boolean | false |