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 shadcn@latest add https://motion-kit-astro.vercel.app/r/rubiks-cube.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/rubiks-cube.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/rubiks-cube.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/rubiks-cube.json

Usage

---
import "@/components/motion-kit/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]"
/>

import "@/components/motion-kit/rubiks-cube-element.ts";

export default function Page() {
  return (
    <motion-rubiks-cube
      color="#17181A"
      rim-color="#FF6900"
      rim-power={6}
      rim-intensity={1.5}
      duration={1.5}
      gap={0.015}
      radius={0.125}
      className="w-full h-[500px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/rubiks-cube-element.ts";
</script>

<template>
  <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]"
  />
</template>

<script>
  import "@/components/motion-kit/rubiks-cube-element.ts";
</script>

<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]"
/>

<script type="module" src="/components/motion-kit/rubiks-cube-element.js"></script>

<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`	`string`	`#17181A`
`rim-color`	`string`	`#FF6900`
`rim-power`	`number`	`6`
`rim-intensity`	`number`	`1.5`
`duration`	`number`	`1.5`
`gap`	`number`	`0.015`
`radius`	`number`	`0.125`
`scale`	`number`	`1`
`rotation`	`number`	`0`
`offset-x`	`number`	`0`
`offset-y`	`number`	`0`