Template
Rami BitarandClaude Fable 5.1
07a99b441c
- Set up next-themes with a light/dark toggle in the header and move all sections onto theme tokens; dark mode stays pure black - Replace the hero terminal line with the AI Elements Snippet component - Restructure components into layout/, sections/, and shared/ with site-wide config in lib/site.ts Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { type COBEOptions } from 'cobe';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
import { Globe } from '@/components/ui/globe';
|
|
|
|
// Rotation per frame. Default globe is 0.005; lower is slower, 0 stops it.
|
|
const GLOBE_SPEED = 0.003;
|
|
|
|
const markers: COBEOptions['markers'] = [
|
|
{ location: [37.7749, -122.4194], size: 0.08 },
|
|
{ location: [40.7128, -74.006], size: 0.06 },
|
|
{ location: [51.5072, -0.1276], size: 0.07 },
|
|
{ location: [48.8566, 2.3522], size: 0.05 },
|
|
{ location: [1.3521, 103.8198], size: 0.08 },
|
|
{ location: [35.6762, 139.6503], size: 0.06 },
|
|
{ location: [-33.8688, 151.2093], size: 0.05 },
|
|
{ location: [-23.5505, -46.6333], size: 0.06 },
|
|
];
|
|
|
|
const darkGlobeConfig: COBEOptions = {
|
|
width: 800,
|
|
height: 800,
|
|
onRender: () => {},
|
|
devicePixelRatio: 2,
|
|
phi: 0,
|
|
theta: 0.22,
|
|
dark: 1,
|
|
diffuse: 1.2,
|
|
mapSamples: 20000,
|
|
mapBrightness: 5,
|
|
baseColor: [0.22, 0.22, 0.22],
|
|
markerColor: [1, 1, 1],
|
|
glowColor: [0.1, 0.1, 0.1],
|
|
markers,
|
|
};
|
|
|
|
const lightGlobeConfig: COBEOptions = {
|
|
...darkGlobeConfig,
|
|
dark: 0,
|
|
diffuse: 0.4,
|
|
mapBrightness: 1.2,
|
|
baseColor: [0.88, 0.88, 0.88],
|
|
markerColor: [0.1, 0.1, 0.1],
|
|
glowColor: [0.96, 0.96, 0.96],
|
|
};
|
|
|
|
export function StatsGlobe() {
|
|
const { resolvedTheme } = useTheme();
|
|
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 overflow-hidden [mask-image:radial-gradient(ellipse_80%_110%_at_50%_90%,black_45%,transparent_100%)]"
|
|
>
|
|
<div className="absolute left-1/2 top-[6%] aspect-square w-[760px] -translate-x-1/2 opacity-90 sm:w-[1040px] lg:w-[1280px]">
|
|
<Globe
|
|
className="max-w-none"
|
|
config={resolvedTheme === 'light' ? lightGlobeConfig : darkGlobeConfig}
|
|
speed={GLOBE_SPEED}
|
|
/>
|
|
</div>
|
|
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-t from-background/80 to-transparent" />
|
|
</div>
|
|
);
|
|
}
|