diff --git a/src/components/Globe.tsx b/src/components/Globe.tsx index b4e3758..93e9539 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 506c369..28cfa64 100644 --- a/src/components/GlobeCanvas.tsx +++ b/src/components/GlobeCanvas.tsx @@ -19,7 +19,6 @@ export function GlobeCanvas({ children }: PropsWithChildren) { const [ref, inView] = useInView({ triggerOnce: false, - threshold:0.75, }); useEffect(() => { @@ -61,6 +60,7 @@ 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",