-
-
+
);
}
diff --git a/src/components/customCursor/customCursor.tsx b/src/components/customCursor/customCursor.tsx
index bb8c069..93da07b 100644
--- a/src/components/customCursor/customCursor.tsx
+++ b/src/components/customCursor/customCursor.tsx
@@ -1,61 +1,71 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
import gsap from 'gsap';
const CustomCursor = () => {
useEffect(() => {
- // CursorFollow logic
- const moveCursor = (e: MouseEvent) => {
+ // Cursor follow logic
+ const moveCursor = (e: any) => {
gsap.to('.cursorFollower', {
- x: e.clientX - 6,
- y: e.clientY - 6,
- duration: 1.5,
- ease: 'power4.out',
+ x: e.clientX - 16,
+ y: e.clientY - 16,
+ duration: 0.8,
+ ease: 'power2.out',
});
gsap.to('.cursor', {
- x: e.clientX - 4,
- y: e.clientY - 4,
- duration: 0.5,
- ease: 'power4.out',
+ x: e.clientX - 8,
+ y: e.clientY - 8,
+ duration: 0.3,
+ ease: 'power2.out',
});
};
- document.addEventListener('mousemove', moveCursor);
+ // Hover logic for arrow
+ const arrowLink = document.querySelector('.group');
- // Hover logic
const mouseEnter = () => {
- gsap.set('.cursor', { display: 'none' });
+ gsap.to('.cursor', {
+ opacity: 0,
+ duration: 0.3,
+ });
gsap.to('.cursorFollower', {
scale: 2,
+ duration: 0.3,
});
};
const mouseLeave = () => {
- gsap.set('.cursor', { display: 'block' });
+ gsap.to('.cursor', {
+ opacity: 1,
+ duration: 0.3,
+ });
gsap.to('.cursorFollower', {
scale: 1,
+ duration: 0.3,
});
};
- document.querySelectorAll('.hovering').forEach((el) => {
- el.addEventListener('mouseenter', mouseEnter);
- el.addEventListener('mouseleave', mouseLeave);
- });
+ document.addEventListener('mousemove', moveCursor);
+
+ if (arrowLink) {
+ arrowLink.addEventListener('mouseenter', mouseEnter);
+ arrowLink.addEventListener('mouseleave', mouseLeave);
+ }
return () => {
document.removeEventListener('mousemove', moveCursor);
- document.querySelectorAll('.hovering').forEach((el) => {
- el.removeEventListener('mouseenter', mouseEnter);
- el.removeEventListener('mouseleave', mouseLeave);
- });
+ if (arrowLink) {
+ arrowLink.removeEventListener('mouseenter', mouseEnter);
+ arrowLink.removeEventListener('mouseleave', mouseLeave);
+ }
};
}, []);
return (
<>
-
-
+
-
+
);
};
diff --git a/src/components/scene/aeriusLogoScene.tsx b/src/components/scene/aeriusLogoScene.tsx
index 113c37b..0fc347b 100644
--- a/src/components/scene/aeriusLogoScene.tsx
+++ b/src/components/scene/aeriusLogoScene.tsx
@@ -1,9 +1,9 @@
import { Canvas } from '@react-three/fiber';
-import { Environment } from '@react-three/drei';
+import { Environment, Lightformer } from '@react-three/drei';
import AeriusLogoModel from '../3dModel/aeriusLogo';
import AdjustCamera from '@/helpers/handleCameraFOV';
-export default function AstronautScene() {
+export default function AeriusScene() {
return (
diff --git a/src/components/scene/astronautScene.tsx b/src/components/scene/astronautScene.tsx
index bf72a9f..01351b5 100644
--- a/src/components/scene/astronautScene.tsx
+++ b/src/components/scene/astronautScene.tsx
@@ -1,4 +1,4 @@
-import { Canvas } from '@react-three/fiber';
+import { Canvas, useLoader } from '@react-three/fiber';
import { Environment } from '@react-three/drei';
import AstronautModel from '../3dModel/astronaut';
import AdjustCamera from '@/helpers/handleCameraFOV';
@@ -17,22 +17,36 @@ export default function AstronautScene() {
scale: -1,
}}
>
-
-
+
+
+
+
-
-
diff --git a/src/components/scene/satelliteScene.tsx b/src/components/scene/satelliteScene.tsx
index 867770e..4a68c5e 100644
--- a/src/components/scene/satelliteScene.tsx
+++ b/src/components/scene/satelliteScene.tsx
@@ -18,20 +18,20 @@ export default function SatelliteScene() {
}}
>
+
-
diff --git a/src/components/section/aboutUsSection.tsx b/src/components/section/aboutUsSection.tsx
index cfc9367..96bacc3 100644
--- a/src/components/section/aboutUsSection.tsx
+++ b/src/components/section/aboutUsSection.tsx
@@ -1,38 +1,91 @@
import Image from 'next/image';
import dynamic from 'next/dynamic';
import { Akzidenzgroteskbe, IBMPlexMono } from '@/fonts/fonts';
+import { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
const Scene = dynamic(() => import('@/components/scene/astronautScene'), {
ssr: false,
});
export default function AboutUsSection() {
+ const topLineRef = useRef(null);
+
+ useEffect(() => {
+ gsap.registerPlugin(ScrollTrigger);
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting && entry.intersectionRatio >= 0.9) {
+ gsap.to(entry.target, {
+ opacity: 1,
+ y: 0,
+ duration: 1,
+ ease: 'power2.out',
+ scrollTrigger: {
+ trigger: entry.target,
+ start: 'top 5%',
+ end: 'bottom 100%',
+ scrub: true,
+ },
+ });
+ }
+ });
+ },
+ {
+ rootMargin: '0px',
+ threshold: 0.9,
+ }
+ );
+
+ if (topLineRef.current) {
+ gsap.set(topLineRef.current, {
+ opacity: 0,
+ y: 50,
+ });
+
+ observer.observe(topLineRef.current);
+ }
+
+ return () => {
+ if (topLineRef.current) {
+ observer.unobserve(topLineRef.current);
+ }
+ };
+ }, []);
+
return (
{/* Astronaut Scene */}
{/* Top line */}
-
-
+
+
{/* Content */}
-
-
-
+
+
+
FUTURE OF{' '}
@@ -40,7 +93,7 @@ export default function AboutUsSection() {
Aerius Labs is where cryptography, blockchain, and zero-knowledge
@@ -60,7 +113,7 @@ export default function AboutUsSection() {
{/* Bottom line */}
-
+
+
);
}
diff --git a/src/components/section/aeriusLogoSection.tsx b/src/components/section/aeriusLogoSection.tsx
index 3e21772..0ec864c 100644
--- a/src/components/section/aeriusLogoSection.tsx
+++ b/src/components/section/aeriusLogoSection.tsx
@@ -1,15 +1,54 @@
import dynamic from 'next/dynamic';
+import { useEffect } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
const Scene = dynamic(() => import('@/components/scene/aeriusLogoScene'), {
ssr: false,
});
+gsap.registerPlugin(ScrollTrigger);
+
export default function AeriusLogoSection() {
+ useEffect(() => {
+ const logoContainer = document.getElementById('logoContainer');
+
+ if (logoContainer) {
+ gsap.fromTo(
+ logoContainer,
+ { opacity: 0 },
+ {
+ opacity: 1,
+ scrollTrigger: {
+ trigger: '#logoSection',
+ start: 'top center',
+ end: 'top top',
+ scrub: true,
+ },
+ }
+ );
+ }
+
+ return () => ScrollTrigger.getAll().forEach((t) => t.kill());
+ }, []);
+
return (
-
-
+
);
}
diff --git a/src/components/section/footerSection.tsx b/src/components/section/footerSection.tsx
index f8a610c..c93736c 100644
--- a/src/components/section/footerSection.tsx
+++ b/src/components/section/footerSection.tsx
@@ -5,9 +5,9 @@ import { IBMPlexMono, FKScreamerBlack } from '@/fonts/fonts';
export default function FooterSection() {
return (
-