Una imagen o vídeo que se abre entre dos palabras.
npx shadcn@latest add "https://fancycomponents.dev/r/media-between-text.json"
Sustituyen a un componente estándar cuando la experiencia es parte del producto.
| Prop | Tipo | Por defecto |
|---|---|---|
| firstText | string | |
| secondText | string | |
| mediaUrl | string | |
| mediaType | "image" | "video" | |
| mediaContainerClassName | string | |
| fallbackUrl | string | |
| as | ElementType | "p" |
| autoPlay | boolean | true |
| loop | boolean | true |
| muted | boolean | true |
| playsInline | boolean | true |
| alt | string | |
| triggerType | "hover" | "ref" | "inView" | "hover" |
| containerRef | React.RefObject<HTMLDivElement | null> | |
| useInViewOptionsProp | UseInViewOptions | { once: true, amount: 0.5, root: containerRef, } |
| animationVariants | { initial: Variants["initial"] animate: Variants["animate"] } | { initial: { width: 0, opacity: 1 }, animate: { width: "auto", opacity: 1, transition: { duration: 0.4, type: "spring", bounce: 0 }, }, } |
| className | string | |
| leftTextClassName | string | |
| rightTextClassName | string |