Canvas
Rubik's Cube
A 3D Rubik's Cube that continuously rotates and scrambles itself with smooth face animations. Features a Fresnel rim glow shader and interactive orbit controls.
Preview
A 3D Rubik's Cube that continuously rotates and scrambles itself. Features a Fresnel rim glow and interactive orbit controls — drag to spin.
Attributes
Installation
pnpm dlx motion-blocks add rubiks-cubeUsage
---import "@/components/motion-blocks/rubiks-cube-element.ts";--- <motion-rubiks-cube color="#17181A" rim-color="#FF6900" rim-power="6" rim-intensity="1.5" duration="1.5" gap="0.015" radius="0.125" class="w-full h-[500px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
color Base body color of each cubelet. | string | #17181A |
rim-color Accent color applied by the Fresnel rim shader. | string | #FF6900 |
rim-power Controls how tight the Fresnel rim hug is. Higher values yield a thinner outline. | number | 6 |
rim-intensity Intensity multiplier for the Fresnel rim color. | number | 1.5 |
duration Seconds it takes to complete a face rotation. | number | 1.5 |
gap Gap between cubelets to accentuate separation. | number | 0.015 |
radius Corner radius for softened cube edges. | number | 0.125 |
scale Scale multiplier for the cube. | number | 1 |
rotation Cube rotation in degrees (Z-axis). | number | 0 |
offset-x Horizontal cube offset in normalized viewport units. | number | 0 |
offset-y Vertical cube offset in normalized viewport units. | number | 0 |