Media Between Text Scroll Demo

1import React from "react"
2 
3import useScreenSize from "@/hooks/use-screen-size"
4import MediaBetweenText from "@/components/fancy/blocks/media-between-text"
5 
6const elements = [
7  {
8    src: "https://cdn.cosmos.so/53454cbe-a4ec-4782-923f-a82d70e12645.mp4",
9    left: "Tim",
10    right: "Rodenböker",
11    url: "https://www.instagram.com/tim_rodenbroeker/",
12  },
13  {
14    src: "https://cdn.cosmos.so/499ddb3b-57cf-4c07-996c-f797fadf64ab.mp4",
15    left: "Simon ",
16    right: "Alexander-Adams",
17    url: "https://www.instagram.com/polyhop/",
18  },
19  {
20    src: "https://cdn.cosmos.so/444e4a2a-45a6-477f-b342-6b6bc9a7c53b.mp4",
21    left: "Andreion",
22    right: "de Castro",
23    url: "https://www.instagram.com/andreiongd/",
24  },
25  {
26    src: "https://cdn.cosmos.so/f533f1a8-9f67-4360-b395-7abc8594cac9.mp4",
27    left: "Lorraine",
28    right: "Li",
29    url: "https://www.instagram.com/lorrr.l/",
30  },
31]
32 
33export default function MediaBetweenTextScrollDemo() {
34  const ref = React.useRef<HTMLDivElement>(null)
35  const screenSize = useScreenSize()
36 
37  return (
38    <div
39      className="w-dvw h-dvh items-center justify-center bg-background overflow-auto"
40      ref={ref}
41    >
42      <div className="h-full relative w-full flex">
43        <h3 className="text-5xl sm:text-8xl tracking-wide absolute sm:bottom-12 sm:left-12 bottom-4 left-4 w-64">
44          today's inspo
45        </h3>
46        <p className="bottom-4 right-4 sm:right-12 sm:bottom-12 absolute ">
47          Scroll down ↓
48        </p>
49      </div>
50 
51      <div className="h-full w-full flex flex-col space-y-12 mt-24 justify-center items-center text-6xl px-6">
52        {elements.map((element, index) => (
53          <a href={element.url} target="_blank" rel="noreferrer">
54            <MediaBetweenText
55              key={index}
56              firstText={element.left}
57              secondText={element.right}
58              mediaUrl={element.src}
59              mediaType="video"
60              triggerType="inView"
61              useInViewOptionsProp={{
62                once: false,
63                amount: 1,
64                root: ref,
65                margin: "-5% 0px -0% 0px",
66              }}
67              containerRef={ref}
68              mediaContainerClassName="w-full h-[40px] sm:h-[80px] overflow-hidden mx-1 sm:mx-3 mt-1 sm:mt-4"
69              className="cursor-pointer text-lg sm:text-4xl font-light flex flex-row items-center justify-center"
70              animationVariants={{
71                initial: { width: 0 },
72                animate: {
73// … truncated