frontend/nextjs-saas
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add oversized globe background to stats section

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-09-17 23:24:13 -04:00
co-authored by Claude Fable 5.1
parent bea4c4a1b9
commit a40edbffa9
6 changed files with 268 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.json
+3 -1
View File
@@ -21,5 +21,7 @@
},
"menuColor": "default",
"menuAccent": "subtle",
"registries": {}
"registries": {
"@magicui": "https://magicui.design/r/{name}"
}
}
components/site/stats-globe.tsx
+48
View File
@@ -0,0 +1,48 @@
'use client';
import { type COBEOptions } from 'cobe';
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 globeConfig: 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: [
{ 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 },
],
};
export function StatsGlobe() {
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={globeConfig} speed={GLOBE_SPEED} />
</div>
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-t from-black/80 to-transparent" />
</div>
);
}
components/site/stats.tsx
+9 -3
View File
@@ -1,3 +1,5 @@
import { StatsGlobe } from '@/components/site/stats-globe';
const stats = [
{ value: '45ms', label: 'Median edge response, worldwide' },
{ value: '99.99%', label: 'Platform uptime over the last year' },
@@ -7,10 +9,14 @@ const stats = [
export function Stats() {
return (
<section className="border-y border-white/10 bg-black">
<div className="mx-auto grid max-w-6xl grid-cols-2 gap-px overflow-hidden bg-white/10 lg:grid-cols-4">
<section className="relative overflow-hidden border-y border-white/10 bg-black py-16 sm:py-24">
<StatsGlobe />
<div className="relative z-10 mx-auto grid max-w-6xl grid-cols-2 gap-px lg:grid-cols-4">
{stats.map((stat) => (
<div key={stat.label} className="bg-black px-6 py-12 text-center">
<div
key={stat.label}
className="px-6 py-12 text-center ring-1 ring-white/10"
>
<div className="text-4xl font-semibold tracking-tight sm:text-5xl">
{stat.value}
</div>
components/ui/globe.tsx
+135
View File
@@ -0,0 +1,135 @@
"use client"
import { useEffect, useRef } from "react"
import createGlobe, { type COBEOptions } from "cobe"
import { useMotionValue, useSpring } from "motion/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.4,
mapSamples: 16000,
mapBrightness: 1.2,
baseColor: [1, 1, 1],
markerColor: [251 / 255, 100 / 255, 21 / 255],
glowColor: [1, 1, 1],
markers: [
{ location: [14.5995, 120.9842], size: 0.03 },
{ location: [19.076, 72.8777], size: 0.1 },
{ location: [23.8103, 90.4125], size: 0.05 },
{ location: [30.0444, 31.2357], size: 0.07 },
{ location: [39.9042, 116.4074], size: 0.08 },
{ location: [-23.5505, -46.6333], size: 0.1 },
{ location: [19.4326, -99.1332], size: 0.1 },
{ location: [40.7128, -74.006], size: 0.1 },
{ location: [34.6937, 135.5022], size: 0.05 },
{ location: [41.0082, 28.9784], size: 0.06 },
],
}
export function Globe({
className,
config = GLOBE_CONFIG,
speed = 0.005,
}: {
className?: string
config?: COBEOptions
/**
* Radians added to the rotation on every frame. Higher spins faster,
* 0 stops the auto-rotation (dragging still works).
* @default 0.005
*/
speed?: number
}) {
const canvasRef = useRef<HTMLCanvasElement>(null)
const phiRef = useRef(0)
const widthRef = useRef(0)
const pointerInteracting = useRef<number | null>(null)
const pointerInteractionMovement = useRef(0)
const r = useMotionValue(0)
const rs = useSpring(r, {
mass: 1,
damping: 30,
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
pointerInteractionMovement.current = delta
r.set(r.get() + delta / MOVEMENT_DAMPING)
}
}
useEffect(() => {
const onResize = () => {
if (canvasRef.current) {
widthRef.current = canvasRef.current.offsetWidth
}
}
window.addEventListener("resize", onResize)
onResize()
const globe = createGlobe(canvasRef.current!, {
...config,
width: widthRef.current * 2,
height: widthRef.current * 2,
onRender: (state) => {
if (!pointerInteracting.current) phiRef.current += speed
state.phi = phiRef.current + rs.get()
state.width = widthRef.current * 2
state.height = widthRef.current * 2
},
})
setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0)
return () => {
globe.destroy()
window.removeEventListener("resize", onResize)
}
}, [rs, config, speed])
return (
<div
className={cn(
"absolute inset-0 mx-auto aspect-square w-full max-w-150",
className
)}
>
<canvas
className={cn(
"size-full opacity-0 transition-opacity duration-500 contain-[layout_paint_size]"
)}
ref={canvasRef}
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>
)
}
package.json
+2
View File
@@ -16,10 +16,12 @@
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"cobe": "^0.6.4",
"date-fns": "^4.4.0",
"embla-carousel-react": "^8.6.0",
"input-otp": "^1.4.2",
"lucide-react": "^1.22.0",
"motion": "^13.3.0",
"next": "16.2.10",
"next-themes": "^0.4.6",
"radix-ui": "^1.6.0",
yarn.lock
+71
View File
@@ -3484,6 +3484,15 @@ __metadata:
languageName: node
linkType: hard
"cobe@npm:^0.6.4":
version: 0.6.5
resolution: "cobe@npm:0.6.5"
dependencies:
phenomenon: "npm:^1.6.0"
checksum: 10c0/a5f28f3c0eac6222769278eda6d1a367978276135c8ed9dbe10f6c4ff56d7fcd762a93f474ac1b0fbfd2b0aa40c783f3790ee832d14649609f63c2e7a0f707b1
languageName: node
linkType: hard
"code-block-writer@npm:^13.0.3":
version: 13.0.3
resolution: "code-block-writer@npm:13.0.3"
@@ -4714,6 +4723,25 @@ __metadata:
languageName: node
linkType: hard
"framer-motion@npm:^13.4.0":
version: 13.4.0
resolution: "framer-motion@npm:13.4.0"
dependencies:
motion-dom: "npm:^13.3.0"
motion-utils: "npm:^13.3.0"
tslib: "npm:^2.4.0"
peerDependencies:
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
checksum: 10c0/1cba0f674c0a3893c7803876a54fa2c2c66a1a06665668cc8145909478cc6d78944c85a8eb9bdc169c61b3163cc597a2c0ebd0bcc37c2e3410e5960950b5d40b
languageName: node
linkType: hard
"fresh@npm:^2.0.0":
version: 2.0.0
resolution: "fresh@npm:2.0.0"
@@ -6029,6 +6057,40 @@ __metadata:
languageName: node
linkType: hard
"motion-dom@npm:^13.3.0":
version: 13.3.0
resolution: "motion-dom@npm:13.3.0"
dependencies:
motion-utils: "npm:^13.3.0"
checksum: 10c0/b59ee63a4a487abb571159853d9bb47c02740d9707f01b91440b2d157af26cde16db5ebf29d1b5e19aabccc9dcb9ec763e9bbf931fdf25beae2af3e4d0f9652d
languageName: node
linkType: hard
"motion-utils@npm:^13.3.0":
version: 13.3.0
resolution: "motion-utils@npm:13.3.0"
checksum: 10c0/9efb8388cc43501d1d6d1f2997fdd3a9e4c2bd42c57c3979586fdbcc83969a3b9aae7e3108cfb53312db0a46d945ad1b4d54ad388a6585f2eb5f5e742a58d927
languageName: node
linkType: hard
"motion@npm:^13.3.0":
version: 13.4.0
resolution: "motion@npm:13.4.0"
dependencies:
framer-motion: "npm:^13.4.0"
tslib: "npm:^2.4.0"
peerDependencies:
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
checksum: 10c0/d2fe0daa87ef102b11ae95b7c798e592a912058c8c5c64c2960b7dcf215261a0c4f696fa4cfb2656f357a4d4cf5fd864a0cc99964ba781c8daa10a22a1132304
languageName: node
linkType: hard
"ms@npm:^2.1.1, ms@npm:^2.1.3":
version: 2.1.3
resolution: "ms@npm:2.1.3"
@@ -6155,12 +6217,14 @@ __metadata:
class-variance-authority: "npm:^0.7.1"
clsx: "npm:^2.1.1"
cmdk: "npm:^1.1.1"
cobe: "npm:^0.6.4"
date-fns: "npm:^4.4.0"
embla-carousel-react: "npm:^8.6.0"
eslint: "npm:^9"
eslint-config-next: "npm:16.2.9"
input-otp: "npm:^1.4.2"
lucide-react: "npm:^1.22.0"
motion: "npm:^13.3.0"
next: "npm:16.2.10"
next-themes: "npm:^0.4.6"
radix-ui: "npm:^1.6.0"
@@ -6536,6 +6600,13 @@ __metadata:
languageName: node
linkType: hard
"phenomenon@npm:^1.6.0":
version: 1.6.0
resolution: "phenomenon@npm:1.6.0"
checksum: 10c0/32216a8861e69ab1d96c8fa96217769073f446173f3135fbe369ea61f0959c453347004b5aefb22ba18f725273e7c57ce2d2a29c4db6ac431a2839b7bacf9778
languageName: node
linkType: hard
"picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
version: 1.1.1
resolution: "picocolors@npm:1.1.1"