Media Between Text

1"use client"
2 
3import { ElementType, forwardRef, useImperativeHandle, useRef, useState } from "react"
4import { motion, useInView, UseInViewOptions, Variants } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface MediaBetweenTextProps {
9  /**
10   * The text to display before the media
11   */
12  firstText: string
13 
14  /**
15   * The text to display after the media
16   */
17  secondText: string
18 
19  /**
20   * URL of the media (image or video) to display
21   */
22  mediaUrl: string
23 
24  /**
25   * Type of media to display
26   */
27  mediaType: "image" | "video"
28 
29  /**
30   * Optional class name for the media container
31   */
32  mediaContainerClassName?: string
33 
34  /**
35   * Fallback URL for video poster or image loading
36   */
37  fallbackUrl?: string
38 
39  /**
40   * HTML Tag to render the text elements as
41   * @default p
42   */
43  as?: ElementType
44 
45  /**
46   * Whether video should autoplay
47   * @default true
48   */
49  autoPlay?: boolean
50 
51  /**
52   * Whether video should loop
53   * @default true
54   */
55  loop?: boolean
56 
57  /**
58   * Whether video should be muted
59   * @default true
60   */
61  muted?: boolean
62 
63  /**
64   * Whether video should play inline
65   * @default true
66   */
67  playsInline?: boolean
68 
69  /**
70   * Alt text for image
71   */
72  alt?: string
73 
74  /**
75   * Type of animation trigger
76   * @default "hover"
77   */
78  triggerType?: "hover" | "ref" | "inView"
79 
80  /**
81   * Reference to container element for inView trigger
82   */
83  containerRef?: React.RefObject<HTMLDivElement | null>
84 
85  /**
86   * Options for useInView hook
87   */
88  useInViewOptionsProp?: UseInViewOptions
89 
90  /**
91   * Custom animation variants
92   */
93  animationVariants?: {
94    initial: Variants["initial"]
95    animate: Variants["animate"]
96  }
97 
98  /**
99   * Optional class name for the root element
100   */
101  className?: string
102 
103  /**
104   * Optional class name for the left text element
105   */
106  leftTextClassName?: string
107 
108  /**
109   * Optional class name for the right text element
110   */
111  rightTextClassName?: string
112}
113 
114export type MediaBetweenTextRef = {
115  animate: () => void
116  reset: () => void
117}
118 
119export const MediaBetweenText = forwardRef<
120  MediaBetweenTextRef,
121  MediaBetweenTextProps
122>(
123  (
124    {
125      firstText,
126      secondText,
127      mediaUrl,
128      mediaType,
129      mediaContainerClassName,
130      fallbackUrl,
131      as = "p",
132      autoPlay = true,
133      loop = true,
134      muted = true,
135      playsInline = true,
136      alt,
137      triggerType = "hover",
138      containerRef,
139      useInViewOptionsProp = {
140        once: true,
141        amount: 0.5,
142// … truncated