Dot Lift

2.5D

The orb holds still while each ring of dots pushes straight outward and settles back into place, one after another from top to bottom. Dots never rotate or change height; on the spiral the wave becomes a diagonal stripe that follows the spiral arms down the sphere.

dot-lift.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-lift.json

Usage

Updates live with the parameters you set.

import { DotLift } from "@/components/dot-lift";

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

Props

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.
lift	number	0.16	How far each ring pushes outward before settling back, as a fraction of the orb's radius.
duration	number	0.5	Seconds each ring takes to push out and settle back into place.
stagger	number	0.14	Seconds between one ring starting and the next one along.
gap	number	0.5	Seconds the orb rests after the last ring settles, before the next wave.
from	"top" \| "bottom"	"top"	Which end of the orb the wave starts from.
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.