Dot Globe

2.5D4 animations

The whole globe row as one component. Pick spin, cascade, lift or tide with the animation prop; changing it cross-fades from one animation to the next, and the shared props glide instead of jumping.

dot-globe.tsx

Installation

Install with the shadcn CLI, or copy the component file. It only needs React.

npx shadcn@latest add https://your-domain.com/r/dot-globe.json

Usage

Updates live with the parameters you set.

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

export function Thinking() {
  return (
    <DotGlobe />
  );
}

Props

For the selected animation. Switch it to see the props each one takes.

Prop	Type	Default	Description
animation	"spin" \| "cascade" \| "lift" \| "tide"	"spin"	Which animation runs. Changing it blends from the old animation to the new one, and the other props default to that animation’s own values.
pattern	"rings" \| "fibonacci" \| "grid"	"rings"	How the dots are laid out on the sphere.
dotSize	number	3	Diameter of the front dots in px. Back dots scale down automatically.
density	number	12	Rows of dots. Higher means more dots.
size	number	160	Width and height of the orb in px.
duration	number	3	Seconds for one full 360° turn.
gap	number	0	Seconds to rest between turns. 0 spins continuously; above 0 each turn eases in and out.
direction	"left" \| "right"	"left"	Spin direction around the vertical axis.
tilt	number	18	Lean toward the viewer in degrees, so the top shows.
backOpacity	number	0.2	Opacity of the furthest dots. Front dots are always fully opaque.
color	string	"#e4e4e7"	Dot color.
paused	boolean	false	Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed.
label	string	"Thinking"	Accessible name; the wrapper is role="status".
className / style	—	—	Spread onto the wrapper div, along with any other div props.