Full Globe
The Globe Grid component can display a full spherical grid by using the fullGlobe prop, which shows both hemispheres with mirrored animations:
Installation
npx nyxb@latest add globe-gridUsage
import { GlobeGrid } from "~/components/ui/globe-grid"// Basic half globe
<GlobeGrid />
// Full spherical globe
<GlobeGrid fullGlobe />Props
| Prop | Type | Description | Default |
|---|---|---|---|
| fullGlobe | boolean | Whether to display a full spherical grid | false |
| className | string | Additional classes to apply to the container | - |
Customization
The component uses CSS variables for styling that can be customized:
Colors
:root {
/* Grid structure colors */
--guide-color: rgba(255, 255, 255, 0.1); /* Grid lines color */
--ds-background-200: rgba(0, 0, 0, 0.5); /* Globe background */
/* Animation line colors */
--line-color-1: hsl(54, 88%, 65%); /* Yellow animation */
--line-color-2: hsl(94, 68%, 56%); /* Green animation */
--line-color-3: hsl(39, 89%, 65%); /* Orange animation */
}Animation Details
The component features multiple animated paths with the following characteristics:
- Each path has a duration of 5.5 seconds
- Animations use radial gradients for a glowing effect
- Line animations have varying opacity transitions
- The full globe mode mirrors animations to the bottom hemisphere with 50% opacity
Examples
Custom Colors
<div className="[--line-color-1:theme(colors.blue.400)] [--line-color-2:theme(colors.purple.400)] [--line-color-3:theme(colors.pink.400)]">
<GlobeGrid />
</div>Custom Background
<div className="[--ds-background-200:rgba(0,0,0,0.7)]">
<GlobeGrid fullGlobe />
</div>