KQ-1539 · BANDED/GIANT
Banded Giant
A ringed gas giant rendered per glyph cell on Canvas 2D: each cell is cast onto the sphere and the ring plane, its glyph picked by the light it receives and its ink by what it hit — pale zone, darker belt, the storm, the ring — while every latitude flows at its own speed and the turbulence is sampled in each latitude's advected longitude, so the bands shear past one another, a storm turns in the south, the ring's shadow falls across the disc and the planet's across the ring, and now and then a moon crosses in front as one bright character with its shadow beside it. Drag sideways to spin it 1:1 (a throw coasts with friction) and up or down to tip it, rubber-banded past ±30° and returned to ringTilt on springs.drift with the release velocity. Left and Right give a spin that coasts, Up and Down tip it and let it swing back, Home stops the spin.
Fieldline Observatory
Tonight · the giant at opposition
bands shearing · drag to spin and tip
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/banded-giant
Props
- bandSpeed
- number
- default 1
- How fast the bands shear past one another, 0 (still) to 3.
- ringTilt
- number
- default 22
- How far the ring opens toward you, in degrees (−40 to 60); 0 is edge-on.
- charSet
- "classic" | "blocks" | "dots"
- default "classic"
- The glyph ramp the light is drawn in.
- spin
- number
- default 1
- How fast the planet turns as a whole, 0 to 3.
- bands
- number
- default 9
- How many bands cross the disc, 4 to 20.
- storm
- boolean
- default true
- A slow storm turning in the south, riding its band.
- ring
- boolean
- default true
- The ring, its division and its shadow on the disc.
- moon
- boolean
- default true
- A moon that now and then crosses in front, with its shadow.
- moonPeriod
- number
- default 14
- Seconds for the moon to go once round.
- resolution
- number
- default 20
- Rows of glyphs across the disc, 14 to 60.
- colors
- { zone?: string; belt?: string; storm?: string; ring?: string }
- default —
- The planet's inks, any CSS colours. Pigments at fixed lightness by default, made for a night-sky backdrop in either theme.
- interactive
- boolean
- default true
- Drag and the arrow keys spin and tip it.
- paused
- boolean
- default false
- Hold the bands, the storm and the moon where they are.
- seed
- number
- default 1
- Seeds the bands, their jets and the turbulence.
- dpr
- number
- default 2
- Cap on the canvas's device pixel ratio, at most 2.
- onTransit
- () => void
- default —
- Fires as the moon starts across the disc.
- label
- string
- default "A banded gas giant"
- The planet's accessible name; the ring's opening is added to it.
- className
- string
- default "h-56 w-full"
- Sizes and shapes the box; the planet and its ring always fit inside it.
| Prop | Type | Default | Description |
|---|---|---|---|
| bandSpeed | number | 1 | How fast the bands shear past one another, 0 (still) to 3. |
| ringTilt | number | 22 | How far the ring opens toward you, in degrees (−40 to 60); 0 is edge-on. |
| charSet | "classic" | "blocks" | "dots" | "classic" | The glyph ramp the light is drawn in. |
| spin | number | 1 | How fast the planet turns as a whole, 0 to 3. |
| bands | number | 9 | How many bands cross the disc, 4 to 20. |
| storm | boolean | true | A slow storm turning in the south, riding its band. |
| ring | boolean | true | The ring, its division and its shadow on the disc. |
| moon | boolean | true | A moon that now and then crosses in front, with its shadow. |
| moonPeriod | number | 14 | Seconds for the moon to go once round. |
| resolution | number | 20 | Rows of glyphs across the disc, 14 to 60. |
| colors | { zone?: string; belt?: string; storm?: string; ring?: string } | — | The planet's inks, any CSS colours. Pigments at fixed lightness by default, made for a night-sky backdrop in either theme. |
| interactive | boolean | true | Drag and the arrow keys spin and tip it. |
| paused | boolean | false | Hold the bands, the storm and the moon where they are. |
| seed | number | 1 | Seeds the bands, their jets and the turbulence. |
| dpr | number | 2 | Cap on the canvas's device pixel ratio, at most 2. |
| onTransit | () => void | — | Fires as the moon starts across the disc. |
| label | string | "A banded gas giant" | The planet's accessible name; the ring's opening is added to it. |
| className | string | "h-56 w-full" | Sizes and shapes the box; the planet and its ring always fit inside it. |