Properties

The Web Cube element exposes attributes you can use to configure behavior and appearance.

size

You can change the cube dimension by setting the size attribute.

Has default value of 3.

If size is 0, negative, or invalid, it falls back to 1.

<web-cube size="4"></web-cube>

speed

You can change animation speed by setting the speed attribute.

The speed is in milliseconds and represents the time it takes for the cube to rotate 90 degrees.

Has default value of 500.

If speed is 0, negative, or invalid, it falls back to 500.

<web-cube speed="5000"></web-cube>

disabled-pointer-events

You can disable pointer interactions by setting the disabled-pointer-events attribute.

Interactions are disabled while this attribute is present and not equal to false.

<web-cube disabled-pointer-events></web-cube>

Color attributes

You can customize cube colors using attributes that map to CSS variables.

• color-background
• color-front
• color-right
• color-back
• color-left
• color-up
• color-down

<web-cube
  color-background="#101426"
  color-front="#e63946"
  color-right="#f1faee"
  color-back="#457b9d"
  color-left="#1d3557"
  color-up="#ffd166"
  color-down="#06d6a0"
></web-cube>

Read-only getters

The element also exposes two read-only getters in JavaScript:

• size: number
• isRotating: boolean

import { WebCube } from "@web-cube/web-cube";

const cube = document.querySelector("web-cube") as WebCube;
console.log(cube.size, cube.isRotating);