Docs
Blocks
Media Between Text

Media Between Text

A component that animates a media (image or video) between two text elements.

Artwork by Joffey

Installation


1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/media-between-text.json"

Usage


The component is extremely simple, and only consists of two text elements and a media element (either an image or a video). The trick for the smooth animation is to use layout animations on the two texts, so they smoothly transition when the media element is revealed. You can trigger the media reveal animation by hover, ref, or inView:

  • hover: The media will animate when you hover over the component
  • ref: You can call the animate and reset methods exposed via a ref to manually control the animation
  • inView: The media will animate when the component is in view. You can pass an useInViewOptionsProp prop to customize the in view detection. Refer to the motion documentation for more details.

You can also customize the animation by passing a animationVariants prop. Please use animate and initial variants. Refer to the motion documentation for more details.

Examples


Scroll

Scroll down to trigger the animation. In this case, you can pass down a containerRef prop to the component to track when elements come into view within that specific container, rather than the entire viewport. This is useful when you want to trigger animations based on scrolling within a specific scrollable container.

Artworks by Tim Rodenböker, polyhop, Andreion de Castro, Lorraine Li

Vertical & Ref

You can also style the whole container, the media element, and the text elements separately. In this example, we use a column-layout to create a vertical effect. The animation can also be triggered from outside the component, by calling the animate and reset methods exposed via a ref. Click on the "Open" button to trigger the animation.

Artificial

Artificial  Intelligence

Intelligence

Video from chrbutler.com

Props


PropTypeDefaultDescription
firstText*string-The text to display before the media
secondText*string-The text to display after the media
mediaUrl*string-URL of the media (image or video) to display
mediaType*"image" | "video"-Type of media to display
mediaContainerClassNamestring-Optional class name for the media container
fallbackUrlstring-Fallback URL for video poster or image loading
asElementType"p"HTML Tag to render the text elements as
autoPlaybooleantrueWhether video should autoplay
loopbooleantrueWhether video should loop
mutedbooleantrueWhether video should be muted
playsInlinebooleantrueWhether video should play inline
altstring-Alt text for image
triggerType"hover" | "ref" | "inView""hover"Type of animation trigger
containerRefReact.RefObject<HTMLDivElement>-Reference to container element for inView trigger
useInViewOptionsPropUseInViewOptions{ once: true, amount: 0.5, root: containerRef }Options for useInView hook
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 } } }Custom animation variants
classNamestring-Optional class name for the root element
leftTextClassNamestring-Optional class name for the left text element
rightTextClassNamestring-Optional class name for the right text element