Canvas
A dynamic Rubik's Cube that continuously rotates while a Fresnel rim glow traces each edge.
npx @motion-core/cli add rubiks-cubeimport { RubiksCube } from "$lib/motion-core";import { RubiksCube } from "$lib/motion-core";<script lang="ts">
import { RubiksCube } from "motion-core";
import type { ComponentProps } from "svelte";
type Props = Partial<ComponentProps<typeof RubiksCube>>;
let {
size = 1,
duration = 1.5,
gap = 0.015,
radius = 0.125,
}: Props = $props();
</script>
<RubiksCube class="h-full min-h-96 w-full" {size} {duration} {gap} {radius} />
| Prop | Type | Default |
|---|---|---|
size | number | 1 |
duration | number | 1.5 |
gap | number | 0.015 |
radius | number | 0.125 |
fresnelConfig | FresnelConfig | Default Fresnel |
class | string | "" |
| Key | Type | Default |
|---|---|---|
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 |