Dot Rise: a loader for upload and download

A dot sphere where rows rise and fade off the top. A React loader for an AI agent uploading or downloading files. Install with shadcn.

Installation

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

npx shadcn@latest add https://oxyn.space/r/dot-rise.json

Updates live with the parameters you set.

import { DotRise } from "@/components/dot-rise";

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

Prop	Type	Default	Description
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.
direction	"up"\|"down"	"up"	Up for an upload: the wave pushes outward on its way up. Down for a download: it pulls inward on its way down.
lift	number	0.16	Up: how far the wave pushes the dots outward, as a fraction of the orb's radius.
depth	number	0.2	Down: how far the wave pulls the dots in toward the vertical axis, as a fraction of the orb's radius.
width	number	3.5	How many rows the wave moves at once.
duration	number	1.4	Seconds for the wave to travel from one pole to the other.
gap	number	0.4	Seconds the orb rests after the wave leaves, before the next one.
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.

Dot Rise is one of the animations in Dot Globe. Use the group when the agent's state changes, and it morphs between them.