From 5061db8e0c6af8c2f9c8feafbc1bf1763bb94432 Mon Sep 17 00:00:00 2001 From: moonlightnexus <68702919+moonlightnexus@users.noreply.github.com> Date: Thu, 16 Nov 2023 17:21:20 +0000 Subject: [PATCH] modified: src/components/Globe.tsx modified: src/components/GlobeCanvas.tsx --- src/components/Globe.tsx | 354 ++++++++++++++++----------------- src/components/GlobeCanvas.tsx | 4 +- 2 files changed, 179 insertions(+), 179 deletions(-) diff --git a/src/components/Globe.tsx b/src/components/Globe.tsx index 93e9539..b4e3758 100644 --- a/src/components/Globe.tsx +++ b/src/components/Globe.tsx @@ -1,186 +1,186 @@ -import React, { useEffect, useRef } from "react"; -import createGlobe from "cobe"; -import { useSpring } from "react-spring"; -import { useInView } from "react-intersection-observer"; -import Link from "next/link"; +// import React, { useEffect, useRef } from "react"; +// import createGlobe from "cobe"; +// import { useSpring } from "react-spring"; +// import { useInView } from "react-intersection-observer"; +// import Link from "next/link"; -export function Globe() { - const canvasRef = useRef(null); - const [{ r }, api] = useSpring(() => ({ - r: 0, - config: { - mass: 1, - tension: 280, - friction: 40, - precision: 0.001, - }, - })); +// export function Globe() { +// const canvasRef = useRef(null); +// const [{ r }, api] = useSpring(() => ({ +// r: 0, +// config: { +// mass: 1, +// tension: 280, +// friction: 40, +// precision: 0.001, +// }, +// })); - const [ref, inView] = useInView({ - triggerOnce: false, - }); +// const [ref, inView] = useInView({ +// triggerOnce: false, +// }); - useEffect(() => { - let phi = 0; - let width = 0; +// useEffect(() => { +// let phi = 0; +// let width = 0; - const size = Math.min(window.innerHeight, window.innerWidth, 800); - const onResize = () => - canvasRef.current && (width = canvasRef.current.offsetWidth); +// const size = Math.min(window.innerHeight, window.innerWidth, 800); +// const onResize = () => +// canvasRef.current && (width = canvasRef.current.offsetWidth); - window.addEventListener("resize", onResize); - onResize(); +// window.addEventListener("resize", onResize); +// onResize(); - if (inView && canvasRef.current) { - const globe = createGlobe(canvasRef.current, { - devicePixelRatio: 2, - width: width * 2, - height: width, - scale: 0.9, - phi: 0, - theta: 0.2, - dark: 1.1, - offset: [2100.66, 1800.0], - diffuse: 3, - mapSamples: 16000, - mapBrightness: 1.8, - mapBaseBrightness: 0.05, - baseColor: [1.1, 1.1, 1.1], - markerColor: [251 / 255, 100 / 255, 21 / 255], - glowColor: [1.1, 1.1, 1.1], - markers: [], - opacity: 0.7, - onRender: (state) => { - // Called on every animation frame. - // `state` will be an empty object, return updated params. - state.phi = phi + r.get(); - phi += 0.005; - state.width = width * 2; - state.height = width * 2; - }, - }); +// if (inView && canvasRef.current) { +// const globe = createGlobe(canvasRef.current, { +// devicePixelRatio: 2, +// width: width * 2, +// height: width, +// scale: 0.9, +// phi: 0, +// theta: 0.2, +// dark: 1.1, +// offset: [2100.66, 1800.0], +// diffuse: 3, +// mapSamples: 16000, +// mapBrightness: 1.8, +// mapBaseBrightness: 0.05, +// baseColor: [1.1, 1.1, 1.1], +// markerColor: [251 / 255, 100 / 255, 21 / 255], +// glowColor: [1.1, 1.1, 1.1], +// markers: [], +// opacity: 0.7, +// onRender: (state) => { +// // Called on every animation frame. +// // `state` will be an empty object, return updated params. +// state.phi = phi + r.get(); +// phi += 0.005; +// state.width = width * 2; +// state.height = width * 2; +// }, +// }); - setTimeout(() => { - if (canvasRef.current) { - canvasRef.current.style.opacity = "1"; - } - }); +// setTimeout(() => { +// if (canvasRef.current) { +// canvasRef.current.style.opacity = "1"; +// } +// }); - return () => globe.destroy(); - } - }, [inView]); +// return () => globe.destroy(); +// } +// }, [inView]); - return ( -
-
-
-

- TrustAuthX
- Low-Code Auth
- Infra for the Web.{" "} -

-
- - - - -
-
-
-
- Preview of TrustAuthX app -
-
- - - -

- Low-Code Is The New
- Source Code -

-

- TrustAuthx Serverless Ai Based Authentication & Authorization{" "} -
- infrastructure, manage everything from Auth to Sessions. -

-
-
-
-
- -
-
- ); -} \ No newline at end of file +// return ( +//
+//
+//
+//

+// TrustAuthX
+// Low-Code Auth
+// Infra for the Web.{" "} +//

+//
+// +// +// +// +//
+//
+//
+//
+// Preview of TrustAuthX app +//
+//
+// +// +// +//

+// Low-Code Is The New
+// Source Code +//

+//

+// TrustAuthx Serverless Ai Based Authentication & Authorization{" "} +//
+// infrastructure, manage everything from Auth to Sessions. +//

+//
+//
+//
+//
+// +//
+//
+// ); +// } \ No newline at end of file diff --git a/src/components/GlobeCanvas.tsx b/src/components/GlobeCanvas.tsx index 28cfa64..506c369 100644 --- a/src/components/GlobeCanvas.tsx +++ b/src/components/GlobeCanvas.tsx @@ -19,6 +19,7 @@ export function GlobeCanvas({ children }: PropsWithChildren) { const [ref, inView] = useInView({ triggerOnce: false, + threshold:0.75, }); useEffect(() => { @@ -60,7 +61,6 @@ export function GlobeCanvas({ children }: PropsWithChildren) { state.height = width * 2; }, }); - setTimeout(() => { if (canvasRef.current) { canvasRef.current.style.opacity = "1"; @@ -94,7 +94,7 @@ export function GlobeCanvas({ children }: PropsWithChildren) { style={{ width: "100%", height: "100%", - // cursor: "grab", + cursor: "grab", contain: "layout paint size", opacity: 0, transition: "opacity 1s ease",