Motion Core

canvas

Rubiks Cube

A dynamic Rubik's Cube that continuously rotates while a Fresnel rim glow traces each edge.

@threlte/core@threlte/extrasthree

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add rubiks-cube

Import the component

Import the component into your Svelte file: 
import { RubiksCube } from "$lib/motion-core";
import { RubiksCube } from "$lib/motion-core";

Usage

<script lang="ts">
	import { RubiksCube } from "motion-core";
</script>

<RubiksCube class="h-full min-h-96 w-full" />

Props

RubiksCube

PropTypeDefault
size
number 1
duration
number 1.5
gap
number 0.015
radius
number 0.125
fresnelConfig
FresnelConfig Default Fresnel
class
string ""

FresnelConfig

KeyTypeDefault
color
THREE.ColorRepresentation "#111113"
rimColor
THREE.ColorRepresentation "#FF6900"
rimPower
number 6
rimIntensity
number 1.5