Featured
Rubik's Cube
An interactive 3D Rubik's cube — drag to orbit, click a face to twist a layer. Monochrome, CSS 3D-transform based, GPU-accelerated.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<RubiksCube size={420} interaction="full" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 420 | Outer scene size in px. The cube scales proportionally. |
| interaction | "full" | "orbit" | "faces" | "none" | "full" | `full` allows orbit + face twists. `orbit` only drags. `faces` only twists. `none` is display-only. |
| initialRotation | { x: number; y: number } | — | Starting view rotation in degrees. |
| className | string | — | Classes applied to the scene wrapper. |
| style | CSSProperties | — | Inline styles merged onto the scene wrapper. |
Use cases
Brand puzzle / 404
Make a fun, interactive moment out of an error or about page.
Engineering blog ornament
Pair with a write-up on CSS 3D transforms or animation choreography.
Recruiting page
A subtle “we like puzzles” signal on a careers or about-team page.
Easter egg in docs
Tuck into a “Toys” or footer section as a reward for users who scroll all the way down.