Puzzle Cube
A 3x3x3 puzzle cube that scrambles itself, solves with the exact inverse moves, then celebrates.
Controls
<PuzzleCube />About
Problem solved, on loop. A glossy 3x3x3 cube in spectrum colours scrambles itself, then solves with the exact inverse moves, and celebrates with a light wave and a quarter-turn hop. A small readout narrates the moves ("scrambling · R U′ F", "solved in 5 moves"). On hover the cube opens into an exploded view around its glowing core and turns faster. Ported from the VibeBox hero gallery.
Use it when
- Consulting, engineering, problem-solving and "we figure it out" messages.
- A playful hero for a technical audience.
Skip it when
- A page already has a 3D centrepiece.
- Motion level 0 or 1 sites.
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 |
|---|---|---|---|
| status | boolean | true | Shows the live caption in a corner. |
| label | string | "A three by three puzzle cube that scrambles and solves itself" | 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
- The readout is decorative; the label carries the meaning for screen readers.
- 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