Enhance website appearance with animations and smooth scrolling effects

Integrates Lenis and GSAP for advanced scrolling animations, parallax effects, and dynamic UI elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: 298b9878-6940-427f-99ca-03452da5b40f
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/MFdA8rN

.replit

@@ -13,7 +13,7 @@ localPort = 5000
 externalPort = 80
 
 [[ports]]
-localPort = 44245
+localPort = 45659
 externalPort = 3000
 
 [agent]
@@ -35,10 +35,10 @@ args = "Flask Server"
 name = "Flask Server"
 author = "agent"
 
+[workflows.workflow.metadata]
+outputType = "webview"
+
 [[workflows.workflow.tasks]]
 task = "shell.exec"
 args = "python app.py"
 waitForPort = 5000
-
-[workflows.workflow.metadata]
-outputType = "webview"

static/css/styles.css

@@ -31,6 +31,29 @@ body {
     font-family: var(--font-body);
     line-height: 1.6;
     overflow-x: hidden;
+    position: relative;
+}
+
+body::after {
+    content: '';
+    position: fixed;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: 
+        radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 40%),
+        radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.03) 0%, transparent 40%),
+        radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+    animation: float-background 20s ease-in-out infinite;
+}
+
+@keyframes float-background {
+    0%, 100% { transform: translate(0, 0) rotate(0deg); }
+    33% { transform: translate(2%, -2%) rotate(1deg); }
+    66% { transform: translate(-2%, 2%) rotate(-1deg); }
 }
 
 nav {
@@ -41,6 +64,12 @@ nav {
     z-index: 1000;
     width: calc(100% - 40px);
     max-width: 1200px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+nav.scrolled {
+    top: 10px;
+    backdrop-filter: blur(20px);
 }
 
 .nav-container {
@@ -1193,3 +1222,405 @@ span.emoji:hover::after {
     margin-top: 25px !important;
     font-weight: 100 !important;
 }
+
+html {
+    scroll-behavior: auto;
+}
+
+body {
+    overflow-x: hidden;
+    position: relative;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: -1;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+@keyframes shimmer {
+    0% { background-position: -200% center; }
+    100% { background-position: 200% center; }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.nav-container {
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-container::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: 16px;
+    padding: 1px;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.nav-container:hover::before {
+    opacity: 1;
+}
+
+.stats-card {
+    position: relative;
+    overflow: hidden;
+}
+
+.stats-card::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        45deg,
+        transparent,
+        rgba(59, 130, 246, 0.1),
+        transparent
+    );
+    transform: rotate(45deg);
+    transition: all 0.6s ease;
+    opacity: 0;
+}
+
+.stats-card:hover::before {
+    opacity: 1;
+    animation: shimmer 2s infinite;
+}
+
+.card,
+.card-sponsors,
+.member-card {
+    position: relative;
+    overflow: hidden;
+}
+
+.card::after,
+.card-sponsors::after,
+.member-card::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s ease, height 0.6s ease;
+}
+
+.card:hover::after,
+.card-sponsors:hover::after,
+.member-card:hover::after {
+    width: 300%;
+    height: 300%;
+}
+
+.hero-image-section {
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-image-section::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
+    z-index: 3;
+    opacity: 0;
+    transition: opacity 0.6s ease;
+}
+
+.hero-image-section:hover::before {
+    opacity: 1;
+}
+
+.stats-button,
+.bottom-center-button,
+#sponsors-more-button {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stats-button::before,
+.bottom-center-button::before,
+#sponsors-more-button::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.4s ease, height 0.4s ease;
+}
+
+.stats-button:hover::before,
+.bottom-center-button:hover::before,
+#sponsors-more-button:hover::before {
+    width: 300px;
+    height: 300px;
+}
+
+.stats-card-header {
+    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    background-size: 200% 200%;
+    animation: gradient-shift 3s ease infinite;
+}
+
+@keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+.heading {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.heading::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.heading:hover::after {
+    width: 80%;
+}
+
+.robo-card {
+    cursor: pointer;
+}
+
+.robo-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
+    opacity: 0;
+    z-index: 1;
+    transition: opacity 0.4s ease;
+}
+
+.robo-card:hover::before {
+    opacity: 1;
+}
+
+.competition-card {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sponsors-card {
+    position: relative;
+}
+
+.sponsors-card::after {
+    content: '';
+    position: absolute;
+    inset: -5px;
+    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+    border-radius: 8px;
+    opacity: 0;
+    z-index: -1;
+    filter: blur(20px);
+    transition: opacity 0.4s ease;
+}
+
+.sponsors-card:hover::after {
+    opacity: 0.3;
+}
+
+.overlay-container .overlay {
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+hr {
+    position: relative;
+    overflow: hidden;
+}
+
+hr::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
+    animation: shimmer 3s infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+    
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+.member-image {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+}
+
+.home-but {
+    position: relative;
+    overflow: hidden;
+}
+
+.home-but::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(59, 130, 246, 0.3);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.3s ease, height 0.3s ease;
+}
+
+.home-but:hover::before {
+    width: 150%;
+    height: 150%;
+}
+
+.scroll-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    z-index: 9999;
+    transform-origin: left;
+    border-radius: 0 4px 4px 0;
+}
+
+* {
+    cursor: default;
+}
+
+a, button, .stats-card, .card, .member-card {
+    cursor: pointer !important;
+}
+
+body {
+    cursor: none;
+}
+
+.custom-cursor {
+    width: 20px;
+    height: 20px;
+    border: 2px solid #3b82f6;
+    border-radius: 50%;
+    position: fixed;
+    pointer-events: none;
+    z-index: 10000;
+    transition: all 0.15s ease;
+    transform: translate(-50%, -50%);
+    mix-blend-mode: difference;
+}
+
+.custom-cursor-follower {
+    width: 40px;
+    height: 40px;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    border-radius: 50%;
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    transition: all 0.3s ease;
+    transform: translate(-50%, -50%);
+}
+
+.custom-cursor.hover {
+    width: 50px;
+    height: 50px;
+    background: rgba(59, 130, 246, 0.1);
+}
+
+@media (max-width: 850px) {
+    .custom-cursor,
+    .custom-cursor-follower {
+        display: none;
+    }
+    
+    body {
+        cursor: default;
+    }
+}
+
+.sub-header,
+.hero-title {
+    background: linear-gradient(135deg, #ffffff, #a0a0a0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.border-triangle {
+    display: none;
+}

static/js/scripts.js

@@ -1,4 +1,62 @@
+let lenis;
+
 document.addEventListener('DOMContentLoaded', function() {
+    gsap.registerPlugin(ScrollTrigger);
+    
+    lenis = new Lenis({
+        duration: 1.2,
+        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+        smoothWheel: true,
+        smoothTouch: false,
+        touchMultiplier: 2,
+        infinite: false
+    });
+
+    function raf(time) {
+        lenis.raf(time);
+        requestAnimationFrame(raf);
+    }
+    requestAnimationFrame(raf);
+
+    lenis.on('scroll', ScrollTrigger.update);
+
+    gsap.ticker.lagSmoothing(0);
+
+    ScrollTrigger.scrollerProxy(document.body, {
+        scrollTop(value) {
+            if (arguments.length) {
+                lenis.scrollTo(value, { immediate: true });
+            }
+            return lenis.scroll || 0;
+        },
+        getBoundingClientRect() {
+            return {
+                top: 0,
+                left: 0,
+                width: window.innerWidth,
+                height: window.innerHeight
+            };
+        },
+        pinType: document.body.style.transform ? "transform" : "fixed"
+    });
+
+    ScrollTrigger.defaults({ scroller: document.body });
+
+    ScrollTrigger.addEventListener('refresh', () => lenis.update());
+    ScrollTrigger.refresh();
+
+    let lastScrollTop = 0;
+    const nav = document.querySelector('nav');
+    
+    lenis.on('scroll', ({ scroll }) => {
+        if (scroll > 100) {
+            nav?.classList.add('scrolled');
+        } else {
+            nav?.classList.remove('scrolled');
+        }
+        lastScrollTop = scroll;
+    });
+
     const currentPath = window.location.pathname;
     
     const navLinks = document.querySelectorAll('.nav-item-center, .nav-item-left');
@@ -30,4 +88,293 @@ document.addEventListener('DOMContentLoaded', function() {
             this.classList.add('active');
         });
     });
+
+    initParallaxEffects();
+    initScrollAnimations();
+    initMagneticButtons();
+    initFloatingElements();
+    initPageLoadAnimation();
+    initCustomCursor();
+    initScrollIndicator();
 });
+
+function initParallaxEffects() {
+    const heroImage = document.querySelector('.hero-team-image');
+    if (heroImage) {
+        gsap.to(heroImage, {
+            yPercent: 30,
+            ease: "none",
+            scrollTrigger: {
+                trigger: heroImage.parentElement,
+                start: "top top",
+                end: "bottom top",
+                scrub: 1
+            }
+        });
+    }
+
+    const baseImage = document.querySelector('.overlay-container .base');
+    if (baseImage) {
+        gsap.to(baseImage, {
+            yPercent: 20,
+            ease: "none",
+            scrollTrigger: {
+                trigger: '.bg',
+                start: "top top",
+                end: "bottom top",
+                scrub: 1.5
+            }
+        });
+    }
+
+    const meetTeamImage = document.querySelector('#meet-our-team');
+    if (meetTeamImage) {
+        gsap.to(meetTeamImage, {
+            yPercent: 15,
+            ease: "none",
+            scrollTrigger: {
+                trigger: '.meet-our-team-container',
+                start: "top bottom",
+                end: "bottom top",
+                scrub: 1
+            }
+        });
+    }
+
+    const sponsorCards = document.querySelectorAll('.sponsors-card');
+    sponsorCards.forEach((card, index) => {
+        gsap.to(card, {
+            y: -30 * (index % 2 === 0 ? 1 : -1),
+            ease: "none",
+            scrollTrigger: {
+                trigger: card,
+                start: "top bottom",
+                end: "bottom top",
+                scrub: 1
+            }
+        });
+    });
+}
+
+function initScrollAnimations() {
+    const fadeUpElements = document.querySelectorAll('.home-info, .stats-container, .sub-header, .sub-content, .sponsors-container, .hero-image-section, .card, .member-card, .robo-card, .competition-card');
+    
+    fadeUpElements.forEach((element, index) => {
+        gsap.fromTo(element, 
+            {
+                opacity: 0,
+                y: 60
+            },
+            {
+                opacity: 1,
+                y: 0,
+                duration: 1,
+                ease: "power3.out",
+                scrollTrigger: {
+                    trigger: element,
+                    start: "top 85%",
+                    end: "top 60%",
+                    toggleActions: "play none none reverse"
+                }
+            }
+        );
+    });
+
+    const statsCards = document.querySelectorAll('.stats-card');
+    statsCards.forEach((card, index) => {
+        gsap.fromTo(card,
+            {
+                opacity: 0,
+                scale: 0.8,
+                y: 40
+            },
+            {
+                opacity: 1,
+                scale: 1,
+                y: 0,
+                duration: 0.8,
+                delay: index * 0.1,
+                ease: "back.out(1.7)",
+                scrollTrigger: {
+                    trigger: card,
+                    start: "top 85%",
+                    toggleActions: "play none none reverse"
+                }
+            }
+        );
+    });
+
+    const headings = document.querySelectorAll('.heading');
+    headings.forEach(heading => {
+        gsap.fromTo(heading,
+            {
+                opacity: 0,
+                scale: 0.9,
+                y: 30
+            },
+            {
+                opacity: 1,
+                scale: 1,
+                y: 0,
+                duration: 0.8,
+                ease: "power2.out",
+                scrollTrigger: {
+                    trigger: heading,
+                    start: "top 90%",
+                    toggleActions: "play none none reverse"
+                }
+            }
+        );
+    });
+
+    const footerText = document.querySelector('.footer-text');
+    if (footerText) {
+        gsap.fromTo(footerText,
+            {
+                opacity: 0,
+                y: 40
+            },
+            {
+                opacity: 1,
+                y: 0,
+                duration: 1.2,
+                delay: 0.5,
+                ease: "power3.out"
+            }
+        );
+    }
+}
+
+function initMagneticButtons() {
+    const buttons = document.querySelectorAll('.stats-button, .bottom-center-button, #sponsors-more-button, .home-but');
+    
+    buttons.forEach(button => {
+        button.addEventListener('mouseenter', function(e) {
+            gsap.to(button, {
+                scale: 1.05,
+                duration: 0.3,
+                ease: "power2.out"
+            });
+        });
+
+        button.addEventListener('mouseleave', function(e) {
+            gsap.to(button, {
+                scale: 1,
+                x: 0,
+                y: 0,
+                duration: 0.3,
+                ease: "elastic.out(1, 0.5)"
+            });
+        });
+
+        button.addEventListener('mousemove', function(e) {
+            const rect = button.getBoundingClientRect();
+            const x = e.clientX - rect.left - rect.width / 2;
+            const y = e.clientY - rect.top - rect.height / 2;
+            
+            gsap.to(button, {
+                x: x * 0.3,
+                y: y * 0.3,
+                duration: 0.3,
+                ease: "power2.out"
+            });
+        });
+    });
+}
+
+function initFloatingElements() {
+    const memberCards = document.querySelectorAll('.member-card');
+    memberCards.forEach((card, index) => {
+        gsap.to(card, {
+            y: -10,
+            duration: 2 + (index % 3) * 0.5,
+            repeat: -1,
+            yoyo: true,
+            ease: "sine.inOut",
+            delay: index * 0.2
+        });
+    });
+
+    const cards = document.querySelectorAll('.card, .card-sponsors');
+    cards.forEach((card, index) => {
+        gsap.to(card, {
+            y: -8,
+            duration: 2.5 + (index % 2) * 0.5,
+            repeat: -1,
+            yoyo: true,
+            ease: "sine.inOut",
+            delay: index * 0.15
+        });
+    });
+}
+
+function initPageLoadAnimation() {
+    gsap.fromTo('body',
+        { opacity: 0 },
+        { opacity: 1, duration: 0.6, ease: "power2.out" }
+    );
+
+    const nav = document.querySelector('nav');
+    if (nav) {
+        gsap.fromTo(nav,
+            { y: -100, opacity: 0 },
+            { y: 0, opacity: 1, duration: 0.8, delay: 0.2, ease: "power3.out" }
+        );
+    }
+
+    const bg = document.querySelector('.bg');
+    if (bg) {
+        gsap.fromTo(bg,
+            { scale: 1.1, opacity: 0 },
+            { scale: 1, opacity: 1, duration: 1.5, ease: "power2.out" }
+        );
+    }
+}
+
+function initCustomCursor() {
+    if (window.innerWidth <= 850) return;
+
+    const cursor = document.createElement('div');
+    cursor.className = 'custom-cursor';
+    document.body.appendChild(cursor);
+
+    const follower = document.createElement('div');
+    follower.className = 'custom-cursor-follower';
+    document.body.appendChild(follower);
+
+    let mouseX = 0, mouseY = 0;
+    let followerX = 0, followerY = 0;
+
+    document.addEventListener('mousemove', (e) => {
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+        cursor.style.left = mouseX + 'px';
+        cursor.style.top = mouseY + 'px';
+    });
+
+    function animateFollower() {
+        followerX += (mouseX - followerX) * 0.1;
+        followerY += (mouseY - followerY) * 0.1;
+        follower.style.left = followerX + 'px';
+        follower.style.top = followerY + 'px';
+        requestAnimationFrame(animateFollower);
+    }
+    animateFollower();
+
+    const hoverElements = document.querySelectorAll('a, button, .stats-card, .card, .member-card, .robo-card, .sponsors-card');
+    hoverElements.forEach(el => {
+        el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
+        el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
+    });
+}
+
+function initScrollIndicator() {
+    const indicator = document.createElement('div');
+    indicator.className = 'scroll-indicator';
+    document.body.appendChild(indicator);
+
+    lenis.on('scroll', ({ scroll, limit }) => {
+        const progress = (scroll / limit) * 100;
+        indicator.style.width = progress + '%';
+    });
+}

templates/base.html

@@ -7,7 +7,10 @@
     <title>{% block title %}FTC Robotics{% endblock %}</title>
     <!--Shared Files-->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+    <script src="{{ url_for('static', filename='js/scripts.js') }}" defer></script>
     <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.png') }}">
 </head>