"use client"; import React, { useRef, useEffect } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; import Lenis from "lenis"; export default function AIVideoEditorHeaderSitop({ className }: { className?: string }) { const containerRef = useRef(null); const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start start", "end end"], }); const starScale = useTransform(scrollYProgress, [0, 1.0], [1, 40]); const starOpacity = useTransform(scrollYProgress, [0, 0.7, 1.0], [1, 1, 0]); const starDisplay = useTransform(scrollYProgress, (pos: number) => (pos >= 1.0 ? "none" : "flex")); const haloScale = useTransform(scrollYProgress, [0, 1.0], [1, 5]); const haloOpacity = useTransform(scrollYProgress, [0, 0.6, 1.0], [0.4, 0.2, 0]); const walletOpacity = useTransform(scrollYProgress, [0.5, 1.0], [0, 1]); const walletY = useTransform(scrollYProgress, [0.5, 1.0], [40, 0]); const walletScale = useTransform(scrollYProgress, [0.5, 1.0], [0.95, 1]); const bgAScale = useTransform(scrollYProgress, [0, 1.0], [1, 5]); const bgAOpacity = useTransform(scrollYProgress, [0.2, 1.0], [1, 0]); const bgBOpacity = useTransform(scrollYProgress, [0.4, 1.0], [0, 1]); const bgBScale = useTransform(scrollYProgress, [0.4, 1.0], [0.85, 1]); const indicatorOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]); useEffect(() => { const lenis = new Lenis({ duration: 1.4, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smoothWheel: true, touchMultiplier: 1.5, }); let rafId: number; const raf = (time: number) => { lenis.raf(time); rafId = requestAnimationFrame(raf); }; rafId = requestAnimationFrame(raf); return () => { cancelAnimationFrame(rafId); lenis.destroy(); }; }, []); const enterApp = () => { window.scrollTo({ top: window.innerHeight * 1.0, behavior: "smooth", }); }; return ( <>

{/* BACKGROUND LAYER A */}

{/* BACKGROUND LAYER B */}