feat: enhance globe component with interactive controls and global markers
This commit is contained in:
@@ -6,7 +6,7 @@ import { SectionHeader } from '@/components/Texts'
|
||||
interface CountUpNumberProps {
|
||||
end: number
|
||||
className?: string
|
||||
color?: 'light' | 'primary' | 'secondary'
|
||||
color?: 'light' | 'primary' | 'secondary' | 'white'
|
||||
}
|
||||
|
||||
export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
|
||||
|
||||
@@ -1,47 +1,159 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import createGlobe from 'cobe'
|
||||
"use client";
|
||||
|
||||
export function Globe({ className }: { className?: string }) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
import createGlobe, { type COBEOptions } from "cobe";
|
||||
import { useMotionValue, useSpring } from "motion/react";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const MOVEMENT_DAMPING = 1400;
|
||||
|
||||
const GLOBE_CONFIG: COBEOptions = {
|
||||
width: 800,
|
||||
height: 800,
|
||||
onRender: () => {},
|
||||
devicePixelRatio: 2,
|
||||
phi: 0,
|
||||
theta: 0.3,
|
||||
dark: 0,
|
||||
diffuse: 0.25, // softer shading for premium look
|
||||
mapSamples: 16000,
|
||||
mapBrightness: 1.1,
|
||||
baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
|
||||
markerColor: [0.02, 0.71, 0.83], // cyan-500
|
||||
glowColor: [0.8, 0.8, 0.85], // grey
|
||||
|
||||
markers: [
|
||||
// --- Core Global Markers ---
|
||||
{ location: [14.5995, 120.9842], size: 0.03 }, // Manila
|
||||
{ location: [19.076, 72.8777], size: 0.1 }, // Mumbai
|
||||
{ location: [23.8103, 90.4125], size: 0.05 }, // Dhaka
|
||||
{ location: [30.0444, 31.2357], size: 0.07 }, // Cairo
|
||||
{ location: [39.9042, 116.4074], size: 0.08 }, // Beijing
|
||||
{ location: [-23.5505, -46.6333], size: 0.1 }, // São Paulo
|
||||
{ location: [19.4326, -99.1332], size: 0.1 }, // Mexico City
|
||||
{ location: [40.7128, -74.006], size: 0.1 }, // New York
|
||||
{ location: [34.6937, 135.5022], size: 0.05 }, // Osaka
|
||||
{ location: [41.0082, 28.9784], size: 0.06 }, // Istanbul
|
||||
{ location: [48.8566, 2.3522], size: 0.08 }, // Paris
|
||||
{ location: [51.5072, -0.1276], size: 0.08 }, // London
|
||||
{ location: [52.52, 13.405], size: 0.07 }, // Berlin
|
||||
{ location: [35.6895, 139.6917], size: 0.06 }, // Tokyo
|
||||
{ location: [-33.8688, 151.2093], size: 0.06 }, // Sydney
|
||||
{ location: [-1.2921, 36.8219], size: 0.05 }, // Nairobi
|
||||
{ location: [-34.6037, -58.3816], size: 0.07 }, // Buenos Aires
|
||||
{ location: [37.7749, -122.4194], size: 0.08 }, // San Francisco
|
||||
{ location: [1.3521, 103.8198], size: 0.06 }, // Singapore
|
||||
{ location: [28.6139, 77.2090], size: 0.08 }, // New Delhi
|
||||
{ location: [13.7563, 100.5018], size: 0.06 }, // Bangkok
|
||||
{ location: [59.9343, 30.3351], size: 0.05 }, // St. Petersburg
|
||||
{ location: [33.6844, 73.0479], size: 0.05 }, // Islamabad
|
||||
{ location: [25.276987, 55.296249], size: 0.07 }, // Dubai
|
||||
{ location: [60.1699, 24.9384], size: 0.05 }, // Helsinki
|
||||
{ location: [43.6532, -79.3832], size: 0.07 }, // Toronto
|
||||
{ location: [6.5244, 3.3792], size: 0.08 }, // Lagos
|
||||
{ location: [50.1109, 8.6821], size: 0.06 }, // Frankfurt
|
||||
|
||||
// --- 12 New US + European Cities ---
|
||||
{ location: [34.0522, -118.2437], size: 0.08 }, // Los Angeles
|
||||
{ location: [41.8781, -87.6298], size: 0.07 }, // Chicago
|
||||
{ location: [29.7604, -95.3698], size: 0.07 }, // Houston
|
||||
{ location: [25.7617, -80.1918], size: 0.07 }, // Miami
|
||||
{ location: [45.5017, -73.5673], size: 0.06 }, // Montreal
|
||||
{ location: [47.6062, -122.3321], size: 0.06 }, // Seattle
|
||||
{ location: [40.4406, -79.9959], size: 0.05 }, // Pittsburgh
|
||||
{ location: [41.3851, 2.1734], size: 0.06 }, // Barcelona
|
||||
{ location: [45.4642, 9.19], size: 0.06 }, // Milan
|
||||
{ location: [52.3676, 4.9041], size: 0.06 }, // Amsterdam
|
||||
{ location: [38.7169, -9.139], size: 0.05 }, // Lisbon
|
||||
{ location: [59.3293, 18.0686], size: 0.05 }, // Stockholmx
|
||||
],
|
||||
};
|
||||
|
||||
export function Globe({
|
||||
className,
|
||||
config = GLOBE_CONFIG,
|
||||
}: {
|
||||
className?: string;
|
||||
config?: COBEOptions;
|
||||
}) {
|
||||
let phi = 0;
|
||||
let width = 0;
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const pointerInteracting = useRef<number | null>(null);
|
||||
|
||||
const r = useMotionValue(0);
|
||||
const rs = useSpring(r, {
|
||||
mass: 1,
|
||||
damping: 35, // slightly smoother motion
|
||||
stiffness: 100,
|
||||
});
|
||||
|
||||
const updatePointerInteraction = (value: number | null) => {
|
||||
pointerInteracting.current = value;
|
||||
if (canvasRef.current) {
|
||||
canvasRef.current.style.cursor = value !== null ? "grabbing" : "grab";
|
||||
}
|
||||
};
|
||||
|
||||
const updateMovement = (clientX: number) => {
|
||||
if (pointerInteracting.current !== null) {
|
||||
const delta = clientX - pointerInteracting.current;
|
||||
r.set(r.get() + delta / MOVEMENT_DAMPING);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let phi = 0
|
||||
const onResize = () => {
|
||||
if (canvasRef.current) width = canvasRef.current.offsetWidth;
|
||||
};
|
||||
|
||||
if (!canvasRef.current) return
|
||||
window.addEventListener("resize", onResize);
|
||||
onResize();
|
||||
|
||||
const globe = createGlobe(canvasRef.current, {
|
||||
devicePixelRatio: 2,
|
||||
width: 600 * 2,
|
||||
height: 600 * 2,
|
||||
phi: 0,
|
||||
theta: 0,
|
||||
dark: 0,
|
||||
diffuse: 1.2,
|
||||
mapSamples: 16000,
|
||||
mapBrightness: 6,
|
||||
baseColor: [0.3, 0.3, 0.3],
|
||||
markerColor: [0.1, 0.8, 1],
|
||||
glowColor: [1, 1, 1],
|
||||
markers: [
|
||||
{ location: [37.7595, -122.4367], size: 0.03 },
|
||||
{ location: [40.7128, -74.006], size: 0.1 },
|
||||
],
|
||||
const globe = createGlobe(canvasRef.current!, {
|
||||
...config,
|
||||
width: width * 2,
|
||||
height: width * 2,
|
||||
onRender: (state) => {
|
||||
state.phi = phi
|
||||
phi += 0.01
|
||||
if (!pointerInteracting.current) phi += 0.004; // slightly slower rotation for elegance
|
||||
state.phi = phi + rs.get();
|
||||
state.width = width * 2;
|
||||
state.height = width * 2;
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0);
|
||||
return () => {
|
||||
globe.destroy()
|
||||
}
|
||||
}, [])
|
||||
globe.destroy();
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [rs, config]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
// Radial gradient background that fades to pure black at edges
|
||||
"absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px] rounded-full",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<canvas
|
||||
className={cn(
|
||||
"size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
|
||||
)}
|
||||
ref={canvasRef}
|
||||
className={className}
|
||||
style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
|
||||
/>
|
||||
)
|
||||
onPointerDown={(e) => {
|
||||
pointerInteracting.current = e.clientX;
|
||||
updatePointerInteraction(e.clientX);
|
||||
}}
|
||||
onPointerUp={() => updatePointerInteraction(null)}
|
||||
onPointerOut={() => updatePointerInteraction(null)}
|
||||
onMouseMove={(e) => updateMovement(e.clientX)}
|
||||
onTouchMove={(e) =>
|
||||
e.touches[0] && updateMovement(e.touches[0].clientX)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -32,24 +32,11 @@ export function HomeFeatures() {
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="relative bg-transparent py-24 overflow-hidden">
|
||||
{/* --- Soft background gradients --- */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 -top-16 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
|
||||
}}
|
||||
className="aspect-1318/752 w-329.5 flex-none bg-linear-to-r from-[#9fd6fc] to-[#c6c4fa] opacity-40"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative bg-transparent pb-24 Pt-0 overflow-hidden">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<H2 className="">
|
||||
The Building Blocks of <span className="font-medium text-7xl italic">Decentralized Future</span>
|
||||
The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
|
||||
</H2>
|
||||
<P className="mt-6 ">
|
||||
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
|
||||
@@ -65,7 +52,6 @@ export function HomeFeatures() {
|
||||
<h3 className="mt-6 text-xl font-semibold text-black">{feature.name}</h3>
|
||||
<p className="mt-4 text-base text-gray-800">{feature.description}</p>
|
||||
<a href={feature.href} className="mt-6 text-base font-semibold text-black">Learn more <span aria-hidden="true"> →</span></a>
|
||||
<div className="absolute -bottom-10 -right-10 h-50 w-50 -z-10" style={{ background: 'radial-gradient(circle, rgba(173, 239, 255, 0.6) 0%, rgba(115, 207, 255, 0.4) 100%)', filter: 'blur(80px)' }}></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
60
src/pages/home/HomeFeaturesDark.tsx
Normal file
60
src/pages/home/HomeFeaturesDark.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { GlobeAltIcon, ServerStackIcon, CpuChipIcon } from '@heroicons/react/24/solid'
|
||||
import { H2, P } from '@/components/Texts'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Mycelium Network',
|
||||
description:
|
||||
"A global, end-to-end encrypted overlay that simply doesn't break.",
|
||||
href: '/network',
|
||||
icon: GlobeAltIcon,
|
||||
},
|
||||
{
|
||||
name: 'Mycelium Cloud',
|
||||
description:
|
||||
'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
|
||||
href: '/cloud',
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
{
|
||||
name: 'Mycelium Agents',
|
||||
description:
|
||||
'Your sovereign agent with private memory and permissioned data access—always under your control.',
|
||||
href: '/agents',
|
||||
icon: CpuChipIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function HomeFeaturesDark() {
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="relative bg-black py-24 overflow-hidden">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<H2 className="text-white">
|
||||
The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
|
||||
</H2>
|
||||
<P className="mt-6 text-gray-300">
|
||||
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
|
||||
<div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-700 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-lg hover:shadow-xl hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
|
||||
<div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
|
||||
<feature.icon className="h-12 w-12 text-cyan-500" />
|
||||
</div>
|
||||
<h3 className="mt-6 text-xl font-semibold text-white">{feature.name}</h3>
|
||||
<p className="mt-4 text-base text-gray-300">{feature.description}</p>
|
||||
<a href={feature.href} className="mt-6 text-base font-semibold text-white">Learn more <span aria-hidden="true"> →</span></a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
117
src/pages/home/HomeGlobe.tsx
Normal file
117
src/pages/home/HomeGlobe.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
'use client'
|
||||
|
||||
import { Globe } from "@/components/ui/Globe"
|
||||
import { motion } from "framer-motion"
|
||||
import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
|
||||
import { CountUpNumber } from '@/components/CountUpNumber'
|
||||
|
||||
export function WorldMap() {
|
||||
return (
|
||||
<div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
|
||||
{/* Background video */}
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
>
|
||||
<source src="/videos/benefits.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{/* Dark overlay */}
|
||||
<div className="absolute inset-0 bg-black/10" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
|
||||
{/* Title + Subtitle */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-xl"
|
||||
>
|
||||
<Eyebrow color="accent">Network</Eyebrow>
|
||||
<SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
|
||||
<P className=" mt-4 text-base leading-relaxed" color="light">
|
||||
Mycelium Cloud's advancement technology enables anyone to deploy
|
||||
their own Internet infrastructure, anywhere.
|
||||
</P>
|
||||
</motion.div>
|
||||
|
||||
{/* Bottom Layout: Globe + Cards */}
|
||||
<div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
|
||||
{/* Globe Left Column */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="flex-1 flex items-center justify-center"
|
||||
>
|
||||
<div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
|
||||
<Globe className="absolute inset-0 w-full h-full left-0 lg:-left-24" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Cards Right Column */}
|
||||
<div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
|
||||
<div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
|
||||
<CP color="light" className="mt-2 text-sm">
|
||||
Total Central Processing Unit Cores available on the grid.
|
||||
</CP>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
|
||||
<div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
|
||||
<CP color="light" className="mt-2 text-sm">
|
||||
Total number of nodes on the grid.
|
||||
</CP>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
|
||||
<div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
|
||||
<CP color="light" className="mt-2 text-sm">
|
||||
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
|
||||
</CP>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.7 }}
|
||||
className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
|
||||
<div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
|
||||
<CP color="light" className="mt-2 text-sm">
|
||||
Total number of countries with active nodes.
|
||||
</CP>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Radial fade overlay */}
|
||||
<div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { HomeAurora } from './HomeAurora'
|
||||
import { HomeMapSection } from './HomeMap'
|
||||
import { HomeFeatures } from './HomeFeatures'
|
||||
import { HomeFeaturesDark } from './HomeFeaturesDark'
|
||||
import { HomeCloud } from './HomeCloud'
|
||||
import { HomeAgent } from './HomeAgent'
|
||||
import { StackSectionLight } from './StackSection'
|
||||
import { WorldMap } from './HomeGlobe'
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
@@ -14,12 +15,17 @@ export default function HomePage() {
|
||||
<HomeAurora />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection id="next-section">
|
||||
<WorldMap />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StackSectionLight />
|
||||
</AnimatedSection>
|
||||
|
||||
|
||||
<AnimatedSection>
|
||||
<HomeFeatures />
|
||||
<HomeFeaturesDark />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
|
||||
Reference in New Issue
Block a user