Motion Core

Canvas

Rubiks Cube

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

ogl

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add rubiks-cube
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

Props

1.000
0.000
0.000
0deg
1.500s
0.015
0.125
<script lang="ts">
	import { RubiksCube } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof RubiksCube>>;

	let {
		scale = 1,
		offsetX = 0,
		offsetY = 0,
		rotation = 0,
		duration = 1.5,
		gap = 0.015,
		radius = 0.125,
	}: Props = $props();
</script>

<RubiksCube
	class="h-full min-h-96 w-full"
	{scale}
	{offsetX}
	{offsetY}
	{rotation}
	{duration}
	{gap}
	{radius}
/>

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

	type Props = Partial<ComponentProps<typeof RubiksCube>>;

	let {
		scale = 1,
		offsetX = 0,
		offsetY = 0,
		rotation = 0,
		duration = 1.5,
		gap = 0.015,
		radius = 0.125,
	}: Props = $props();
</script>

<RubiksCube
	class="h-full min-h-96 w-full"
	{scale}
	{offsetX}
	{offsetY}
	{rotation}
	{duration}
	{gap}
	{radius}
/>

Props

RubiksCube

PropTypeDefault
scale
number 1
offsetX
number 0
offsetY
number 0
rotation
number 0
duration
number 1.5
gap
number 0.015
radius
number 0.125
fresnelConfig
FresnelConfig Default Fresnel
class
string ""

FresnelConfig

KeyTypeDefault
color
stringnumber[number, number, number]{ r: number; g: number; b: number } "#17181A"
rimColor
stringnumber[number, number, number]{ r: number; g: number; b: number } "#FF6900"
rimPower
number 6
rimIntensity
number 1.5