Thinking Orbs
Three orbs think over a cloud of pieces, then beam them into place until your mark stands in pixels.
Controls
<ThinkingOrbs />About
Thinking, then building. Three orbs circle a cloud of raw pieces and trade sparks along their synapses while a readout narrates their thoughts. Then they solve it: each orb beams its share of the pieces into place until your mark stands in pixels, and a wave of light reveals its colours. The mark is yours: rows of characters ("." is empty) with a colour for each tile; the default is a four-point spark painted along the palette. Ported from the VibeBox hero gallery, where the answer is the VibeBox logo (that pixel map stays in VibeBox's own code).
Use it when
- AI, strategy and design studios: show thinking turning into a result.
- A logo reveal that feels earned.
Skip it when
- A page already has a 3D centrepiece.
- Marks that do not read at about 30 by 21 tiles.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistProps
| Prop | Type | Default | Description |
|---|---|---|---|
| mark | PixelMark | a four-point spark | The mark to build: rows of characters plus a colour, region and order for each tile. |
| thoughts | readonly string[] | — | Lines the readout cycles through while the orbs think. |
| phases | { solve, reveal, solved } | — | Readout lines for the later phases. |
| status | boolean | true | Shows the live caption in a corner. |
| label | string | "Three orbs trading sparks over scattered pieces, then building them into a mark" | Accessible name for the artwork. |
| poster | ReactNode | — | Shown until the first frame and without hardware WebGL2. |
| className | string | — | Merged with cn(); give it a size or aspect ratio. |
Accessibility and motion
- Keyboard
- Not focusable; the artwork has no actions.
- Screen readers
- role="img" with a descriptive label; the live caption is hidden.
- Touch
- A touch on the artwork makes it react like a hover; it never blocks scrolling.
- Reduced motion
- A composed still frame of the finished piece; no idle motion or hover response.
Edge cases and limits
- Around 300 to 700 tiles reads best; much larger marks crowd the stage.
- The default regions split the mark into column thirds.
- Without hardware WebGL2 (software renderers included) the poster stays.
Related
Equalizer Ring
FreeA crown of light bars pulsing like a visualizer around a floating glass box; bars rise toward the pointer.
3D · three.js
Infinity Ribbon
FreeA glossy spectrum ribbon twisted into a figure-eight, with a travelling light pass; it bends toward the pointer.
3D · three.js
Launch Stack
FreeA website taken apart into four glass layers: data, logic, design and the live site, with light rising through them.
3D · three.js