"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, useAnimation, Variants } from "framer-motion"; import gsap from "gsap"; // TypeScript Type for component props (even if empty, it's good practice) const ArrowRightIcon: React.FC<{ className?: string }> = ({ className }) => ( ); const CodeBracketIcon: React.FC<{ className?: string }> = ({ className }) => ( ); // --- Main Hero Section Component --- const FutureForwardHero = () => { const containerRef = useRef(null); const shape1Ref = useRef(null); const shape2Ref = useRef(null); const shape3Ref = useRef(null); // GSAP Animations Effect useEffect(() => { const tl = gsap.timeline({ defaults: { ease: "power3.inOut", duration: 2.5 }, repeat: -1, yoyo: true, }); // Clip-path animations for a morphing effect // Adjusted clip paths to create more "blob-like" shapes // Mouse move parallax effect const handleMouseMove = (e: MouseEvent) => { if (!containerRef.current) return; const { clientX, clientY } = e; const { offsetWidth, offsetHeight } = containerRef.current; // Calculate normalized position relative to the center of the container const mouseX = clientX / offsetWidth - 0.5; // -0.5 to 0.5 const mouseY = clientY / offsetHeight - 0.5; // -0.5 to 0.5 // Adjust multipliers for different parallax intensities for each shape const x1 = mouseX * 60; // More movement for shape 1 const y1 = mouseY * 60; const x2 = mouseX * -40; // Opposite direction, less movement for shape 2 const y2 = mouseY * -40; const x3 = mouseX * 50; // Moderate movement for shape 3 const y3 = mouseY * 50; gsap.to(shape1Ref.current, { x: x1, y: y1, duration: 1.2, ease: "power2.out", }); gsap.to(shape2Ref.current, { x: x2, y: y2, duration: 1.2, ease: "power2.out", }); gsap.to(shape3Ref.current, { x: x3, y: y3, duration: 1.2, ease: "power2.out", }); }; window.addEventListener("mousemove", handleMouseMove); return () => { window.removeEventListener("mousemove", handleMouseMove); tl.kill(); // Cleanup GSAP timeline }; }, []); // Framer Motion Variants const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, }; const itemVariants: Variants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100, damping: 10, }, }, }; const buttonVariants: Variants = { hover: { scale: 1.05, boxShadow: "0px 10px 30px -5px rgba(0, 118, 255, 0.4)", transition: { duration: 0.3, }, }, tap: { scale: 0.95 }, }; return (

{/* Background Shapes for GSAP Animation */}

{" "} {/* Initial blob shape */}

{/* Content */} Next-Gen Development Animate with Precision Crafting fluid, high-performance web experiences with the combined power of Framer Motion and GSAP for animations that feel alive. Get Started View Docs

); }; export default FutureForwardHero;

Future Forward Hero

Preview

Dependencies

Source