AI & chat
Thinking Orb
Minimalist monochrome particle vortex for AI interfaces
detent-thinking-orb
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-canvas
- Group
- AI & chat
5.3 KB gzip for the class module
Variants
Nine cognitive states, one loop per orb. Setting state retargets the running loop — it never restarts
or stacks — and each state is a distinct deformation of the same particle shell. The host is a single
role="img" named "<state> orb"; the canvas is decorative.
paused freezes the current frame, and prefers-reduced-motion: reduce paints one static
frame with zero scheduled frames.
The last orb uses the documented light mode (el.dark = false, the property is the opt-out for the
default-true flag) on a light surface. Documented parts: orb, canvas. Documented custom
property: --detent-thinking-orb-backdrop.
Recorded states
pausedrecorded state; no setterreduced motionrecorded state; no setterworkingrecorded state; no settersearchingrecorded state; no settersolvingrecorded state; no setterlisteningrecorded state; no setterconnectingrecorded state; no setterweavingrecorded state; no settercomposingrecorded state; no setterbreathingrecorded state; no settershapingrecorded state; no setter
Usage
Import
import '/components/thinking-orb/define.js';
// or register it yourself
import { DetentThinkingOrb } from '/components/thinking-orb/thinking-orb.js';Attributes
aria-labeldarkpausedsizespeedstate
Properties
No properties are recorded for this component.
Slots
No slots are recorded for this component.
Events
No events are recorded for this component.
Example
Runnable example: site/examples/thinking-orb.ts. The snippet below is generated from the catalogued attributes.
<detent-thinking-orb
aria-label="${state} orb"
dark
paused
size="64"
speed="1"
state="working"
></detent-thinking-orb>Source
The pinned upstream source for this row:
src/components/ui/ThinkingOrb.tsxsha256 c3efcbedd46b…
Native files
The native module and its artifacts:
src/components/thinking-orb/thinking-orb.tssrc/components/thinking-orb/styles.csssrc/components/thinking-orb/define.tsdocs/components/thinking-orb.mdsite/examples/thinking-orb.tstests/browser/thinking-orb.spec.tsevidence/components/thinking-orb.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
aria-label | aria-label | string | '${state} orb' | Kebab-case attribute; camelCase property. |
dark | dark | boolean | true | Presence semantics: present means true, absent means false. |
paused | paused | boolean | false | Presence semantics: present means true, absent means false. |
size | size | number | 64 | Kebab-case attribute; camelCase property. |
speed | speed | number | 1 | Kebab-case attribute; camelCase property. |
state | state | 'working' | 'searching' | 'solving' | 'listening' | 'connecting' | 'weaving' | 'composing' | 'breathing' | 'shaping' | 'working' | Kebab-case attribute; camelCase property. |
Properties
No property-only values are recorded for this component.
Events
No custom events are recorded for this component.
Slots
No slots are recorded for this component.
CSS customisation
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- dark resolves from the documented default true with the property as the opt-out instead of auto-detecting document.documentElement.classList.
- A hidden document stops the loop through visibilitychange; the source handled paused, reduced motion and IntersectionObserver only.
- size clamps 8..512 and speed 0..8 with one development warning.
- role=img and aria-label live on the host, where the source put them on the inner wrapper span.
- The canvas honours devicePixelRatio capped at 2 for both backing store and CSS box.
What it does
A minimalist monochrome particle vortex for AI interfaces: a spherical shell of particles around a luminous optical core, with nine cognitive states that each deform the field differently.
Upstream behaviour
- Pure monochrome aesthetic (clean white/silver on dark, deep obsidian on light) with zero colors
- 9 unique cognitive states: working, searching, solving, listening, connecting, weaving, composing, breathing, and shaping
- GPU-accelerated Canvas rendering with 3D spherical trigonometry and perspective projection
- Adaptive particle density scaling automatically calibrated to size
- Full accessibility support with automatic prefers-reduced-motion fallback
- Minimalist optical core with subtle particle motion trailing and star sparkles
Differences from upstream
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- dark resolves from the documented default true with the property as the opt-out instead of auto-detecting document.documentElement.classList.
- A hidden document stops the loop through visibilitychange; the source handled paused, reduced motion and IntersectionObserver only.
- size clamps 8..512 and speed 0..8 with one development warning.
- role=img and aria-label live on the host, where the source put them on the inner wrapper span.
- The canvas honours devicePixelRatio capped at 2 for both backing store and CSS box.