KQ-142 · LITTLE/PLANET
Little Planet
Sections wrapped around a tiny planet's rim — spin the planet and each curves up to the top slot, growing to full size as it surfaces while the far side tucks behind the horizon; release snaps the nearest section home.
KQ-142 · LITTLE/PLANET
WORLD TOUR · 06 STOPS
KQ-142
SURFACE · HARBOR
HARBOR at the surfaceAT THE TOP · HARBOR
Spin the planet - each stop curves up to the top.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/little-planet
Props
- sections
- PlanetSection[]
- default —
- Sections spaced evenly around the planet rim.
- value / defaultValue
- string
- default —
- Controlled or initial surfaced section id.
- onSurface
- (id) => void
- default —
- Fires the section id once it settles at the top.
- radius / height
- number
- default 96 / 320
- Planet radius and stage height in px.
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | PlanetSection[] | — | Sections spaced evenly around the planet rim. |
| value / defaultValue | string | — | Controlled or initial surfaced section id. |
| onSurface | (id) => void | — | Fires the section id once it settles at the top. |
| radius / height | number | 96 / 320 | Planet radius and stage height in px. |