[V0_FILE]typescriptreact:file="components/Logo.tsx" isMerged="true" import React from 'react'; const Logo = () => { return ( ); }; export default Logo; [V0_FILE]typescriptreact:file="components/PreLoader.tsx" isEdit="true" 'use client' import React, { useEffect, useState } from "react"; import gsap from "gsap"; import Logo from "./Logo"; import ReplayButton from "./ReplayButton"; type PreLoaderProps = { enableBlur?: boolean; animationSpeed?: number; } export default function PreLoader({ enableBlur = true, animationSpeed = 1, }: PreLoaderProps) { const [showReplay, setShowReplay] = useState(false); useEffect(() => { const tl = gsap.timeline(); const baseSpeed = animationSpeed; // Preloader Animation const preLoaderAnim = () => { tl.to(".texts-container", { duration: 0, opacity: 1, ease: "Power3.easeOut", }) .from(".texts-container span", { duration: 1.5 / baseSpeed, delay: 1 / baseSpeed, y: 70, skewY: 10, ...(enableBlur && { filter: "blur(15px)" }), stagger: 0.4 / baseSpeed, ease: "Power3.easeOut", }) .to(".texts-container span", { duration: 1 / baseSpeed, y: 70, skewY: -20, ...(enableBlur && { filter: "blur(20px)" }), stagger: 0.2 / baseSpeed, ease: "Power3.easeOut", }) .to("body", { duration: 0.01, css: { overflowY: "scroll" }, ease: "power3.inOut", }) .from(".sub", { duration: 1 / baseSpeed, opacity: 0, y: 80, ease: "expo.easeOut", }) .to( ".preloader", { duration: 1.5 / baseSpeed, height: "0vh", ease: "Power3.easeOut", onComplete: () => { mobileLanding(); setShowReplay(true); }, }, "-=2" ) .to(".preloader", { duration: 0, css: { display: "none" }, }); }; const mobileLanding = () => { if (window.innerWidth < 763) { tl.from(".landing__main2", { duration: 1 / baseSpeed, delay: 0, opacity: 0, y: 80, ease: "expo.easeOut", }); } }; preLoaderAnim(); }, [enableBlur, animationSpeed]); const handleReplay = () => { setShowReplay(false); gsap.set(".preloader", { display: "flex", height: "100vh" }); gsap.set(".texts-container", { opacity: 0 }); gsap.set(".texts-container span", { y: 0, skewY: 0, filter: "blur(0px)" }); const tl = gsap.timeline(); tl.to(".preloader", { duration: 0.5, opacity: 1, ease: "Power3.easeOut", onComplete: () => { const event = new Event('replay'); window.dispatchEvent(event); } }); }; return ( <>

remco stoeten project name

{showReplay && } ); } [V0_FILE]typescriptreact:file="components/ReplayButton.tsx" import React from 'react'; type ReplayButtonProps = { onClick: () => void; }; const ReplayButton: React.FC = ({ onClick }) => { return ( ); }; export default ReplayButton; [V0_FILE]typescriptreact:file="components/PlayButton.tsx" import React from 'react'; import { motion } from 'framer-motion'; type PlayButtonProps = { variant: 'fade' | 'scale' | 'rotate'; text: string; }; const PlayButton: React.FC = ({ variant, text }) => { const variants = { fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 } }, scale: { initial: { scale: 0 }, animate: { scale: 1 }, transition: { type: 'spring', stiffness: 260, damping: 20 } }, rotate: { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, transition: { duration: 0.5 } } }; return ( {text} ); }; export default PlayButton; [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" 'use client' import React, { useState, useEffect } from 'react'; import PreLoader from '../components/PreLoader'; import PlayButton from '../components/PlayButton'; export default function Home() { const [loading, setLoading] = useState(true); useEffect(() => { const timer = setTimeout(() => { setLoading(false); }, 5000); // Simulate a 5-second loading time const handleReplay = () => { setLoading(true); setTimeout(() => { setLoading(false); }, 5000); }; window.addEventListener('replay', handleReplay); return () => { clearTimeout(timer); window.removeEventListener('replay', handleReplay); }; }, []); return (

{loading && }

Welcome to My Project

This is the main content of the page.

); } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'PreLoader Demo', description: 'A demo of the PreLoader component with replay and play button variants', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }