hover-video-player

1"use client"
2 
3import React from "react"
4import { motion } from "framer-motion"
5 
6import { cn } from "@/lib/utils"
7 
8import { GradientHeading } from "../ui/gradient-heading"
9import { HoverVideoPlayer } from "../ui/hover-video-player"
10 
11export function HoverVideoPlayerDemo() {
12  return (
13    <div className="flex flex-col gap-12 py-12 w-full h-full items-center justify-center">
14      <div className="text-center">
15        <GradientHeading>Hover video player</GradientHeading>
16      </div>
17      <motion.div
18        initial={{ maxWidth: "24rem" }} // 96 in rem
19        whileHover={{ maxWidth: "100%" }}
20        transition={{
21          duration: 0.5,
22          ease: [0.32, 0.72, 0, 1], // Custom easing for smooth animation
23        }}
24        className={cn(
25          "group relative flex flex-col overflow-hidden rounded-lg w-full h-full",
26          "bg-white shadow-sm ring-1 ring-black/5",
27          "data-[dark]:bg-stone-800 data-[dark]:ring-white/15"
28        )}
29      >
30        <HoverVideoPlayer
31          videoSrc="https://player.vimeo.com/video/1037289858"
32          thumbnailSrc="/placeholders/newcopy-thumbnail.png"
33          enableControls
34          style={{
35            width: "100%",
36            maxWidth: "100vw",
37            aspectRatio: "16/9",
38          }}
39        />
40      </motion.div>
41 
42      <a href="https://www.newcult.co" target="_blank">
43        newcopy.ai
44      </a>
45    </div>
46  )
47}