Sphere Background for React

A huge dotted globe rises from the bottom of the box like a planet seen from orbit, and turns slowly under your content. You look down on its pole, so its rings of dots curve along the horizon and crowd together toward the rim, getting smaller and fainter as the surface turns away, and a soft band of atmosphere glows along the edge and thins into the sky. Faint lines mark latitude and longitude. A canvas draws the globe once, when it changes size or colour, and a single CSS rotation turns it, so nothing runs while it moves.

Use it under a hero's headline on a launch page, or behind a global, network or infrastructure product. For a wireframe figure turning through four dimensions use Tesseract; for elliptical orbits with bodies gliding along them, Orbits; for the same dots flat and still, Dot Pattern.

Installation

Usage

import { Sphere } from "@/components/ui/sphere";

<Sphere className="flex min-h-[480px] flex-col items-center pt-24">
  <h1 className="text-4xl font-semibold">One network, every region</h1>
</Sphere>

Sphere is a container: whatever you put inside sits on top, in normal flow. The globe's top edge sits at 45% of the box's height (horizon), so the upper half stays clear for your copy; its radius follows the box's width, so at any shape it reads as a horizon rather than a ball. There's no painted panel: your page's background shows through, the dots take your text colour and the atmosphere a soft sky blue. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Color

color sets the dots and grid lines and glowColor the atmosphere, here pale dots under a violet glow on a dark section.

Dense

In a card, horizon={0.3} raises the globe, spacing={9} packs the dots closer and speed={0.5} turns it every eight minutes.

Accessibility

The globe is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. With reduced motion it stops turning and stays whole, a still horizon. Nothing flashes. The upper half of the box is open sky with only a faint haze, so a headline there keeps your foreground colour's full contrast; over the globe itself the dots are small and faint, but text across the bright rim reads best in your foreground colour, not a muted one.

FAQ

API Reference