Dot Globe

A rotating sphere of a thousand dots projected onto Canvas 2D. Adjust its color and rotation speed through props. No rendering dependencies required.

Canvas 2Dperspectivepoint sphere

Live

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/dot-globe.json

Installs 1 files into components/shaders. Uses the native Canvas 2D API; no extra dependencies.

Usage

Mount it behind your content

app/hero.tsx

import { DotGlobe } from "@/components/shaders/dot-globe/dot-globe";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <DotGlobe className="-z-10" color="#ffffff" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else.

API reference

Props

Prop	Type	Default	Description
paused	boolean	false	Pauses animation. Reduced motion is respected automatically.
className	string	—	Canvas classes.
style	CSSProperties	—	Inline canvas styles.
color	string	"#000000"	Dot fill color.
speed	number	1	Rotation speed multiplier.

Keep exploring

More shaders

01

Smoke

Electric smoke that ripples under your cursor.

fbm warpripplespring cursor

07

Moon Terrain

A turquoise moon above rolling terrain and wandering lights.

3D terrainmoonlightsimplex noise