Untitled
unknown
plain_text
2 months ago
1.1 kB
2
Indexable
import { useEffect, useState } from "react"; import { motion } from "framer-motion"; export default function YouTubeShortTemplate({ text, videoUrl }) { const [showText, setShowText] = useState(false); useEffect(() => { const timer = setTimeout(() => setShowText(true), 1000); return () => clearTimeout(timer); }, []); return ( <div className="relative w-full h-screen flex items-center justify-center bg-black"> {/* Video Background */} <video className="absolute top-0 left-0 w-full h-full object-cover" src={videoUrl} autoPlay loop muted /> {/* Text Overlay */} {showText && ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="absolute bottom-10 w-full text-center text-white px-4" > <p className="text-xl font-bold bg-black bg-opacity-50 p-2 rounded-lg"> {text} </p> </motion.div> )} </div> ); }
Editor is loading...
Leave a Comment